MVC Jquery file upload Request.Files is always empty

Question

I have been searching online looking for the answer to this problem but I cannot seem to find anything that works, I have the following Controller code:

[HttpPost]
public ActionResult UploadFiles()
{
    // If files exist
    if (Request.Files != null && Request.Files.Count > 0)
    {
        // ** Do stuff

        return Json(new { result = true, responseText = "File(s) uploaded successfully" });
    }

    // Return no files selected
    return Json(new { result = false, responseText = "No files selected" });
}

And following code in my cshtml page which works fine and the controller can see the files that I upload:

<input type="file" name="files" id="files" accept="image/*;capture=camera" multiple>
<button type="button" onclick="submitform()">Submit</button>

<script>
    function submitform(){

        // Get files from upload
        var files = $("#files").get(0).files;

        // Create form data object
        var fileData = new FormData();

        // Loop over all files and add it to FormData object
        for (var i = 0; i < files.length; i++) {
            fileData.append(files[i].name, files[i]);
        }

        // Send files to controller
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "/Quotes/QuoteFiles/UploadFiles", false);
        xhr.send(fileData);     
    }

</script>

However when I try and change this to work using an Ajax call as shown below then Request.Files in the Controller always has no files. The only bit I have changed is the "Send files to controller" part:

<input type="file" name="files" id="files" accept="image/*;capture=camera" multiple>
<button type="button" onclick="submitform()">Submit</button>

<script>
    function submitform(){

        // Get files from upload
        var files = $("#files").get(0).files;

        // Create form data object
        var fileData = new FormData();

        // Loop over all files and add it to FormData object
        for (var i = 0; i < files.length; i++) {
            fileData.append(files[i].name, files[i]);
        }

        // Send files to controller
        $.ajax({
            url: '/Quotes/QuoteFiles/UploadFiles',
            type: "POST",
            contentType: false, // Not to set any content header
            processData: false, // Not to process data
            data:  fileData,
            success: function (result) {
                alert(result);
            },
            error: function (err) {
                alert(err.statusText);
            }
        });

    }

</script>

I am running this in Google Chrome but I have tried IE 11 and Edge but not of them work. Can anyone tell me what I am doing wrong?

Answer 1

try using a fileReader instead of a formData and change the mimetype to 'text/plain; charset=x-user-defined-binary'

https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications#Example_Uploading_a_user-selected_file

Answer 2

I have finally found what was causing this issue, I have the following code on my _Layout.cshtml page which is there to automatically send the AntiForgeryToken on any ajax requests I make, this appears to be causing the problem because once I remove it Request.Files is not empty. I now need to see if I can find a way to add this code back in where it will not stop file uploads working:

$(document).ready(function () {
    var securityToken = $('[name=__RequestVerificationToken]').val();
    $(document).ajaxSend(function (event, request, opt) {
        if (opt.hasContent && securityToken) {   // handle all verbs with content
            var tokenParam = "__RequestVerificationToken=" + encodeURIComponent(securityToken);
            opt.data = opt.data ? [opt.data, tokenParam].join("&") : tokenParam;
            // ensure Content-Type header is present!
            if (opt.contentType !== false || event.contentType) {
                request.setRequestHeader("Content-Type", opt.contentType);
            }
        }
    });
});

**** EDIT ****

I have now reworked this as shown below to add 'if(opt.data != "[object FormData]"' which resolves the issue by not calling the code if it is a file upload:

$(document).ready(function () {
    var securityToken = $('[name=__RequestVerificationToken]').val();
    $(document).ajaxSend(function (event, request, opt) {
        if (opt.hasContent && securityToken) {   // handle all verbs with content
            // If not "FormData" (i.e. not a file upload)
            if (opt.data != "[object FormData]")
            {
                 var tokenParam = "__RequestVerificationToken=" + encodeURIComponent(securityToken);
                opt.data = opt.data ? [opt.data, tokenParam].join("&") : tokenParam;
                // ensure Content-Type header is present!
                if (opt.contentType !== false || event.contentType) {
                    request.setRequestHeader("Content-Type", opt.contentType);
                }
             }

         }
     });
 });