Upload photo and send it as a json object

Question

I am using the view to upload a photo then I receive it in the controller as HttpPostedFileBase

then I send it in an Http request and things are just fine but when I recieve the http request in json object the photo comes as null`

here is the request:

 public ActionResult RegisterUsersCheck(User_all_data user_data)
        {
            var webAddr = "http://localhost:59305/api/User/RegisterUsersCheck";
            var httpWebRequest = (HttpWebRequest)WebRequest.Create(webAddr);
            httpWebRequest.ContentType = "application/json; charset=utf-8";
            httpWebRequest.Accept = "application/json";
            httpWebRequest.Method = "POST";
            using (var streamWriter = new StreamWriter(httpWebRequest.GetRequestStream()))
            {
                string json = "{ user : { 'FirstName':'" + user_data.user.FirstName +
                    "','LastName': '" + user_data.user.LastName + "','Email': '" + user_data.user.Email +
                    "','Password': '" + user_data.user.Password + "','Country': '" + user_data.user.Country +
                    "','PhoneNumber': '" + user_data.ProfilePicture +
                    "'},'ProfilePicture': '" + user_data.PhoneNumber + "'}";
                streamWriter.Write(json);
                streamWriter.Flush();
            }

            var httpResponse = (HttpWebResponse)httpWebRequest.GetResponse();
            using (var streamReader = new StreamReader(httpResponse.GetResponseStream()))
            {

                var result = streamReader.ReadToEnd();
                return RedirectToAction("Index");
            }

and here is how i receive the request

public bool RegisterUsersCheck ([FromBody] User_all_data user_ext)
        {
            List<User> all_users = repo.getUsers();
            var match = all_users.Find(i => i.Email == user_ext.user.Email);
            if (match == null)
            {
                RegisterUsers(user_ext);
                return true;
            }
            else
            {
                return false;
            }
        }

and here is the User_all_data class

public class User_all_data
        {
            public User user { get; set; }
            public HttpPostedFileBase ProfilePicture { get; set; }
        }

as I mentioned earlier the sending is fine but when I receive the request the ProfilePicture is null

Solution

Well, first of all, in this block of code

string json = "{ user : { 'FirstName':'" + user_data.user.FirstName +
                "','LastName': '" + user_data.user.LastName + "','Email': '" + user_data.user.Email +
                "','Password': '" + user_data.user.Password + "','Country': '" + user_data.user.Country +
                "','PhoneNumber': '" + user_data.ProfilePicture +
                "'},'ProfilePicture': '" + user_data.PhoneNumber + "'}";

It looks like the keys PhoneNumber and ProfilePicture are swapped. You are setting the PhoneNumber to be the ProfilePicture and the ProfilePicture to be the PhoneNumber. It should be the other way around.

Also, I'm not sure what data type user_data.ProfilePicture is, but if it's an image, you can't just stuff it into JSON. JSON does not support binary data like an image. One option is to base64 encode the image data before putting it into JSON. Here's an example of doing this:

byte[] imageBytes = ...
var imageBytesStr = Convert.ToBase64String(imageBytes);

Then when you are constructing your JSON, set the ProfilePicture key to the base64 encoded string imageBytesStr. Your clients then must base64 decode the ProfilePicture string to get the image bytes. Then the clients must construct an image from these bytes.

Comments

[Abdallah]

This was helpful I just found away to get it into byte[] then use the conversion statement...Thanks