Bootstrap fileinput with C# Controller

Question

I am trying to use the Bootstrap FileInput with a C# Controller. No matter what I do, I can only seem to get the controller to accept 1 file (even when multiple files are selected)

my HTML:

<form enctype="multipart/form-data" method="post">
<label>Upload Photo </label>
<input id="FilesInput" name="FilesInput" type="file" multiple>
</form>

my Javascript:

  $('#FilesInput').fileinput({
    language: 'eN',
    uploadUrl: '/members/UploadSerivcePhoto',
    allowedFileExtensions: ['jpg', 'png', 'gif'],
});

and my MVC C# Controller

        [HttpPost]
    public void UploadSerivcePhoto(IEnumerable<HttpPostedFileBase> FilesInput)
    {
    //  only 1 file ever gets put in FilesInput. 
    }

Could you check in `UploadSerivcePhoto` if `Request.Files` also contains only 1 file? And if it does, use ur browser's network dev tools, or use Fiddler to check what's the request (POST) that is being sent to your controller. — Michael, Sep 25 '15 at 11:46
Wouldn't the FileInput transfer files one by one, effectively calling your controller action several times, once for each file? — Dmytro Shevchenko, Sep 25 '15 at 11:49
Possible duplicated, please check [this answer](http://stackoverflow.com/questions/25772134/asp-net-mvc-upload-multiple-image-files) :) — Triet Doan, Sep 25 '15 at 11:55

score 2 · Answer 1 · answered Apr 02 '16 at 09:50

I think that it has something to do with asynchronous uploads, the plugin seems to have a default options to post files asynchronous in parallel so you will receive a single file per post.

So try to set the uploadAsync property to false.

$('#FilesInput').fileinput({
language: 'eN',
uploadAsync: 'false', 
uploadUrl: '/members/UploadSerivcePhoto',
allowedFileExtensions: ['jpg', 'png', 'gif'],

});

Here is some official documentation for Bootstrap Fileinput. Asynchronous Upload

score 1 · Answer 2 · answered Sep 25 '15 at 11:54

I had the same issue. Check the Request.Files property as @Michael mentioned, it should contain several files. When you check it, you should also filter out the ones with empty name:

List<HttpPostedFileBase> allFiles = Enumerable.Range(0, Request.Files.Count)
    .Select(x => Request.Files[x])
    .Where(x => !string.IsNullOrEmpty(x.FileName))
    .ToList();

Bootstrap fileinput with C# Controller

2 Answers2