Asp.net Mvc multiple file upload with ajax some errors

Question

I trying to multiple file upload in mvc with Jquery ajax but i have some problems.

Here its my Html design and codes..

<div id="fileinputdiv">
  <input type="file" name="mainfile" id="mainfile" onchange="OnValueChanged(this)">
</div>
<div id="tab_images_uploader_container" class="text-align-reverse margin-bottom-10">
  <span class="btn green fileinput-button">
                                                <i class="fa fa-plus"></i>
                                                <span><a href="#" id="AddFile"> New Image... </a></span>
  </span>
  <a id="tab_images_uploader_uploadfiles" class="btn btn-primary">
    <input type="button" value="Upload Images" id="btnUpload" name="btnUpload" />
  </a>
</div>

Javascript codes...

<script type="text/javascript">
var files = [];  // Creating array for list of files
function OnValueChanged(fileUploadItemId) {           
    var selectedvalue = $(fileUploadItemId).val();
    files.push(selectedvalue);

}
$(document).ready(function () {
    $("#AddFile").click(function (e) {
        e.preventDefault();
        $(" <input type='file' onchange='OnValueChanged(this)'>").appendTo("#fileinputdiv");
    })

    $("#btnUpload").on("click", function () {

        var fileData = new FormData();
        for (var i = 0; i < files.length; i++) {  
            fileData.append(files[i].name, files[i]);  
        }   
            $.ajax({
                url: "/Product/UploadFiles",
                type: "POST",
                contentType: false,
                processData: false,
                data: fileData,
                success: function (result) {
                    alert(result);
                },
                error: function (err) {
                    alert(err.statusText);
                }
            });

    })
});

And the finally my function..

    [HttpPost]
    public ActionResult UploadFiles()
    {
        if (Request.Files.Count > 0)
        {
            try
            {
                HttpFileCollectionBase files = Request.Files;
                for (int i = 0; i < files.Count; i++)
                {
                    HttpPostedFileBase file = files[i];
                    string fname;

                    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;
                    }

                    fname = Path.Combine(Server.MapPath("~/ProductImages/"), fname);
                    file.SaveAs(fname);
                }
                return Json("File Uploaded Successfully!");
            }
            catch (Exception ex)
            {
                return Json("Error occurred. Error details: " + ex.Message);
            }
        }
        else
        {
            return Json("No files selected.");
        }
    }

My question is when i click the "Upload Files" button no any data sending with ajax to the UploadFiles() function i always getting "No files selected" errors but i tested with this code

for (var i = 0; i < files.length; i++) {
      alert(files[i]);
    }

i'm able to display all files which is selected. where is the problem that i could not find ?

Answer 1

I recommend you not to use Ajax for asynchronous file upload for various reasons. One would be to experience problems with attaching FormData and getting it in your API, and the other would be to get error when accessing HttpContext.Request.Form especially in ASP.Net Core. My recommendation to you is to use the following if asynchronous upload is a REQUIREMENT, else you could do it the non-ajax way in a separate popup window.

Use the following Javascript code:

function uploadAsync(evt){
     if (evt.enctype == "multipart/form-data") {
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                // Add the response to the desired tag by calling the xhr.responseText
            }
        };
        xhr.onprogress = function(progressEvent){
           // Update your progress here
        }
        xhr.open(evt.method, evt.action, true);
        xhr.send(new FormData(evt));
    }
} 

This code may cause post back, in order to prevent it use return false; after calling the method:

<form id="fileUploadForm" action="your action API" method="post" enctype="multipart/form-data" onsubmit="uploadAsync(this); return false;"> 
   <input name="personalImage" type="file" />
   <input name="coverImage" type="file" />
   <input type="submit" value="submit" />
</form>

now assuming:

public class FileHandlerController: Controller{

    [HttpPost]
    public String GetFileAndVerify(){
         var files = HttpContext.Request.Form.Files;
         // do the process on files
         return "We got them files";
    }
}

or you can use IFormFile in ASP.Net Core or HttpPostedFile in ASP.Net 4.

If you run into any problems when using this approach, let me know in the comment to provide you with more information and solve your problem.

Update

I have developed an unobtrusive version of this approach which you can find here: GitHub

here's the user manual:

<form async progress-bar-parent="pbarMain" progress-bar-name="pbar" response-parent="updArea" response="updElement" progress-bar-percentage="pbarPercent" dateset-ajax="true" action="/AdminArea/FilesAPI/PostFile" method="post" enctype="multipart/form-data" >
    <div class="input-group input-group-sm pull-left p-10">
         <input type="file" id="file" name="file" />
         <span class="input-group-btn">
             <input type="submit" class="btn btn-primary" value="Submit" />
         </span>
     </div>
</form>

<div id="pbarMain" class="progress" style="margin-top:20px; width:96%; margin-left:2%; position:relative; display:none;"></div>
<div id="updArea" class="input-group input-group-sm pull-left p-10" style="display:none;">
     <input id="updElement" type="text" class="form-control" value="" />
     <span class="input-group-btn">
         <button class="btn btn-primary" onclick="copyText('#updElement')">Copy</button>
     </span>
</div>

To allow uploading files in multiple forms at the same time, include allow-multi in your form tag like <form allow-multi class="..." ...>. However, this may result in some UI problems as this version I have developed is still the alpha version.

Answer 2

You have to replace Request.Files with request.Form.Files.