Multiple File Upload in Web Api using jQuery Ajax

Question

I have a problem uploading files using jQuery Ajax and Web API. When I make a POST to my API, I am not getting uploaded files in my controller.

In my HTML I have several file inputs with class="file" like this:

<form id="edit" enctype="multipart/form-data">
    <input class="file" type="file" name="field_custom_file" accept='image/*' />
    <input class="file" type="file" name="field_custom_file" accept='image/*' />
    <input class="file" type="file" name="field_custom_file" accept='image/*' />
</form>

In addittion, I have a button which executes a Javascript function:

function send() {
    var files = $('.file')[0].files;
    if (files.length > 0) {
        if (window.FormData !== undefined) {
            var data = new FormData();
            for (var x = 0; x < files.length; x++) {
                data.append("file" + x, files[x]);
            }

            $.ajax({
                type: "POST",
                url: '/api/tripgroups',
                contentType: false,
                processData: false,
                data: data,
                success: function (result) {
                    toastr.success('Trip Group was updated!');
                },
                error: function (xhr, status, p3, p4) {
                    var err = "Error " + " " + status + " " + p3 + " " + p4;
                    if (xhr.responseText && xhr.responseText[0] == "{")
                        err = JSON.parse(xhr.responseText).Message;
                    console.log(err);
                },
                enctype: 'multipart/form-data',
                headers: {
                            'Accept': 'application/json',
                            'Content-Type': 'application/json'
                        },
            });
        } else {
            alert("This browser doesn't support HTML5 file uploads!");
        }
    }
}

Finally, in my web api controller, if I try to access HttpContext.Current.Request.Files I get an empty collection, and if I try to access content like this:

var streamProvider = new MultipartFormDataStreamProvider("images");
await Request.Content.ReadAsMultipartAsync(streamProvider);

Then I get this error:

Invalid 'HttpContent' instance provided. It does not have a content type header starting with 'multipart/'. Parameter name: content

Thanks in advance.

Have you tried to set the content type? : contentType: false — rick, May 11 '16 at 13:34
Plz replace `contentType : false` with `contentType : 'multipart/form-data'` — rt2800, May 11 '16 at 13:36
Try providing different `name` attribute value for each of `` elements and appending entire `
` to `FormData()`. `var data = new FormData($("#edit")[0])` . Not certain why headers are including `application/json` as property? — guest271314, May 11 '16 at 13:43
What is purpose of multiple `` elements? `$('.file')[0].files` would only select first `input type="file"` element? — guest271314, May 11 '16 at 13:49
I changed each input name and sent form data but I had no luck — Nicolas Gordillo, May 11 '16 at 13:52
sorry, 'multiple' was a typo, I already deleted it. Also, you are right about second one, but just for testing purposes I tried searching by id like this: var files = $('#myInputID')[0].files; and I get the same result. (files var actually has the file I uploaded correctly) — Nicolas Gordillo, May 11 '16 at 13:59
Removing headers results in this error: 415 (Unsupported Media Type) The request entity's media type 'multipart/form-data' is not supported for this resource. — Nicolas Gordillo, May 11 '16 at 14:04
_"I tried searching by id like this: `var files = $('#myInputID')[0].files`"_ No `input` elements at `html` at Question have `id` ? — guest271314, May 11 '16 at 14:05
See http://stackoverflow.com/questions/27863434/upload-file-using-webapi-ajax — guest271314, May 11 '16 at 14:08
@guest271314 originally I didn't have ids as I generated form dinamically using Knockout, but I added it just for testing — Nicolas Gordillo, May 11 '16 at 14:09
See also http://stackoverflow.com/questions/10320232/how-to-accept-a-file-post-asp-net-mvc-4-webapi/20356591#20356591 — guest271314, May 11 '16 at 14:14

score 0 · Answer 1 · answered May 11 '16 at 14:02

You are using API so your request is an HttpResponseMessage.

If you are not in a hurry I would suggest absorbing this article. http://www.asp.net/web-api/overview/advanced/sending-html-form-data-part-2

If you are indeed on a deadline, I would suggest posting 1 file at a time and explain the limitations of uploading many files at once. Otherwise use a third party API to learn from and reverse engineer it for yourself.

score 0 · Answer 2 · answered May 11 '16 at 17:59

I finally figured it out.

I changed my Ajax call as @guest271314 suggests to get all file inputs:

var files = $('.file');
if (files.length > 0) {
    if (window.FormData !== undefined) {
        var data = new FormData();
        for (var x = 0; x < files.length; x++) {
            data.append("file" + x, files[x].files[0]);
        }
         $.ajax({
            type: "POST",
            url: '/api/tripgroups',
            contentType: false,
            processData: false,
            data: data,
            success: function (result) {
                toastr.success('Trip Group was updated!');
            }
        });
    } else {
        alert("This browser doesn't support HTML5 file uploads!");
    }
}

And the main issue was on my controller, because I had another parameter

public async Task<HttpResponseMessage> Post(SomeClass param)

when I removed that parameter it receives files correctly.

I still don't know how to receive a JSON object and files in the same request (if it is possible) but I split out into 2 different controllers and works well.

Thanks everyone for your help!

Multiple File Upload in Web Api using jQuery Ajax

2 Answers2