HTML5 FileReader failing to trigger functions

Question

I'm trying to use the HTML5 FileReader to load a CSV file, but its onLoad function never triggers (tried with Firefox and Chrome). This is despite its result property being populated with the file's contents, its readyState being set to 2 (DONE), and its error property remaining null. It also produces no console errors. My code is below:

var reader = new FileReader();

function process_file(file) {
    reader.onError = function(evt) {upload_failed("There was an error opening your CSV file. It may be corrupted.")};
    reader.onAbort = function(evt) {upload_failed("There was an error opening your CSV file. It may be corrupted.")};
    reader.onLoad = upload_complete;
    reader.readAsText(file);
    alert('Started');
}
function upload_complete(evt) {
    alert('Complete');
    csv_data = reader.result;
    $submit_button.prop('disabled', false);
}
function upload_failed(message) {
    alert('Failed');
    $submit_button.prop('disabled', true);
    alert(message);
}

"Started" is the only alert which shows. The other properties of the reader were accessed through the Firefox console. The process_file function is run through:

<input type='file' onchange="process_file(this.files[0])" style="display: none;" accept=".csv"  "id and name etc..."/>

I would like to know what I'm doing wrong and how to have the onLoad function trigger when the file is loaded.

caffeinated.tech · Accepted Answer · 2016-06-02 14:00:09Z

2

As per the FileReader docs, the callbacks are passed to onload, onprogress and onerror. You camel-cased them to onLoad, onProgress and onError.

var reader = new FileReader();

function process_file(file) {
    reader.onerror = function(evt) {upload_failed("There was an error opening your CSV file. It may be corrupted.")};
    reader.onabort = function(evt) {upload_failed("There was an error opening your CSV file. It may be corrupted.")};
    reader.onload = upload_complete;
    reader.readAsText(file);
    alert('Started');
}

answered Jun 2, 2016 at 14:00

caffeinated.tech

6,5561 gold badge24 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sman789 Over a year ago

The hours I spent trawling through the web and I missed something so obvious. Thanks! Out of curiosity, why didn't what I was doing generate an error? Was it creating a new variable inside of the FileReader object?

caffeinated.tech Over a year ago

FileReader extends Object, so you can set whatever properties you want on it. So setting onLoad didn't raise an error, it just set a property that was never used. I made this error many times with the Image and FileReader APIs, it's due to the terrible naming standardization of the various DOM and JS related APIs.

Collectives™ on Stack Overflow

HTML5 FileReader failing to trigger functions

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related