File Upload and Display Uploaded Preview in MVC3 Razor Example Using C#.Net

In this article I will show you how you can upload file in mvc3 using razor view engine and display the uploaded file preview with success message. This article will provide code for uploading file in asp.net mvc and display preview of uploaded file.

In my previous article I have explained you File Upload in MVC3 By Using Razor, Multiple File Upload With Asp.Net MVC C# and HTML5 | How to upload files to ASP.NET MVC application.

Some of my previous MVC articles are as follows: Restrict Number of Characters to be Entered in the TextArea Using jQuery in Asp.Net MVC, Display No of Characters Entered In TextArea Using jQuery, Display Alert Message on Page Load in MVC Application Using Javasscript.

So for this article first we will create a new mvc application and add input button and input file control and image control. After adding the controls you view will look as shown below.

@     ViewBag.Title = "File Upload in MVC3 By Using Razor and Preview Uploaded File"; } @using (Html.BeginForm("Index", "Home", FormMethod.Post, new { enctype = "multipart/form-data" })) {     <div>     <b><u>File Upload in MVC3 By Using Razor</u></b><br />         Select Image         <input type="file" name="file" />&nbsp;&nbsp;&nbsp;         <input type="submit" value="Upload Image" name="Command" /><br />         Preview:<br />         <img src="@ViewBag.ImageURL" width="200px" height="200px" />     </div>     <div>     @ViewBag.Message     </div> }

In above code we have added an attribute in Form tag which is new { enctype = "multipart/form-data" }. This attribute help on finding the uploaded file at controller end when postback will take place.

Now we will check out controller. In our controller we will create a post method by adding the [HttpPost] attribute. Now add the upload code as shown below.

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace ProjectDemo_MVC.Controllers {     public class HomeController : Controller     {         /// <summary>         /// File Upload in MVC3 By Using Razor         /// </summary>         /// <returns></returns>         public ActionResult Index()         {             return View();         }         /// <summary>         /// Post method for uploading files         /// </summary>         /// <param name="files"></param>         /// <returns></returns>         [HttpPost]         public ActionResult Index(HttpPostedFileBase file)         {             try             {                 /*Geting the file name*/                 string filename = System.IO.Path.GetFileName(file.FileName);                 /*Saving the file in server folder*/                 file.SaveAs(Server.MapPath("~/Images/" + filename));                 string filepathtosave = "Images/" + filename;                 /*Storing image path to show preview*/                 ViewBag.ImageURL = filepathtosave;                 /*                  * HERE WILL BE YOUR CODE TO SAVE THE FILE DETAIL IN DATA BASE                  *                  */                 ViewBag.Message = "File Uploaded successfully.";             }             catch             {                 ViewBag.Message = "Error while uploading the files.";             }             return View();         }     } }

In above code we are uploading selected file in an Images name folder. For preview of image we have stored uploaded image path in viewbag. So we will create a new folder with name of “Images”. Now we have done. Run the application for uploading the file. Check the below output for preview of the output.

 DOWNLOAD