How can use File Upload control in MVC.

Total Post:24

Points:170
 224  View(s)
Ratings:
Rate this:

Use FileUpload control in MVC without used ajax.

Use only simple c# codes.

  1. Post:280

    Points:1994
    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.

    ActionMethod

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

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

            [HttpPost]
            public ActionResult SaveFile(Customer model, HttpPostedFileBase file)
            {
                if (file != null && file.ContentLength > 0)
                    try
                    {
                        string path = Path.Combine(Server.MapPath("~/SavedFiles"), Path.GetFileName(file.FileName));
                        file.SaveAs(path);
                        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;
                            AP.SaveChanges();
                        }
                        ViewBag.Message = "File uploaded successfully";
                    }
                    catch (Exception ex)
                    {
                        ViewBag.Message = "ERROR:" + ex.Message.ToString();
                    }
                else
                {
                    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";
    }

    <h2>_UploadedFiles</h2>
    <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>

    <style>
        .bg {
            background-color: darkgray;
        }

        .BG {
            background-color: Gainsboro;
        }

        #loadingImg {
            display: none;
        }
    </style>


    <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>
                </button>
            </div>
            <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>

                        </div>
                    </div>

                </div>

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



Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!