Angular Upload File and Additional Data ASP WebAPI

Question

I'm trying to upload a form with some text fields and a file to my WebAPI. Currently I always get a 415 error (a breakpoint in the ASP controller doesn't gets hit). My code looks like this:

Angular Service

// 'Upload' is from ng-file-upload
function applicationService(settings, $http, Upload) {
  var createCustomApplication = function(application) {
    var url = settings.baseUrl + '/api/applications/custom';

    var data = new FormData();
    angular.forEach(application, function (value, key) {
      data.append(key, value);
    });

    return Upload.upload({
      url: url,
      data: data,
      method: 'POST'
    });
  };

  return {
    createCustomApplication: createCustomApplication
  }
}

WebAPI controller

[ResponseType(typeof(ApplicationModel))]
[HttpPost, Route("api/applications/custom")]
public IHttpActionResult CreateCustomApplication([FromBody]ApplicationModel application)
{
   var file = HttpContext.Current.Request.Files[0];
   return Ok();
}

Thijs · Accepted Answer · 2016-06-02 08:24:39Z

If you want to include a form with files as parameter to an action it is necessary to add a custom media formatter. Fortunately someone already created a Nuget-package for this. Configuration is easy. Install the package and add a line to your WebApiConfig-file.

This package allows you to use a HttpFile-object which captures your file either directly as a parameter or inside a model. From the docs:

[HttpPost]
public void PostFileBindRawFormData(MultipartDataMediaFormatter.Infrastructure.FormData formData)
{
    HttpFile file;
    formData.TryGetValue(<key>, out file);
}

or

public class PersonModel
{
    public string FirstName {get; set;}
    public string LastName {get; set;}
    public DateTime? BirthDate {get; set;}
    public HttpFile AvatarImage {get; set;}
    public List<HttpFile> Attachments {get; set;}
    public List<PersonModel> ConnectedPersons {get; set;}
}

//api controller example
[HttpPost]
public void PostPerson(PersonModel model)
{
    //do something with the model
}

Matheno · Accepted Answer · 2016-02-24 10:50:28Z

0

I've had the same issue. You should add the content type in your POST request.

headers: {
     'Content-Type': undefined
},

answered Feb 24, 2016 at 10:50

Matheno

4,2126 gold badges40 silver badges54 bronze badges

1 Comment

Thijs Over a year ago

After adding the header I get the same error message. When I inspect my headers from my request in the devtools, nothing has changed (the header value is still multipart/form-data; boundary=----WebKitFormBoundaryVgMJf1g7g2DX9LUd)

Arkiliknam · Accepted Answer · 2016-02-24 12:14:28Z

0

You're code looks very similar to what I use. Perhaps the issue is to do with the multipart/form-data header value. I'm not experienced enough to say what is wrong in your implementation, but perhaps try this alternate async await approach.

[Route("api/applications/custom")]
[HttpPost]
public async Task<HttpResponseMessage> Upload()
{
    MultipartMemoryStreamProvider memoryStreamProvider;
    try
    {
        if (!Request.Content.IsMimeMultipartContent())
        {
            this.Request.CreateResponse(HttpStatusCode.UnsupportedMediaType);
        }

        memoryStreamProvider = await Request.Content.ReadAsMultipartAsync();
    }
    catch (Exception e)
    {
        return Request.CreateResponse(HttpStatusCode.BadRequest, string.Format("An error has occured while uploading your file. Error details: '{0}'", e.Message));    
    }

    // do something with your file...

    return Request.CreateResponse(HttpStatusCode.OK);

}

Here is my JS code. I also use promises instead of what ever is returned (if anything) from the Upload function.

$scope.submit = function() {
    if ($scope.form.file.$valid && $scope.file) {
        $scope.upload($scope.file);
    }
};

$scope.upload = function(file) {

    Upload.upload({
        url: 'api/applications/custom',
        data: { file: file }
    }).then(function(response) {
        // report the success to the user
    }, function(response) {
        // report the error to the user
    }, function(evt) {
        // report the progress of the upload to the user
        $scope.uploadProgress = evt.loaded / evt.total;
    });
};

I used the following article as a basis for my solution: http://monox.mono-software.com/blog/post/Mono/233/Async-upload-using-angular-file-upload-directive-and-net-WebAPI-service/

edited Feb 24, 2016 at 12:14

answered Feb 24, 2016 at 11:19

Arkiliknam

1,8251 gold badge19 silver badges36 bronze badges

6 Comments

Thijs Over a year ago

Doesn't work for me. The memoryStreamProvider is null.

Arkiliknam Over a year ago

Ah, but the WebAPI action is being hit now. That's more than you had before, right?

Thijs Over a year ago

Yes, it seems when I remove the parameter the action gets hit.

Arkiliknam Over a year ago

I assume the additional "," in your upload object isn't causing the issue. Worth cleaning it up regardless. This one: method: 'POST',

Arkiliknam Over a year ago

Does your Upload actually return something? I use the promise notation to handle errors and successes. I'll post my js in my answer in case it gives you a clue.

|

Collectives™ on Stack Overflow

Angular Upload File and Additional Data ASP WebAPI

3 Answers 3

Comments

1 Comment

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related