connectseekers.com

Monday, 16 June 2014

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

6/16/2014 - By Pranav Singh 2

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.



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 

About the Author

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Get Updates

Subscribe to our e-mail newsletter to receive updates.

Share This Post

2 comments:

  1. Could you please provide me code for uploading files(with any extension like pdf,doc,jpeg etc) and displaying them as thumbnails in a div using mvc?? please help

    ReplyDelete
    Replies
    1. Hi Ayesha please check the link for requested article by you.

      http://www.aspdotnet-pools.com/2014/08/file-upload-and-displaying-them-as_8.html

      enjoy the article. :) KEEP VISITING ASPDOTNET-POOLS.COM

      Delete

Please let me know your view

Free Ebooks


About Us

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Contact Us

For writing article in this website please send request by your

GMAIL ID: dotnetpools@gmail.com
Email Id : contact@aspdotnet-pools.com

Bugs and Suggestions

As we all know that this website is for sharing knowledge and providing proper solution. So while reading the article is you find any bug or if you have any suggestion please mail us at contact@aspdotnet-pools.com.

Partners


Top jQuery Plugins

Global Classified : Connectseekers.com
© 2014
back to top