Dynamically Creating Multiple File Uploads In MVC And Validating It

In this article, we are going to learn how to create dynamic file upload and validate all files in MVC. If you Google for file upload examples in MVC, you will find many examples but all are for single file uploads. Here, we don’t want that. We want to generate dynamic file upload on the basis of condition.

You can think of it as tailored file uploads

E.g. if a user is filling out a form for a new driving license, he is required to upload documents, like address proof [Passport] and personal identity etc. But meanwhile, if you are applying for a passport, then you may need a driving license and personal identity. For developing this, we are not going to create 2 different pages but we are going to create it dynamically, on a single page.


Fig 1 Multiple file uploads.

Tools Required

• SQL Server
• Visual Studio 2010 and above with MVC installed.

Creating Multiple Uploads

Let's start with creating a basic MVC application

From Visual Studio IDE, select File Menu right at the top. Inside that, select New --> Project and click on Project.
After selecting Project sub menu, a new dialog will pop up with the name “New Project”. In this dialog, first we select template from the left panel. First select "web" in the left panel, then choose “ASP.NET MVC 4 Web Application”. Now, name your project as “MultipleUploads”.


Fig 2. Selecting Template

Finally, click on OK button to create the project.

Selecting Templates

After you create a project, a new window will pop up with the name “New ASP.NET MVC 4 Project”. In this project template, just select Empty Template and in the View Engine, select Razor. Click on OK button.


Fig 3. Selecting MVC 4 Project

After a few seconds, you project is ready to go. It contains a whole lot of MVC folder structures and other scripts and .CSS styles.

Project Structure after creation


Fig 4. Project structure

Now, let’s start with adding Controller.

Adding Controller

After creating project, we are going to add Controller with the name DocumentsController which is going to handle http get [HttpGet] and post [HttpPost] requests.


Fig 5. Adding Documents Controller

After adding Controller, next we are going to add Model.

Adding Model

In this step, we are going to add Model with the name “DocumentModel”. This model will have properties, such as DocumentID, DocumentName, and Mandatory.

For adding Model, just right click on Models folder and select Add >> Class.


Fig 6. Adding DocumentModel

After selecting Class, a new dialog will pop up with the name “Add New Item”. Here, the class will be selected by default. All we need to do is give name to the class. We are going to name it as “DocumentModel”.


Fig 7. Adding DocumentModel

Code snippet of DocumentModel

Properties

• DocumentID is unique ID.
• DocumentName is the name of document which we are going to show to users to provide input.
• Mandatory is property which tells this file is Mandatory to upload or not.
• DocumentList contains the list of documents which we are going to send to View to generate controls.

After adding Model, next we are going to change the Action Method name inside Document Controller to “Upload” from Index; and create another action method which is going to handle http post [HttpPost] request, and will take DocumentModel as input parameter.

Code snippet of Document Controller

After creating action method for handling both get and post methods, now we are going to fill collection of documents in http get request.

Populating Document Collection

In this step, we are going to fill collection which we are going to send to the View. Using this collection, we are going to create file upload controls on View.

Note: for displaying demo, I am going to fill collection in controller. If you want to populate this data from database, you can do it.

Code snippet of Document Controller
After completing with filling collection, now let’s View.

Adding View

For adding View, just right click inside upload Action Method and then select Add View from List.


Fig 8. Adding upload View

After selecting, a new dialog will pop up with the name “Add View”. This View will have same name as Action Method name, as shown in the below snapshot. After that, we are going to choose View engine as Razor (CSHTML), then we have a checkbox to choose which is used for creating strongly typed View. Here, it asks for choosing model class. We are going to choose DocumentModel which is a Model that we have created. We have scaffolding template option to choose. Here, we are just going to keep it empty and then finally, we have to click on Add button to create View.


Fig 9. Creating upload View

Project Structure after adding View


Fig 10. Project structure after adding upload View

After adding View, now we write the code on View to create multiple file upload controls.

Adding multiple file upload controls on View

In this step, we are going to generate multiple file upload control. For doing that, we use DocumentList model property which we are sending from Controller.

Code snippet

Html.BeginForm helper generates form tag and we have specified action name and controller name. Along with that, we are going to post this data. For that, we have used [ FormMethod.Post] method and at last enctype attribute to encoded data.

Note: The enctype attribute specifies how the form-data should be encoded when submitting it to the server.

Code snippet of upload View

In this part, we are going to check if the Model which we are going to send is Null or not. After that, we use for loop to iterate and generate file upload control for list of documents sent from upload Action method [httpGet].
Then, we are generating unique id for assigning to controls because we should have unique id generated for each control to recognize it.