How to upload files in ASP.NET MVC
In a previous article we already discussed about how to do a file download in ASP.NET MVC. Now lets see how to upload files with MVC.
For this Im using an example of very simple user registration form with a profile picture upload.
First I have added a new controller called “ProfileController” to my project and added a new view model class for registration.
View Model class
Controller
Then added a view for the action. You can just right click on the controller method and click on “Add View”. In here I have selected the Create template and newly created View model as the model class. So Visual Studio will automatically create the view according to the Model class.
If you run the project you can see Firstname, LastName and Age fields are visible in the view. but still the file upload is not visible since we set it to Scaffolding false state.
Now we have to add the file upload controller as below and change the form to support the file uploads. In here I have added “new { enctype = “multipart/form-data” }” because it should be in the form tag to support the file uploads. And added <input type=”file” name=”ProfilePicture” /> to display the upload control.
Here is the view
@model FileUpload.Models.UserDetailsViewModel
@{
ViewBag.Title = "Register";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Register</h2>
@using (Html.BeginForm("Register", "Profile", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>UserDetailsViewModel</h4>
<hr />
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-group">
@Html.LabelFor(model => model.Firstname, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Firstname, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Firstname, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.LastName, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.LastName, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.LastName, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Age, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Age, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Age, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.ProfilePicture, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
<input type="file" name="ProfilePicture" />
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</div>
}
<div>
@Html.ActionLink("Back to List", "Index")
</div>
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}
Now Its done, then we have to modify the controller action to get the uploaded file. Add a new parameter HttpPostedFileBase ProfilePicture (read more about HttpPostedFileBase )
[HttpPost]
public ActionResult Register(UserDetailsViewModel model, HttpPostedFileBase ProfilePicture)
{
return View();
}
Now we can run the project and upload a file for profile picture.
In the debug mode we can see the file is present in the parameter.
