Asp.net MVC 5 Ajax Multi File Upload may need value provider, suggestions?

Question

I am working on MVC 5 application. And i need to upload multiple files.

What I know is HttpPostedFile and HttpPostedFileBase classes can get one file. But my condition is I need multiple files to be uploaded at once.

My question is,

1) Since there is no support for multiple file upload using ajax, do I need to write value provider that make my action to accept multiple files?

2) If I implement custom value provider, what should I use for parameter in action method (should it be IEnumerable<HttpPostedFileBase> f)?Because I did that and I am getting null.

Update

Here is my Ajax call from View

    var files = e.target.files;
        if (window.FormData !== undefined) {
            var fd = new FormData();
            for (x = 0; x < files.length; x++) {
                fd.append("file" + x, files[x]);
            }
           // fd.append("fawad", "ali");
            $.ajax({
                type: "POST",
                url: "/FileOp/FileUpload",
                contentType: false,
                processData: false,
                data: fd,
                sucess: function (result) {
                  //  alert();
                },
                error: function (xhr, status, p3, p4) {
                    alert(xhr.responseText);
                }
           });

And here is my action method (HttpPost)

  [HttpPost]

  public object FileUpload(IEnumerable<HttpPostedFileBase> file)

Thanks

You don't need a custom value provider. You just need a property in your view model (or a parameter in your POST method which is `IEnumerable XXX` where `XXX` is the name of your file input.(and I assume you are using `FormData` as per [this answer](http://stackoverflow.com/questions/29293637/how-to-append-whole-set-of-model-to-formdata-and-obtain-it-in-mvc/29293681#29293681) to upload the files using ajax — , Aug 01 '16 at 07:44
@StephenMuecke " name of your file input". not possible, there can be x number of files. so first file is `file1`, second is `file2` and so on — user786, Aug 01 '16 at 07:55
@StephenMuecke here my controller calling ajax $.ajax({ type: "POST", url: "/FileOp/FileUpload", contentType: false, processData: false, data: fd, sucess: function (result) { // alert(); }, error: function (xhr, status, p3, p4) { alert(xhr.responseText); } }); — user786, Aug 01 '16 at 07:56
@StephenMuecke for (x = 0; x < files.length; x++) { fd.append("file" + x, files[x]); } — user786, Aug 01 '16 at 07:57
yes if you mean multiple file upload. I also tried HttpFileCollection. But it looks like binding issue, I am just not getting files in action's parameter — user786, Aug 01 '16 at 08:09
`IEnumerable file` will work fine. Edit you question with the actual code you are using (in particular the view) - but its far easier if you just use `var formdata = new FormData($('form').get(0));` — , Aug 01 '16 at 08:11
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/118785/discussion-between-stephen-muecke-and-alex). — , Aug 01 '16 at 09:07

score 1 · Accepted Answer · answered Aug 01 '16 at 09:27

Your add files named file0, file1, file2 etc which will not bind to a parameter named file.

Change the code in the script to

for (x = 0; x < files.length; x++) {
    fd.append("file", files[x]); // modify
}

Alternatively, you could use

fd.append("[" + x + "].file", files[x]);

Asp.net MVC 5 Ajax Multi File Upload may need value provider, suggestions?

1 Answers1