MVC Upload files from different file inputs

Question

I have 2 different file inputs on the same view. I want to pass multiple files from file input A, and one from file input B. As of now, my code will allow me to pass the contents of A or B, but not both, to my controller. Thoughts on how to make this work? Please note that I am using MVC, and there are other inputs on the page, not just the file inputs.

There is some javascript that's not included that changes the text for the first input either to the name of the single file uploaded or it'll say '3 files selected'. Nothing special going on in javascript.

EDIT: Here is exactly what I want to do that I cannot do right now. I have 2 different file inputs that the user can upload to. I need both file inputs to pass back to the controller. Not just one file input. File input A has the multiple attribute. It can and does pass back multiple files. But that's not the issue is that only A or B will pass back the files that the user uploaded.

public class ViewDesigner 
{
    public string FirstName { get; set; }
    public string MiddleName { get; set; }
    public string LastName { get; set; }
    public DateTime DateOfBirth { get; set; }      
    public List<File> Files { get; set; }
}

    [HttpPost]
    public ActionResult SignUp(ViewDesigner viewDesigner)
    {

        List<File> Files = new List<File>();
        if (ModelState.IsValid)
        {
            for (int i = 0; i < Request.Files.Count; i++)
            {
                var requestedFile = Request.Files[i];
                File file = new File()
                {
                    FileName = requestedFile.FileName
                };
                Files.Add(file);

            };

            viewDesigner.Files = Files;
        }

        return View();

    }

@using (Html.BeginForm("SignUp", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    <b class="col-12">
        Upload up to 5 documents 
    </b>
    <small class="col-12">All files must be uploaded simultaneously.</small>
    <div class="form-group col-lg-12 my-3">
        <input type="file" id="file" name="file" accept="image/*, .gif, .xls, .doc, .docx, .pdf, .ppt" data-multiple-caption="{count} files selected" multiple="multiple" />
        <label for="file"><i class="fad fa-upload"></i> <span>Choose a file&hellip;</span></label>
    </div>


    <b class="col-12">
        Upload one document
    </b>
    <div class="form-group col-lg-12 my-3">
        <input type="file" id="file2" name="file2" accept="image/*, .gif, .xls, .doc, .docx, .pdf, .ppt" />
        <label for="file"><i class="fad fa-upload"></i> <span>Choose a file&hellip;</span></label>
    </div>
}

So you need to upload multiple file with multiple file control? — jishan siddique
– jishan siddique, Commented Nov 15, 2019 at 13:25
@HardikMasalawala I don't understand the question fully. I will be putting the file information into a database. — HumanHickory
– HumanHickory, Commented Nov 15, 2019 at 13:25
@jishansiddique I'm not sure. What is 'multiple file control'? I will update the question to try to be more clear — HumanHickory
– HumanHickory, Commented Nov 15, 2019 at 13:25

Hardik Masalawala · Accepted Answer · 2019-11-15 13:25:03Z

3

Main change

public ActionResult SignUp(IEnumerable<HttpPostedFileBase> file, IEnumerable<HttpPostedFileBase> file2, ViewDesigner viewDesigner)

Explanation

Add in your cshtml button for submit form

@using (Html.BeginForm("SignUp", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    <b class="col-12">
        Upload up to 5 documents
    </b>
    <small class="col-12">All files must be uploaded simultaneously.</small>
    <div class="form-group col-lg-12 my-3">
        <input type="file" id="file" name="file" accept="image/*, .gif, .xls, .doc, .docx, .pdf, .ppt" data-multiple-caption="{count} files selected" multiple="multiple" />
        <label for="file"><i class="fad fa-upload"></i> <span>Choose a file&hellip;</span></label>
    </div>


    <b class="col-12">
        Upload one document
    </b>
    <div class="form-group col-lg-12 my-3">
        <input type="file" id="file2" name="file2" accept="image/*, .gif, .xls, .doc, .docx, .pdf, .ppt" />
        <label for="file"><i class="fad fa-upload"></i> <span>Choose a file&hellip;</span></label>
    </div>
    <button type="submit"> submitt</button>
}

Change your method code as follow

[HttpPost]
public ActionResult SignUp(IEnumerable<HttpPostedFileBase> file, IEnumerable<HttpPostedFileBase> file2, ViewDesigner viewDesigner)
{
    return View();
}

I have select file as following image

getting the files in controller individually as following image

answered Nov 15, 2019 at 13:25

Hardik Masalawala

1,0769 silver badges23 bronze badges

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

1 Comment

HumanHickory Over a year ago

Perfect this worked flawlessly. I didn't realize I could pass back two IEnumerable<...>s back. Thank you!

Collectives™ on Stack Overflow

MVC Upload files from different file inputs

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related