In this article I will explain with an example, how to upload files using FormData with Progress Bar using Web API and jQuery AJAX in ASP.Net MVC Razor.
This article will illustrate how to upload and send files to Web API using XmlHttpRequest (XHR), jQuery AJAX and HTML5 FormData in ASP.Net MVC Razor.
Namespaces
You will need to import the following namespaces.
using System.IO;
using System.Net;
using System.Net.Http;
using System.Web;
using System.Web.Http;
Controller
The Controller consists of the following Action method.
Action method for handling GET operation
Inside this Action method, simply the View is returned.
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
}
Web API Controller
In order to add a Web API Controller, you will need to Right Click the Controllers folder in the Solution Explorer and click on Add and then Controller.
Now from the Add Scaffold window, choose the Web API 2 Controller – Empty option as shown below.
![Upload files using FormData with Progress Bar using jQuery AJAX and Web API in ASP.Net MVC]()
Then give it a suitable name and click Add.
![Upload files using FormData with Progress Bar using jQuery AJAX and Web API in ASP.Net MVC]()
The next task is to register the Configuration for Web API in the Global.asax file so that the Web API is available for accessing on Web.
In order to do so open Global.asax file and add the following line.
System.Web.Http.GlobalConfiguration.Configure(WebApiConfig.Register);
Make sure you add it in the same order as shown below.
public class MvcApplication : System.Web.HttpApplication
{
protected void Application_Start()
{
AreaRegistration.RegisterAllAreas();
System.Web.Http.GlobalConfiguration.Configure(WebApiConfig.Register);
RouteConfig.RegisterRoutes(RouteTable.Routes);
}
}
The next step is to code the Web API Controller.
The Web API Controller consists of the following Action method.
Action method for uploading the Files
Inside this Action method, first the Folder (Directory) where the Files will be saved is created if it does not exists.
Then the Name of the File is read from Request.Form collection and the File is read from the Request.Files collection and saved in the Folder (Directory) created earlier.
Finally, an OK response along with the name of the File is returned to the Client which confirms successful upload of the File.
public class FileAPIController : ApiController
{
[Route("api/FileAPI/UploadFiles")]
[HttpPost]
public HttpResponseMessage UploadFiles()
{
//Create the Directory.
string path = HttpContext.Current.Server.MapPath("~/Uploads/");
if (!Directory.Exists(path))
{
Directory.CreateDirectory(path);
}
//Fetch the File.
HttpPostedFile postedFile = HttpContext.Current.Request.Files[0];
//Fetch the File Name.
string fileName = HttpContext.Current.Request.Form["fileName"] + Path.GetExtension(postedFile.FileName);
//Save the File.
postedFile.SaveAs(path + fileName);
//Send OK Response to Client.
return Request.CreateResponse(HttpStatusCode.OK, fileName);
}
}
View
The View consists of an HTML TextBox, an HTML FileUpload element, a Button and an HTML5 Progress element for displaying the progress of the uploading File and an HTML SPAN element.
The Upload Button has been assigned a jQuery Click event handler.
When the Upload Button is clicked, the File is read from the HTML FileUpload element and added to an HTML5 FormData JavaScript object and then the File is uploaded using XmlHttpRequest (XHR).
A Progress event handler is attached to the XmlHttpRequest (XHR), which displays the progress of the File being uploaded using the HTML5 Progress element.
The Name of the File is fetched from the TextBox and is added to the FormData object along with the File.
Finally, the received Name of the uploaded File is displayed in an HTML SPAN element.
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<table>
<tr>
<td>Name:</td>
<td><input type="text" id="fileName" /></td>
</tr>
<tr>
<td>File:</td>
<td><input type="file" id="file" /></td>
</tr>
<tr>
<td></td>
<td><input type="button" id="btnUpload" value="Upload" /></td>
</tr>
<tr>
<td colspan="2"><progress id="fileProgress" style="display: none"></progress></td>
</tr>
</table>
<hr/>
<span id="lblMessage" style="color: Green"></span>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$("body").on("click", "#btnUpload", function () {
var formData = new FormData();
formData.append("fileName", $("#fileName").val());
formData.append("file", $("#file")[0].files[0]);
$.ajax({
url: '/api/FileAPI/UploadFiles',
type: 'POST',
data: formData,
cache: false,
contentType: false,
processData: false,
success: function (fileName) {
$("#fileProgress").hide();
$("#lblMessage").html("<b>" + fileName + "</b> has been uploaded.");
},
xhr: function () {
var fileXhr = $.ajaxSettings.xhr();
if (fileXhr.upload) {
$("progress").show();
fileXhr.upload.addEventListener("progress", function (e) {
if (e.lengthComputable) {
$("#fileProgress").attr({
value: e.loaded,
max: e.total
});
}
}, false);
}
return fileXhr;
}
});
});
</script>
</body>
</html>
Screenshot
![Upload files using FormData with Progress Bar using jQuery AJAX and Web API in ASP.Net MVC]()
Browser Compatibility
The above code has been tested in the following browsers only in versions that support HTML5.
![Internet Explorer]()
![FireFox]()
![Chrome]()
![Safari]()
![Opera]()
* All browser logos displayed above are property of their respective owners.
Downloads
