javascript FileReader upload 'Request Entity Too Large'

Question

I am trying to work around files being stripped from the request when uploading via ajax in Chrome.

When files are dropped or browsed I prepare the files using FileReader:

    // initialise fileListData array
    fileListData = new Array(fileList.length);

    // start reading 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 method setFilesAreReady just stores the FileReader result into the fileListData array, and then checks if all items in the array finished processing (so that it can enable the upload button).

Once the file reading is done, the upload button is enabled and clicking upload starts to make 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 compile a formData object and then I submit it with the request:

    // start 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) 
            {
                ...
            }
    });

    // start ajax progress
    initialiseAjaxProgressBar(upload_id);
}

The problem I have with this is that the file being uploaded if over a few megabytes gives this Request Entity Too Large error:

But the server actually is configured to accept files up to 250MB. I'm using Uber uploader (perl script) and this handles large file uploads. The ajax upload works with large files in firefox and internet explorer, so this FileReader work around is just for chrome (and safari).

I'm guessing this error occurs because the content type is wrong since I'm uploading a data string rather than a js File object.

How can I correctly upload the FileReader result (which looks like: data:video/mp4;base64,...) with the other parameters I've attached to formData in the ajax request?

Is [this](http://stackoverflow.com/questions/19959072/sending-binary-data-in-javascript-over-http/19959244#19959244) relevant? — raina77ow, Sep 09 '15 at 17:20
@raina77ow No, I don't think so? Because I already have processData: false in the ajax request. Also, I need to send more parameters with the file — Ozzy, Sep 09 '15 at 17:23

score 0 · Accepted Answer · answered Sep 13 '15 at 10:27

In the end I used this nice library called plupload. It splits the file into 1mb chunks to get around the request entity too large problem. The file is rebuilt on the server. This also allows very large uploads since you don't exceed PHP's post max size with each chunk.

javascript FileReader upload 'Request Entity Too Large'

1 Answers1