Upload A File in ASP.NET MVC

Upload A File in ASP.NET MVC

 

Introduction

Uploading documents (like upload PDF and upload JPG) is a common and daily task in our life, It’s widely used in social nets, forums, online auctions, etc. This blog, Upload a File in MVC provides codes that can be used to create an online form with file upload, post document online etc. in MVC.

Getting Started

Here we will see how to upload files in ASP.NET MVC, a file upload to the website from client machine is very easy in ASP.NET MVC. There are a variety of upload components in ASP.NET MVC that serve to resolve one or another upload tasks, here the below code example use only MVC View and MVC controller to post document online. you can use the code to build a document upload form.

For uploading a file on the server, you required to have a file input control within html form having encoding type set to multipart/form-data and an action method in controller having with HttpPostedFileBase as a parameter because the posted file is automatically available as a HttpPostedFileBase parameters in the action of the controller.

The following are the codes written inside the MVC view to expose a online form with file upload. You can copy the code and past it in your view to demonstrate. It uses file type control, the multipart/form-data encoding type, a button and MVC view bag to display file upload success or fail message. In the below of this blog about detail the encoding type is given.

 @{  
   ViewBag.Title = "File Manager";  
 }  
 <h2>File Manager</h2>  
 @using (Html.BeginForm("Upload", "FileManager", FormMethod.Post, new { enctype = "multipart/form-data" }))  
 {  
   @Html.AntiForgeryToken();  
   @Html.ValidationSummary();  
     <div>  
       @Html.TextBox("file", "", new { type = "file" }) <br />  
       <input type="submit" value="Upload" /><br/>  
       @ViewBag.Message  
     </div>  
 }  

online form with file upload

Following are the codes written inside the controller. The controller contains two methods having name Upload. The first upload method having with get attribute is used to present on the browser and the second upload method having with post attribute is used to receive the posted file. The second upload method has parameter HttpPostedFileBase which will contain the posted file, about he HttpPostedFileBase is given below in this blog.

 using System;  
 using System.Collections.Generic;  
 using System.Linq;  
 using System.Web;  
 using System.Web.Mvc;  
 using System.IO;  
 namespace Upload_File.Controllers  
 {  
   public class FileManagerController : Controller  
   {  
     // GET: FileManager  
     [HttpGet]  
     public ActionResult Upload()  
     {  
       ViewBag.Message = "Click on the 'Choose File' button to select a file then click on 'Upload' button";  
       return View();  
     }  
     [HttpPost]  
     public ActionResult Upload(HttpPostedFileBase file)  
     {  
       try  
       {  
         if (file.ContentLength > 0)  
         {  
           string _FileName = Path.GetFileName(file.FileName);  
           string _path = Path.Combine(Server.MapPath("~/App_Data/UploadedFiles"), _FileName);  
           file.SaveAs(_path);  
         }  
         ViewBag.Message = "File Uploaded Successfully!!";  
         return View();  
       }  
       catch  
       {  
         ViewBag.Message = "File upload failed!!";  
         return View();  
       }  
     }  
   }  
 }  

Encoding

The process of conversion of data from one form to another form is known as Encoding. It is used to transform the data so that data can be supported and used by different systems.

HttpPostedFileBase

Serves as the base class for classes that provide access to individual files that have been uploaded by a client.

Thanks