Asp.net MVC File Upload Example
In web application development we often get requirement like uploading file on server from web form, there can be different type of files, here we learn how to upload file on web server in Asp.net MVC application.
Here you learn how to upload file in Asp.net MVC web application, I will explain following points with working code.
- How to upload images / files on asp.net web server
- How to check file type before uploading
- Upload other fields in form like name, mobile etc with Image
- Writing code in MVC Razor and in ActionResult controller
- Checking if file exists
- Increase the max upload file size
Asp.net file upload Razor From
Let's design a form in asp.net mvc razor code, place one input control with type="file" and a submit Button in your form. Note: you must specify enctype = "multipart/form-data" in form option
<h3>@ViewBag.ActionMessage</h3>
@using (Html.BeginForm("fileupload","home",
FormMethod.Post,
new { enctype = "multipart/form-data" }))
{
<input type="file" name="file" id="file" />
<input type="submit" value="Upload Image" />
}
now open your controller class and write following two ActionResult, one for Get one with HttpPost
public ActionResult fileupload()
{
return View();
}
[HttpPost]
public ActionResult fileupload(HttpPostedFileBase file)
{
if (file != null && file.ContentLength > 0)
{
var fileName = Path.GetFileName(file.FileName);
var userfolderpath = Path.Combine(Server.MapPath("~/userimages/"), fileName);
file.SaveAs(userfolderpath);
ViewBag.ActionMessage = "File has been uploaded successfully";
}
return View();
}
In this step you can also create directory if not exists, like in above code we are uploading image files to a folder called “userimages”, assuming folder is there on server.
But good practice would be to put a check, just in case there is no folder with that name then create it
string folderPath = Server.MapPath("~/userimages/");
if (!Directory.Exists(folderPath))
{
Directory.CreateDirectory(folderPath);
}
Sometimes you may want to check if the same file is already exists on server, then instead of uploading again you would display a message on user that "Same file already Exists".
[HttpPost]
public ActionResult fileupload(HttpPostedFileBase file)
{
var fullPath = Server.MapPath("~/userimages/") + file.FileName;
if (System.IO.File.Exists(fullPath))
{
ViewBag.ActionMessage = "Same File already Exists";
}
else
{
file.SaveAs(userfolderpath);
ViewBag.ActionMessage = "File has been uploaded successfully";
}
return View();
}
The above code will allow user to upload all type of files. In earlier example we implemented a regular expression control to restrict other file type. But here we check the file type in server side code to make sure only images are allowed, asp.net mvc file upload check file type
public ActionResult fileupload(HttpPostedFileBase file)
{
if (file.ContentType == "image/jpeg" ||
file.ContentType == "image/jpg" ||
file.ContentType == "image/gif" ||
file.ContentType == "image/png")
{
var fileName = Path.GetFileName(file.FileName);
var userfolderpath = Path.Combine(Server.MapPath("~/userimages/"), fileName);
var fullPath = Server.MapPath("~/userimages/") + "/" + file.FileName;
file.SaveAs(userfolderpath);
ViewBag.ActionMessage = "File has been uploaded successfully";
}
else
{
ViewBag.ActionMessage = "Please upload only imag (jpg,gif,png)";
}
return View();
}
You can allow file type as per your business requirement
Asp.net MVC file upload complete code C#
Here is the complete server side code for uploading file in Asp.net C# web application
[HttpPost]
public ActionResult fileupload(HttpPostedFileBase file)
{
string folderPath = Server.MapPath("~/userimages/");
if (!Directory.Exists(folderPath))
{
Directory.CreateDirectory(folderPath);
}
if (file != null && file.ContentLength > 0)
{
if (file.ContentType == "image/jpeg" ||
file.ContentType == "image/jpg" ||
file.ContentType == "image/gif" ||
file.ContentType == "image/png")
{
var fileName = Path.GetFileName(file.FileName);
var userfolderpath = Path.Combine(Server.MapPath("~/userimages/"), fileName);
var fullPath = Server.MapPath("~/userimages/") + file.FileName;
if (System.IO.File.Exists(fullPath))
{
ViewBag.ActionMessage = "Same File already Exists";
}
else
{
file.SaveAs(userfolderpath);
ViewBag.ActionMessage = "File has been uploaded successfully";
}
}
else
{
ViewBag.ActionMessage = "Please upload only imag (jpg,gif,png)";
}
}
return View();
}
Sometimes you may have requirement like uploading other fields with image upload, think of situation like student form submission, where student need to provide their name while uploading the picture.
This is how you can design the form.
@using (Html.BeginForm("fileupload",
"home",
FormMethod.Post,
new { enctype = "multipart/form-data" }))
{
<div>Student Name</div>
<input type="text" name="txtPerson" /><br />
<input type="file" name="file" id="file" />
<div style="padding-left:100px;;">
<input type="submit" value="Upload Image" />
</div>
}
Now let's look at the controller how to capture all fields' values with the posted file.
[HttpPost]
public ActionResult fileupload(FormCollection form, HttpPostedFileBase file)
{
string _personName = form["txtPerson"];
return View();
}
Sometimes you may have requirement to increase the upload file size, the setting is in web.config file, The default file size is 4096 (is 4 MB).
<configuration> <system.web> <httpRuntime maxRequestLength="4096" /> </system.web> </configuration>
