Multi File Upload through Ajax and MVC

In this blog you will learn how to Multi File Upload through Ajax and MVC.

The multiple attribute in HTML5 allows user to select multiple files from the browse window. Through ajax we can upload the selected files simultaneously. We can use XMLHttpRequest to upload the files to server asynchronously. The data transfer can be tracked with the event listeners.

By this we can know how much data is transferred to the server. This is useful when we want to show some progress bar to the user while the file is being uploaded. Here is the sample JavaScript code to send data asynchronously.

JavaScript:

var requests = new Array();
var xmlRequests = new Array();
var xhr = new XMLHttpRequest();
var uploadObj = xhr.upload;
requests.push(uploadObj);
xmlRequests.push(xhr);

uploadObj.addEventListener("progress", function(ex) {
    var pc = parseInt(((ex.loaded / ex.total) * 100)); //tells how much percentage of data is uploaded.
}

}, false);

xhr.open('POST', "Service Url", true);
xhr.onreadystatechange = function(response) {
    if (this.readyState != 4) return;
    if (this.status == 200) {
        // called after file has been uploaded successfully
    }
};
xhr.send(data);

The above sample code is for single file upload. If we want to upload multiple then we need to include it in a for loop. To support multi upload the file control must contain multiple attribute as below.

HTML:

<form action="action url">
   Select images: <input type="file" name="file" multiple>
   <input type="submit">
</form>

The HttpPostedFileBase is the class which Serves as the base class for classes that provide access to individual files that have been uploaded by a client. This class we can define as a parameter in action method of the controller. The name of the file control should match with the parameter in controller. Here is a sample code. In this example I am restricting file upload size to 2 MB.

public ActionResult UploadFiles(HttpPostedFileBase file) {
    string fileName = "";
    bool IsSucceeded = false;
    string Message = string.Empty;

    string path = Server.MapPath("~/Temp");
    fileName = new FileInfo(file.FileName).Name;
    if (file.ContentLength <= (2 * 1024 * 1024)) {
        file.SaveAs(path + "/" + fileName);
        IsSucceeded = true;
    } else {
        Message = "Failed: Max limit 2MB";
    }


    return Json(new {
        Success = IsSucceeded, Url = fileName, Message = Message
    });
}

Note: I have attached fully working example for multi file upload. You can download it to see demo.