---

Search posts under ASP.NET MVC:

---

File upload in ASP.NET MVC

How to upload a file on the server in ASP.NET MVC?

To upload multiple files at a time, read this post.

To upload an image on the server, we need to tweak the Forms element enctype in the Html.BeginForm helper method.

First let’s create a model that will hold the information about the file uploaded.

    public class Files
    {
        [Key]
 
[DatabaseGenerated(System.ComponentModel.DataAnnotations.Schema.DatabaseGeneratedOpt
ion.Identity)]
        public int AutoId { get; set; }

        [StringLength(50, MinimumLength = 4, ErrorMessage = "Must be at least 4
characters long.")]
        [Required]
        
        public string FileName { get; set; }
        
        public byte[] FileContent { get; set; }
        
        public bool Active { get; set; }
        
        public int PersonalDetailsId {get;set;}
    }

In the above model, we are not going to use FileContent property for now however we have all above corresponding fields into our database table.

The view code looks like below

CREATE VIEW CODE

@model MVCTraining5.Models.Files

@{
    ViewBag.Title = "Create";
}

<h2>Create</h2>

@using (Html.BeginForm("Create", "Files", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
       @Html.AntiForgeryToken()
       
       <div class="form-horizontal">
        <h4>Files</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.FileName, htmlAttributes: new { @class =
"control-label col-md-2" })
            <div class="col-md-10">
                <input type="file" name="FileName" id="FileName" class="formcontrol" />
                @Html.ValidationMessageFor(model => model.FileName, "", new { @class
= "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.Active, htmlAttributes: new { @class =
"control-label col-md-2" })
            <div class="col-md-10">
                <div class="checkbox">
                    @Html.EditorFor(model => model.Active)
@Html.ValidationMessageFor(model => model.Active, "", new {
@class = "text-danger" })
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Upload" class="btn btn-default" />
            </div>
        </div>
    </div>
    }

Notice the selected code in between @Html.BeginForm, we have passed custom action method and controller name to submit this form. Apart from this we have also enctype (encryption type) set as an attribute to the form (to multipart/form-data).

After that remaining codes are normal html form elements and normal asp.net MVC html helper methods. One small difference is we are using HTML input type=file to provide file upload ability to the user. The name of this element is same as the name in the model property (FileName).

CONTROLLER ACTION METHOD

        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Create([Bind(Include =
"AutoId,FileName,Active,PersonalDetailsId")] Files files, HttpPostedFileBase FileName)
        {
            if (ModelState.IsValid)
            {

                // upload the file now
                string path = Server.MapPath("~/UserData/");

                // get extension name of the selcted file
                string extensionName =
System.IO.Path.GetExtension(FileName.FileName);
                // generate a random file name and appende extension name
                string finalFileName = DateTime.Now.Ticks.ToString() +
extensionName;
                // now save the selected file with new name
                FileName.SaveAs(path + finalFileName);

                // set the final file name to the files object so the name would get
saved into the database
                files.FileName = finalFileName;
                db.Files.Add(files);
                db.SaveChanges();

                return RedirectToAction("Index");
            }

            return View(files);
        }

The controller action method has one extra parameter apart from the Model name and that is HttpPostedFileBase whose name MUST be the name of the input type=file element. This will ensure that the form File element is accessible through this name.

After validating the ModelState, we are getting the path to save, getting the extension name of the user selected file (notice that we have generated a random string as file name and suffixed the extension name to ensure that each uploaded file name is unique on the server) and finally calling the SaveAs method of the HttpPostedFileBase object by passing the path and file name.

Next, we are setting the property of the Files object to the name of the file and calling the SaveChanges() method.