Data Haunting

Easy Solutions Destination


File Uploading in MVC

In this article we will see that how to upload a file in MVC as well we go through different different criteria like single file upload, multiple files upload and strongly type viewmodel file upload in MVC.

Single File Upload in MVC

Let’s go first with how to upload a single file in MVC as shown in below Image.

Single File Upload

For that we first created View in our MVC application as shown in below code.

If you go through above code than you will find accept=”image/*” attribute of input type’s file. It means that restrict file selection to only Image type. If this is not necessary in your requirements than you can remove it or can also specify other accept type.

Note- enctype must be set as “multipart/form-data” in form post to send actual file along with file name otherwise you will receive only file name and not the actual file at server side.

Below I have provided Jquery or Javascript scripts for validating file upload at client side. If you go through below script than you will find that we have provided criteria like File extension must be “jpg,png,gif” and maximum file size is 4 MB and you must have to select file etc.

Now as we specified in our view, we will call “SingleFileUpload” ActionName which have a HttpPostedFileBase as a arguments. Let’s examine the below code for file upload at server side in MVC.

In server side code first we have checked that ModelState is valid or not? than we check that if file is null than error message of regarding file selection. After that we check maximum file size must not be more than 4 MB and file extension of uploaded file must be “gif,png and jpg”. If all things goes right than we will save the file at specified path.

Multiple file upload in MVC

Major changes in multiple file upload in MVC compare to single file upload would be at server side in calling Action. So first we will go through code in our Action which is shown as below.

First thing we have noticed in multiple file uploading that in arguments we have passed IEnumerable instead of HttpPostedFileBase as it sends collection of file. Second one we used foreach for uploading each and every file one by one. Third one for checking upload at least one file in logic. other than this almost other criteria are same.

Select Multiple file in a single click

For uploading multiple file in a single click you just need to specify attribute Multiple in input type’s file.

Note – use control(Ctrl) key while selecting multiple file

Upon selection of multiple file you will have below type of message like “2 files”, “3 files” and so on as shown given image.

multiple file upload in a single click

View for selecting multiple file in a single click in MVC, you can visit below code.

Select Multiple file with different different file upload options

multiple file upload

View for selecting multiple file with different different file upload options in mvc for above image is as below.

Note – Server side coding for multiple file uploading in a single click or with different different file upload options are same in MVC. So in multiple file uploading in mvc first we have provided server side coding using ActionName.

Note – For client side validation in multiple file uploading in MVC would be most probably same as a single file upload in MVC. This small changes you can make at your self.

What is your opinion ?

Here we have seen how to upload a single or multiple file upload in MVC? as well using strongly type viewmodel how to upload file in MVC? If you have any query and question, you can comment or you can mail me.

Leave a Reply