File Upload Through JQuery AJAX In ASP.NET MVC

In preceding code, first it checks whether windows.FormData is valid in browse. Because, using FormData we will send data to server through AJAX request. Once FormData object presence checked, it creates a new object. Then it fetches files injected in upload control and loop over it to add files to FormData object.

Controller (HomeController.cs)

In HomeContoller we need to add the following action (UploadFiles) to save files from coming AJAX request. Here is the code:

[HttpPost]  
public ActionResult UploadFiles()  
{  
// Checking no of files injected in Request object  
    if (Request.Files.Count > 0)  
    {  
        try  
        {  
            //  Get all files from Request object  
            HttpFileCollectionBase files = Request.Files;  
            for (int i = 0; i < files.Count; i++)  
            {  
                //string path = AppDomain.CurrentDomain.BaseDirectory + "Uploads/";  
                //string filename = Path.GetFileName(Request.Files[i].FileName);  
  
                HttpPostedFileBase file = files[i];  
                string fname;  
  
                // Checking for Internet Explorer  
                if (Request.Browser.Browser.ToUpper() == "IE" || Request.Browser.Browser.ToUpper() == "INTERNETEXPLORER")  
                {  
                    string[] testfiles = file.FileName.Split(new char[] { '\\' });  
                    fname = testfiles[testfiles.Length - 1];  
                }  
                else  
                {  
                    fname = file.FileName;  
                }  
  
                // Get the complete folder path and store the file inside it.  
                fname = Path.Combine(Server.MapPath("~/Uploads/"), fname);  
                file.SaveAs(fname);  
            }  
            // Returns message that successfully uploaded  
            return Json("File Uploaded Successfully!");  
        }  
        catch (Exception ex)  
        {  
            return Json("Error occurred. Error details: " + ex.Message);  
        }  
    }  
    else  
    {  
        return Json("No files selected.");  
    }  
}  

In preceding code, first it checks no. of files appended in Request object. Next, HttpFileCollectionBase class collects all files from request object. Once it collects all files, it loop over all files and save it one by one. After saving files it returns JSON data to browser that it is successfully uploaded, and if exception occurs then it send exception message in JSON format.

Above code is suitable for only one file at a time but if you want to upload multiple files then you need to go for a small change. That is: add an attribute called multiple in file upload control like the following:

<input type="file" id="FileUpload1" multiple />  

Except multiple tag everything will be same in View and Controller page. You can also upload files through HTML form tag(without using AJAX), visit here. The form(HTML) tag makes round trip to server but AJAX do not. On the other hand, if your file is larger then AJAX might throw TimeOut issue. You can overcome the issue with time out property of AJAX.

Reference

Form Data

Conclusion

In this article we discussed how to upload files to server jQuery AJAX request. You can upload files in two ways: AJAX and without AJAX (through Form tag). Choose appropriate one as per your file size and environment.