How to upload a file using jQuery.ajax and FormData

Question

When I use XMLHttpRequest, a file is correctly uploaded using FormData. However, when I switch to jQuery.ajax, my code breaks.

This is the working original code:

function uploadFile(blobFile, fileName) {     var fd = new FormData();     fd.append("fileToUpload", blobFile);     var xhr = new XMLHttpRequest();     xhr.open("POST", "upload.php", true);     xhr.send(fd); } 

Here is my unsuccessful jQuery.ajax attempt:

function uploadFile(blobFile, fileName) {     var fd = new FormData();     fd.append("fileToUpload", blobFile);     var xm = $.ajax({         url: "upload.php",         type: "POST",         data: fd,     }); } 

What am I doing wrong? How can I get the file to be uploaded correctly, using AJAX?

Answer 1

You have to add processData:false,contentType:false to your method, so that jQuery does not alter the headers or data (which breaks your current code).

function uploadFile(blobFile, fileName) {     var fd = new FormData();     fd.append("fileToUpload", blobFile);      $.ajax({        url: "upload.php",        type: "POST",        data: fd,        processData: false,        contentType: false,        success: function(response) {            // .. do something        },        error: function(jqXHR, textStatus, errorMessage) {            console.log(errorMessage); // Optional        }     }); }