Multiple files upload on one page in MVC5

Question

I want to allow my user to upload different documents using different upload button.

My question: Is there any way that I can get the type of document being uploaded?

Consider a scenario: My user may upload their Resume by clicking on resume upload button & user may upload cover letter by clicking on Upload cover letter button.

How would I know whether the uploaded content is resume or cover letter.

All I get in the controller is HttpPostedFileBase[].

[HttpPost]
public ActionResult Create(FormCollection collection, HttpPostedFileBase[] upload)
{
    try
    {
        // TODO: Add insert logic here

        return RedirectToAction("Index");
    }
    catch
    {
        return View();
    }
}

One question I found similar to my question is: Get file names from multiple files uploaded. The approach they are following, is it efficient? I mean I will have 8-10 Upload buttons on my page. Having 8-10 parameters in Post method looks odd.

Create a view model with two properties of type HttpPostedFileBase one for resume one for cover letter or however many you want then post — Ric, Sep 13 '15 at 21:24
You can follow the mentioned approach but if you think 8-10 parameters looks odd just create a wrapper class with 8-10 properties. — Viktor Bahtev, Sep 13 '15 at 21:25

johnnyRose · Accepted Answer · 2015-09-13T21:45:09.500

Basically, you have three options, unless you wanted to create a ViewModel-type class which wraps all your files.

You can use only one file upload button, with multiple="multiple", and accept a HttpPostedFileBase[] in your action (which prevents you from distinguishing the files from one another).
You can use multiple file upload buttons with different names, and accept multiple parameters in your controller (which you said you don't want to do).
You can use multiple file upload buttons, index the names appropriately, and add comments so you know which file is which.

Example:

HTML:

<input type="file" name="files[0]" /> <!-- resume -->
<input type="file" name="files[1]" /> <!-- cover letter -->
<input type="file" name="files[2]" /> <!-- whatever else -->

In your HttpPost:

[HttpPost]
public ActionResult Create(HttpPostedFileBase[] files)
{
    // files[0] == resume
    // files[1] == cover letter
    // files[2] == whatever
}

I don't know why you wouldn't just name the file uploads resume and coverLetter, and then accept those parameters in your post. Personally, I think accepting multiple parameters is the best way to approach this kind of thing - but if you don't want to do that for some reason, this isn't a bad solution either.

Thank you very much JohnnyRose.. files[0], files[1] implementation is working as I expected.. — Gyandeep, Sep 14 '15 at 16:23

score 0 · Answer 2 · answered Sep 13 '15 at 21:25

0

You can know the file type using the property HttpPostedFileBase.ContentType

answered Sep 13 '15 at 21:25

Yazan Ati

62
2

1

This isn't anything to do with the question. – Ric Sep 13 '15 at 21:26

score 0 · Answer 3 · answered Sep 13 '15 at 21:33

You can break up each file upload into a separate form on the screen. Then target separate actions on the controller. Really, with so many uploads, isn't it better just to break them out into separate controllers? You can target many controllers per screen.

Multiple files upload on one page in MVC5

3 Answers3