JavaScript FileReader is duplicating the onload callback

Question

The following code is driving me nuts. It picks up when a file upload input has changed and then grabs the image via FileReader. The annoying thing is, and i can't work out why, that is keeps incrementally duplicating the onload event. So the first time i select a file it fires onload once, if i select a second file with the same file input the onload fires twice, if i select a file again it fires 3 times and on like that.

var ele = document.getElementById('photo-upload');
        ele.addEventListener('change',function(e){

            console.log("FLE CHANGED");

            var file = e.target.files[0];
            var fr = new FileReader();
            fr.onload = function(e){
                console.log("FILE READER LOADED");
            }
        }

The code is way too long to share it all, it's part of a much larger project. the answer is below to it, but then when using readAsDataURL it says the object is in an invalid state — Glen Elkins
– Glen Elkins, Commented Jul 10, 2018 at 13:56

Moonjsit · Accepted Answer · 2018-07-10 14:01:03Z

4

You are creating new file reader with each click on <input type="file" id="photo-upload" />.

I've modified your code:

const ele = document.getElementById('photo-upload');
const fr = new FileReader();
fr.onload = function(e){
  console.log("FILE READER LOADED");
}
ele.addEventListener('change',function(e){
  console.log("FLE CHANGED");
  const file = e.target.files[0];
  // load file with using on of fr methods
  // eg.
  fr.readAsArrayBuffer(file);
}

Working example:

const ele = document.getElementById('photo-upload');
const fr = new FileReader();
fr.onload = evt => {
  console.log(evt.target);
  console.log("FILE READER LOADED");
}
ele.addEventListener('change', evt => {
  console.log("FLE CHANGED");
  const file = evt.target.files[0];
  fr.readAsArrayBuffer(file);
})

<input type="file" id="photo-upload" />

edited Jul 10, 2018 at 14:01

answered Jul 10, 2018 at 12:52

Moonjsit

6363 silver badges11 bronze badges

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

9 Comments

Glen Elkins Over a year ago

I get what you're saying here, but when i wrote that i kinda assumed creating a NEW object would literally be that, not firing the evet on all the previous objects. I'll give this a try..

Glen Elkins Over a year ago

Saying that, it's not quite right. Now in the console i get "The object is in an invalid state" on every single upload. That's when using readAsDataURL() for pulling in images as data string.

Moonjsit Over a year ago

I've edited the anwser and added working code snippet

Glen Elkins Over a year ago

What have you changed? You're not using readAsDataURL which is what i need.. Anyway with adding the code how you have done it i still get: InvalidStateError: The object is in an invalid state. readAsDataURL - after the first image is selected and start trying a 2nd or 3rd

Moonjsit Over a year ago

I've changed html part - button to input As I stated in anwser you may use different FileReader methods. In snippet I've used Arrow Function syntax

|

Collectives™ on Stack Overflow

JavaScript FileReader is duplicating the onload callback

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related