How to upload multiple files with jQuery.filer plugin in ASP.NET MVC 5 using View Models

Question

I am using jQuery.filer on a FileUpload control in an MVC5 project and I want to post multiple files from View to Controller using ViewModel. Normally I have used some approach as AJAX and Request.Files[n] but I want to use ViewModel as I already pass it to the Controller. I followed a good example File Uploads in ASP.NET MVC with View Models by @ChrisPratt, but he does not talk about multiple uploads and there are some problems related to file upload control in MVC5. So, could you please inform me what changes should be made in order to pass multiple file upload from View to Controller and get these multiple files in a foreach loop.

View:

@model ExperimentViewModel
<input type="file" name="FileUpload" id="filer_input" multiple="multiple" >

<!-- or -->
@Html.TextBoxFor(m => m.FileUpload, new { type = "file" , id="filer_input"})

<script>
    $('#filer_input').filer({
        limit: null,
        maxSize: null,
        extensions: null,
        uploadFile: {
            url: //URL to which the request is sent {String}
            data: //Data to be sent to the server {Object}
            type: 'POST', //The type of request {String}
            enctype: 'multipart/form-data', //Request enctype {String}
        }
    )};

    function create(event) {
        event.preventDefault();
        var formdata = new FormData($('#frmCreate').get(0)); 

        $.ajax({
            type: "POST",
            url: '@Url.Action("Create", "Experiment")',
            cache: false,
            dataType: "json",
            data: formdata,         
            processData: false, 
            contentType: false
        });
    };
<script>

ViewModel:

public class ExperimentViewModel
{
    //code omitted for brevity

    [DataType(DataType.Upload)]
    public HttpPostedFileBase FileUpload { get; set; }
}

Controller:

public JsonResult Insert([Bind(Exclude = null)] ExperimentViewModel model)
{
    if (ModelState.IsValid)
    {
        //I have no idea how to retrieve the files.Count(), files in an IEnumerable<HttpPostedFileBase>
        var files = model.FileUpload;
        if(files != null && files.Count() > 0)
        {
            //???
        }           
    }
}

Any help would be appreciated.

The property needs to be IEnumerable<HttpPostedFileBase> FileUpload to accept multiple files (and note it would need to be @Html.TextBoxFor(m => m.FileUpload, new { type = "file", multiple = "multiple" }) to add the multiple attribute) — user3559349
– user3559349, Commented Oct 8, 2016 at 8:01
It can passed to the Controller. On the other hand, I use jQuery.filer and I have to give an id to the FileUploader as filer_input in order to use jQuery.filer. However, when using the id as "filer_input" or changing "FileUpload" property name to "filer_input" the model data pass as null to the Controller (model.FileUpload or model.filer_input). When looking at the Network panel of Firebug, I see that the model data pass as Content-Disposition: form-data; name="FileUpload[]"; filename="test.xlsx" (added "[]") >>> — Jack
– Jack, Commented Oct 8, 2016 at 8:30
>>> Do you have any idea why the data cannot be passed to the Controller when using I use jQuery.filer? Do I have to add the data to AJAX post? — Jack
– Jack, Commented Oct 8, 2016 at 8:31
Never seen that plugin before. Will have a look a bit later. — user3559349
– user3559349, Commented Oct 8, 2016 at 8:36
Thanks, you might have a look at the parameter explanations on github.com/avral/jquery.filer — Jack
– Jack, Commented Oct 8, 2016 at 8:37

Jack · Accepted Answer · 2016-10-08 11:25:10Z

=============================== S O L V E D ================================

Here is the solution by @StephenMuecke. Many thanks for his huge help...

View:

@model ExperimentViewModel

//Change 1
@Html.TextBoxFor(m => m.FileUpload, new { type = "file", multiple = "multiple" })

<script>        
    function create(event) {
        event.preventDefault();

        //Change 2 : Because jquery.filer adds "[]" to the Name parameter!!!
        $('#FileUpload').attr('name', 'FileUpload');

        var formdata = new FormData($('#frmCreate').get(0)); 

        $.ajax({
            type: "POST",
            url: '@Url.Action("Create", "Experiment")',
            cache: false,
            dataType: "json",
            data: formdata,         
            processData: false, 
            contentType: false
        });
    };

    $('#FileUpload').filer({

    //code omitted for brevity

    //Change 3: Comment out uploadFile section
    //uploadFile: { ... }

    });
<script>

ViewModel:

public class ExperimentViewModel
{
    //code omitted for brevity

    //Change 4
    [DataType(DataType.Upload)]
    public IEnumerable<HttpPostedFileBase> FileUpload { get; set; }
}

Controller:

public JsonResult Insert(ExperimentViewModel model) //Change 5
{
    if (ModelState.IsValid)
    {
        //...   
    }
}

Collectives™ on Stack Overflow

How to upload multiple files with jQuery.filer plugin in ASP.NET MVC 5 using View Models

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related