Asp.net Mvc 5 Upload Multiple Diferent Paths

Many times, we need to upload multiple files at a time in an Application, instead of 1 by one, to save the user time, which is required for a particular procedure. There are many ways to upload multiple files in ASP.NET MVC, only in this article, we will use HttpPostedFileBase MVC grade to upload the multiple files, instead of any script similar jQuery or JavaScript. Lets commencement implementing this scenario, footstep by step with the help of a uncomplicated ASP.NET Awarding. Thus, the beginners and students tin can understand hands.

Pace one: Create an MVC Application.

At present, let us kickoff with a step past step approach from the creation of a simple MVC Application in the following:

1. "Offset", followed by "All Programs" and select "Microsoft Visual Studio 2015".
2. Click "File", followed by "New" and click "Project". Select "ASP.Internet Web Application Template", provide the Project a name as yous wish and click OK. After clicking, the following Window will announced:

   

Stride 2: Create Model Class

At present, let us create the model class, named FileModel.cs, by right clicking on Models binder, as shown in the screenshot, given beneath:

Note

Information technology is not mandatory that Model class should be in Model folder. Information technology is just for meliorate readability. You lot can create this class anywhere in the Solution Explorer. This tin be done past creating different binder proper name or without the folder name or in a split grade library.

FileModel.cs class code snippet,

1. using  Arrangement.ComponentModel.DataAnnotations;
2. using  System.Web;
4. namespace  UploadMultipleFilesInMVC.Models
5. {
6. public class  FileModel
7.     {
8.         [Required(ErrorMessage ="Please select file." )]
9.         [Brandish(Name ="Browse File" )]
10. public  HttpPostedFileBase[] files { become ; fix ; }
12.     }
13. }
    

In the preceding code snippet, we are using HttpPostedFileBase, which is the easiest mode to read the uploaded files and laissez passer to the controller.

Footstep iii : Add Controller Course

Now, let us add together ASP.NET MVC controller, as shown in the screenshot, given below:

After clicking Add button, information technology will prove the Window. Specify the Controller proper noun equally Home with suffix Controller.At present, let's change the default lawmaking of Home controller to upload the multiple files. Later modifying the code of Homecontroller class, the lawmaking volition expect like:

HomeController.cs

1. using  System.IO;
2. using  System.Linq;
3. using  System.Web;
4. using  System.Web.Mvc;
6. namespace  UploadMultipleFilesInMVC.Controllers
7. {
8. public class  HomeController : Controller
9.     {
11. public  ActionResult UploadFiles()
12.         {
13. return  View();
14.         }
15.         [HttpPost]
16. public  ActionResult UploadFiles(HttpPostedFileBase[] files)
17.         {
20. if  (ModelState.IsValid)
21.             {
22. foreach  (HttpPostedFileBase file in  files)
23.                 {
25. if  (file != null )
26.                     {
27.                         var InputFileName = Path.GetFileName(file.FileName);
28.                         var ServerSavePath = Path.Combine(Server.MapPath("~/UploadedFiles/" ) + InputFileName);
30.                         file.SaveAs(ServerSavePath);
32.                         ViewBag.UploadStatus = files.Count().ToString() +" files uploaded successfully." ;
33.                     }
34. 
    
35.                 }
36.             }
37. return  View();
38.         }
39.     }
40. }
    

Footstep iv : Creating strongly typed view

Right click on View binder of the created Application and choose add view, select FileModel form along with creating scaffolding template to create the strongly typed view to upload the multiple files as:

Click Add button and it volition create the view named UploadFiles. Now, open up the UploadFiles.cshtml view, change the default code, equally per requirement to upload the multiple files, which is generated by MVC scaffolding template as:

UploadFiles.cshtml

1. @model UploadMultipleFilesInMVC.Models.FileModel
2. @{
3.     ViewBag.Title ="www.compilemode.com" ;
4. }
6. @using  (Html.BeginForm( "UploadFiles" , "Home" , FormMethod.Post, new  { enctype = "multipart/grade-data"  }))
7. {
8.     @Html.AntiForgeryToken()
10.     <divgrade = "course-horizontal" >
11.         <hr />
12.         @Html.ValidationSummary(truthful , "" , new  { @ class  = "text-danger"  })
13.         <divclass = "form-group" >
14.             @Html.LabelFor(model => model.files, htmlAttributes:new  { @ form  = "command-label col-doc-2"  })
15.             <divclass = "col-md-10" >
16.                 @Html.TextBoxFor(model => model.files,"" , new  { @type = "file" , @multiple = "multiple"  })
17.                 @Html.ValidationMessageFor(model => model.files,"" , new  { @ form  = "text-danger"  })
18.             </div>
19.         </div>
20.         <divclass = "form-grouping" >
21.             <divform = "col-md-commencement-ii col-md-10" >
22.                 <input blazon="submit"   value= "Upload" class = "btn btn-primary"  />
23.             </div>
24.         </div>
25.         <divgrade = "form-grouping" >
26.             <divcourse = "col-dr.-offset-2 col-md-10 text-success" >
27.                 @ViewBag.UploadStatus
28.             </div>
29.         </div>
31.         </div>
32. }
33. <script src="~/Scripts/jquery-1.x.2.min.js" ></script>
34. <script src="~/Scripts/jquery.validate.min.js" ></script>
35. <script src="~/Scripts/jquery.validate.unobtrusive.min.js" ></script>
    

Step 5 : Create a binder named UploadedFiles or as you wish to save uploaded files

Correct click on the created ASP.NET MVC Application, Solution Explorer and choose add new item, Add together New Folder. Afterward adding the model, view, controller and UploadedFiles binder, Solution explorer will await like:

At present, nosotros take washed all the coding to upload the files.

Step 6: Run the Application.

Later on running the awarding, click upload button without selecting the file. Information technology volition evidence the following error bulletin, which is prepare in created FileModel class every bit:

Now, browse the file from your machine hard disc location or any other storage device, which is connected to the machine and select 1 by one files by pressing a control cardinal or if you want to select the multiple files, press Ctrl+A keys, every bit shown in the screenshot, given below:

Now, after selecting the multiple files, click upload button and information technology will bear witness the following message later uploading the files equally:

Now, let's ensure our uploaded files are uploaded to the Server binder by browsing the Server folder location, which is used to salvage the uploaded files. Subsequently browsing the Server folder, the uploaded files volition be located as follows:

I hope from all the preceding examples and explanations  we have learned how to upload multiple files in ASP.NET MVC .

Annotation

• HttpPostedFileBase instance name must exist a aforementioned as file uploader control name.
  
• Its important to define enctype = "multipart/course-information" in form action, else the value will be zip in the controller .
  
• Download the Zip file of the sample Awarding for a meliorate agreement.
• Since this is a demo, it might not be using proper standards. Thus, meliorate information technology, depending on your skills.

Summary

I hope uploading multiple files in ASP.NET MVC article is useful for all the readers to upload the multiple files in ASP.NET MVC. If you lot have any suggestions, please contact me.

Read more articles on ASP.Net:

• Uploading Files Using Ajax AsyncFileUploader In ASP.Cyberspace
• Uploading Multiple Files Using ASP.Net iv.five

friedellivine.blogspot.com

Source: https://www.c-sharpcorner.com/article/uploading-multiple-files-in-asp-net-mvc/

Share this post