forum

Home / DeveloperSection / Forums / How can use File Upload control in MVC.

Ask Question
Anonymous User

Anonymous User

Follow
I am a content writter !

Can you answer this question?

Answer

2 Answers

Aryan Kumar

Aryan Kumar

18-Jun-2023

Sure, here are the steps on how to use file upload control in MVC:

  1. Create a model class that represents the file upload.
  2. Create a view that renders the file upload control.
  3. Implement the file upload logic in the controller.
  4. Configure the MVC routing to map the file upload request to the controller action.

Here is an example of how to use file upload control in MVC:

C#

public class FileModel
{
  public IFormFile FileUpload { get; set; }
}

public class FileUploadController : Controller
{
  public ActionResult Upload()
  {
    // Get the file from the file upload control.
    var file = Request.Files["FileUpload"];

    // Save the file to the file system.
    var fileName = Path.GetFileName(file.FileName);
    var filePath = Path.Combine(Server.MapPath("~/Uploads"), fileName);
    file.SaveAs(filePath);

    // Return the success message.
    return Content("File uploaded successfully.");
  }
}

This code will create a model class that represents the file upload. The model class has a property named FileUpload that is of type IFormFile. The IFormFile class represents a file that is uploaded from the client.

The view that renders the file upload control should have a file upload control. The file upload control should have a name attribute that is the same as the name of the property in the model class. For example, the following code shows how to render a file upload control in a view:

HTML

<input type="file" name="FileUpload" />

This code will render a file upload control that has a name attribute of FileUpload.

The controller action that handles the file upload request should get the file from the file upload control and save it to the file system. The controller action should also return a success message if the file upload was successful.

The MVC routing needs to be configured to map the file upload request to the controller action. The following code shows how to configure the MVC routing:

Code snippet

routes.MapRoute(
    name: "UploadFile",
    url: "/Upload",
    defaults: new { controller = "FileUploadController", action = "Upload" });

This code will map the /Upload URL to the Upload action in the FileUploadController controller.

Anonymous User

Anonymous User

03-Aug-2018

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>



MindStick Training

Liked By