Dealing with files being removed from requests during ajax upload in Chrome has been a challenge for me.
When files are selected or dragged and dropped, I handle them by using FileReader:
// initialise fileListData array
fileListData = new Array(fileList.length);
// read files
for (var i=0; i<fileList.length; i++) {
// update fileListData file status
fileListData[i] = { 'name': fileList[i].name, 'processing' : 1 };
// read file
var fileReader = new FileReader();
fileReader.onload = (function(idx) {
return function(e) {
// update fileListData data
setFilesAreReady(idx, e.target.result);
}
})(i);
fileReader.readAsDataURL(fileList[i]);
}
The setFilesAreReady method simply stores the FileReader result in the fileListData array and then checks if all items have finished processing to enable the upload button.
Once file reading is complete, the upload button becomes enabled and clicking it triggers ajax requests:
if (is_chrome || is_safari) {
formData.append('upfile_0', ajax_uploads[file_idx].fileData);
console.log(ajax_uploads[file_idx].fileData);
} else {
formData.append('upfile_0', file);
}
formData.append('event', eventVal);
formData.append('filePrivacy', filePrivacyVal);
First, I build a formData object and then submit it with the request:
// begin upload
jQuery.ajax(
{
data: formData,
url: path_to_upload_script + '?upload_id=' + upload_id,
type: "POST",
processData: false,
contentType: false,
error:
function (jqXHR, textStatus, errorThrown)
{
...
},
success:
function (response)
{
...
}
});
// initiate ajax progress
initialiseAjaxProgressBar(upload_id);
}
The issue arises when uploading large files, causing a Request Entity Too Large error:
https://i.sstatic.net/B9NX3.png
Despite the server's ability to accept files up to 250MB, this error occurs. Uber uploader (Perl script) manages large file uploads but the problem only affects Chrome and Safari, not Firefox or Internet Explorer.
I suspect the error may be due to an incorrect content type since I am uploading a data string instead of a JavaScript File object.
How can I effectively upload the FileReader result (e.g., data:video/mp4;base64,...) along with other parameters attached to formData in the ajax request?