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
– Michael, Commented Sep 25, 2015 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
– Dmytro Shevchenko, Commented Sep 25, 2015 at 11:49

user3446300 · Accepted Answer · 2016-04-02 09:50:43Z

2

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

answered Apr 2, 2016 at 9:50

user3446300

212 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dmitri Trofimov · Accepted Answer · 2015-09-25 11:54:17Z

1

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();

answered Sep 25, 2015 at 11:54

Dmitri Trofimov

5742 silver badges18 bronze badges

Collectives™ on Stack Overflow

Bootstrap fileinput with C# Controller

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related