I am allowing users to upload CSV files through the website. The file is getting read using the JavaScript file API then getting sent through to the server to be saved.

,   upload: function (prefix, numberType, file, name)
{
    this.attributes = { // Set the data to be sent along
        'upload': true,
        'prefix': prefix,
        'file': file,
        'name': name,
        'numberType': numberType 
    };

    console.log('upload', this) // This will correctly show in the console

    return this.sync('create', this, { // This is when Chrome crashes
        xhr: function() {
            var xhr = $.ajaxSettings.xhr();
            xhr.upload.onprogress = function(evt){
                document.querySelector('.uploadProgressBar').style.width = parseInt(evt.loaded/evt.total*100) + '%';
                document.querySelector('#uploadNow').classList.add('percentageUpload');
                document.querySelector('#uploadNow').innerText = parseInt(evt.loaded/evt.total*100) + '%';
            };
            return xhr;
        }
    });
}

When inspecting the network tab it looks like the request is never sent so it's breaking just while the request is being created. This will only break when the file is around 100mb and smaller files will upload fine. As well as this, it will work fine on both Safari and Firefox so it's a Chrome specific issue. Is this a known issue with Chrome where it has trouble dealing with large files?

I'm thinking the only way to really get around this problem is to split the file into chunks and piece it back together on the server. This will certainly be possible but it would be worth finding out if it's a limitation to note in the future.

I am allowing users to upload CSV files through the website. The file is getting read using the JavaScript file API then getting sent through to the server to be saved.

,   upload: function (prefix, numberType, file, name)
{
    this.attributes = { // Set the data to be sent along
        'upload': true,
        'prefix': prefix,
        'file': file,
        'name': name,
        'numberType': numberType 
    };

    console.log('upload', this) // This will correctly show in the console

    return this.sync('create', this, { // This is when Chrome crashes
        xhr: function() {
            var xhr = $.ajaxSettings.xhr();
            xhr.upload.onprogress = function(evt){
                document.querySelector('.uploadProgressBar').style.width = parseInt(evt.loaded/evt.total*100) + '%';
                document.querySelector('#uploadNow').classList.add('percentageUpload');
                document.querySelector('#uploadNow').innerText = parseInt(evt.loaded/evt.total*100) + '%';
            };
            return xhr;
        }
    });
}

When inspecting the network tab it looks like the request is never sent so it's breaking just while the request is being created. This will only break when the file is around 100mb and smaller files will upload fine. As well as this, it will work fine on both Safari and Firefox so it's a Chrome specific issue. Is this a known issue with Chrome where it has trouble dealing with large files?

I'm thinking the only way to really get around this problem is to split the file into chunks and piece it back together on the server. This will certainly be possible but it would be worth finding out if it's a limitation to note in the future.

• javascript
• ajax
• backbone.js
• uploading
• jqxhr

1 Answer 1

The browser crashes because it runs out of memory.

Instead of loading the file in memory pass the file object to XMLHttpRequest so that Chrome can stream the file contents in the upload form.

Use the FormData object for this:

// your file input
const file = document.getElementById('file').files[0];
// your form
var form = new FormData();
form.append('file', file);

const xhr = $.ajaxSettings.xhr();

xhr.upload.onprogress = function(evt) {
  document.querySelector('.uploadProgressBar').style.width = parseInt(evt.loaded / evt.total * 100) + '%';
  document.querySelector('#uploadNow').classList.add('percentageUpload');
  document.querySelector('#uploadNow').innerText = parseInt(evt.loaded / evt.total * 100) + '%';
};
xhr.open('POST', 'http://example./'); // Url where you want to upload
xhr.send(form);