File Upload in ASP.Net MVC application

Objective:

This article will show how to upload a file from client to server location in ASP.Net MVC application in 5 easy steps.

Step 1:

Create an ASP.Net MVC application.

File->New->Project->web->ASP.Net MVC Application

Step 2:

Creating controller

a. Right click on Controller folder and add a new controller.




FileUpload is name of the controller here. Don't check the checkbox.

Description of HttpPostedFileBase class

For uploading the file in specified path at server HttpPostedFileBase class from System.Web namespace would be used.

HttpPostedFileBase class

1. This contains 4 properties
2. This contains one virtual method.
3. FileName property will be used to fetch the file name of the file.
4. SaveAs method will be used to save the file at server location.
   
   

b. Type the below code in controller. This code will save the file at server. Location of the saved file would be E:\Temp directory.

FileUploadController.cs



Step 3:

Creating view

1. Right click on Edit action and select Add view




 

2. Leave the default setting
   
   
    
3. In Edit.aspx, inside a content place holder, include the following Html tag. This is including control for file to upload.
   
   
   
   If you see the action parameter for form, it is URL for the action which is actually uploading the file at server.
    
4. Entire Edit.aspx will look like

Edit.aspx



Step 4:

Adding link at the main page for file uploading

1. Open site.master in Views->Shared Folder
2. Add below line in menu tag 
   
   
    
3. So the menu element will look like,
   
   

Step 5:

Press F5 to run with debug



Click on File Upload




Conclusion:

This article showed how to upload a file from client to server location in ASP.Net MVC application.