Advertise with us

How can use File Upload control in MVC.

Posted by  Sanat Shukla
 735  View(s)
Rate this:

Use FileUpload control in MVC without used ajax.

Use only simple c# codes.

  1. Re: How can use File Upload control in MVC.

    1). Add a Button on IndexPage for open a modal popup for FileUploadControl like given this image.

    2). And add a partial view for define modal popup’s design here, using bootstrap for it.


        //----------For Image/File Upload------//

            public ActionResult SaveFile(int customerID)
                TempData["ID"] = customerID;
                return PartialView("_UploadedFiles");

            public ActionResult SaveFile(Customer model, HttpPostedFileBase file)
                if (file != null && file.ContentLength > 0)
                        string path = Path.Combine(Server.MapPath("~/SavedFiles"), Path.GetFileName(file.FileName));
                        bool success = false;
                        var Customer = AP.Customers.Where(x => x.CustomerID == model.CustomerID).FirstOrDefault();
                        if (Customer != null)
                            success = AP.INSERTorUPDATE_CUSTOMER(Customer.CustomerID, Customer.Name, Customer.Mobileno, Customer.Address, Customer.Birthdate, DateTime.Now, Customer.EmailID, path) == 1 ? true : false;
                        ViewBag.Message = "File uploaded successfully";
                    catch (Exception ex)
                        ViewBag.Message = "ERROR:" + ex.Message.ToString();
                    ViewBag.Message = "You have not specified a file.";
                return RedirectToAction("Index");

    Partial View(_UploadFiles.cshtml)

    //-------------view for modal popup-------------//
    @model  MvcAppFirst.Customer

        ViewBag.Title = "_UploadedFiles";
        Layout = "~/Views/Shared/_Layout.cshtml";

    <script src="~/Scripts/jquery.validate.min.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
    <link href="~/Content/jQuery.FileUpload/css/jquery.fileupload.css" rel="stylesheet" />
    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>

        .bg {
            background-color: darkgray;

        .BG {
            background-color: Gainsboro;

        #loadingImg {
            display: none;

    <div class="modal-content" style="width: 800px !important;">
        @using (Html.BeginForm("SaveFile", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
            @Html.HiddenFor(m => m.CustomerID, new { @Value = TempData["ID"] })
            <div class="modal-header">

                <h5 class="modal-title" id="exampleModalLabel" align="center">Choose Your File</h5>

                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
            <div class="modal-body">
                <div class="container">
                    <div class="col-md-12">
                        <div class="form-area">
                            <div class="container" align="center">
                                <input type="file" multiple="multiple" name="file" class="BG" />
                                <button type="submit" value="Upload Files" class="btn btn-info">Upload File</button>
                                <br />



        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>