How to save the picture using web api?

Question

I've got this method in AccountController

[HttpPut]
[Route("UserInfo")]
public async Task<IHttpActionResult> SetUserInfo(UserViewModel model)
{
    if (!ModelState.IsValid)
    {
        return BadRequest(ModelState);
    }

    var user = UserManager.FindByName(User.Identity.Name);

    user.UserName = model.UserName;
    user.Email = model.Email;
    user.FullName = model.FullName;
    user.Skype = model.Skype;
    user.PhoneNumber = model.PhoneNumber;

    SaverPhotos.SavePhoto(model);

    IdentityResult result = await UserManager.UpdateAsync(user);

    if (!result.Succeeded)
    {
        return GetErrorResult(result);
    }

    return Ok();
}

public class UserViewModel
{
    public string UserName { get; set; }
    public string FullName { get; set; }
    public string Email { get; set; }
    public string Skype { get; set; }
    public string PhoneNumber { get; set; }
    public HttpPostedFileBase Avatar { get; set; }
}

And this ajax code in view:

$.ajax({
    type: 'PUT',
    contentType: false,
    processData: false,
    url: '/api/account/UserInfo',
    data: data,
    beforeSend: function (xhr) {
        var token = window.app.model.get('tokenInfo');
        xhr.setRequestHeader("Authorization", "Bearer " + token);
    },
    success: function (response) {
        alert("Successfully saving info!");
    },
    error: function (response) {
        alert('Error');
    }
});

In form a lot of code, but file input looks:

<input type="file" name="Avatar" accept="image/png, image/jpeg, image/gif" id="profileAvatar"/>

And when i'm trying to save this form i get the error with code 415. Without contentType and proccessType with 'false' error was 500, but in debug mode I did not even get in method SetUserInfo. UserViewModel just null. Why? In the internet a lot of people says writing the UploadFileController to saving the images, but how then i set this image with user? Help please.

contentType is not a booolean, it is a mime type, like image/jpg, for example. — Crowcoder, Aug 10 '18 at 20:14
Anyway, even in contentType set info like ''multipart/form-data" (probably because file in form) i still got the 415 error. — Vladislav Pavlowski, Aug 10 '18 at 20:17
Possible duplicate of [Sending multipart/formdata with jQuery.ajax](https://stackoverflow.com/questions/5392344/sending-multipart-formdata-with-jquery-ajax) — Paul Abbott, Aug 10 '18 at 20:22

score 0 · Accepted Answer · answered Aug 12 '18 at 00:09

Okay, i resolved it.

[HttpPost]
        [Route("UserInfo")]
        public async Task<IHttpActionResult> SetUserInfo()
        {
            NameValueCollection form = HttpContext.Current.Request.Form;
            var model = Pawmapper<UserViewModel>.Map(form, new UserViewModel());

            var user = UserManager.FindByName(User.Identity.Name);
            user.UserName = model.UserName;
            user.Email = model.Email;
            user.FullName = model.FullName;
            user.Skype = model.Skype;
            user.PhoneNumber = model.PhoneNumber;

            if (HttpContext.Current.Request.Files.Count > 0)
            {
                model.Avatar = HttpContext.Current.Request.Files["Avatar"];
                var photoId = Guid.NewGuid() + Path.GetExtension(model.Avatar.FileName);

                user.Photo = new DataProvider.Photo
                {
                    FileName = model.Avatar.FileName,
                    Path = "app/modules/main/img/users/" + photoId
                };

                model.Avatar.SaveAs(HttpContext.Current.Server.MapPath("~/Client/app/modules/main/img/users/" + photoId));
            }

            var result = await UserManager.UpdateAsync(user);

            if (!result.Succeeded)
            {   
                return GetErrorResult(result);
            }

            return Ok();
        }

Pawmapper

public static class Pawmapper<T>
    {
        public static T Map(NameValueCollection nameValueCollection, T model)
        {
            foreach (string keyValue in nameValueCollection.AllKeys)
            {
                PropertyInfo property = model.GetType().GetProperty(keyValue, BindingFlags.Public | BindingFlags.Instance);
                if (property != null)
                {
                    property.SetValue(model, nameValueCollection[keyValue], null);
                }
            }

            return model;
        }
    }

How to save the picture using web api?

1 Answers1