Using FileReader API inside a Vue.js component method

Question

I am developing a file picker with Vue.js. I want to show selected file previews. I use FileReader API to achieve this. I read the user selected files as data urls with readAsDataURL method of the FileReader object.

However I get an error message saying reader.onload is not a function like:

Uncaught TypeError: reader.onload is not a function
    at VueComponent.handleFileChanges

It may be the reader is not defined, following the FileReader undefined error I have mentioned above.

How I try to do do this is as follows:

handleFileChanges (e) {
    var reader = new window.FileReader() // if window is not used it says File READER is not defined
                reader.onload(function (event) {
                  // dispatch fileAttached to state UI postEditor with event.target.result as read dataURL
                  let imageDataURL = event.target.result
                  this.$store.dispatch('attachedFile', imageDataURL) // or previewFile
                })
                reader.readAsDataURL(e.target.files[i])
}

What is the point I am missing?

Belmin Bedak · Accepted Answer · 2017-04-24 14:22:56Z

2

Well as error says, and It's correct, It's not a function.Basically onload is event handler/property that is attached on newly constructed FileReader object and since It's not a function, It doesn't accept the any callback.

Use it like this:

handleFileChanges (e) {
    var reader = new window.FileReader() // if window is not used it says File READER is not defined
                reader.onload = function (event) {
                  // dispatch fileAttached to state UI postEditor with event.target.result as read dataURL
                  let imageDataURL = event.target.result
                  this.$store.dispatch('attachedFile', imageDataURL) // or previewFile
                }
                reader.readAsDataURL(e.target.files[i])
}

Also make sure that this at this.$store.dispatch is bounded to correct context.

answered Apr 24, 2017 at 14:22

Belmin Bedak

9,2213 gold badges43 silver badges44 bronze badges

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

Comments

Kerem · Accepted Answer · 2017-04-24 15:03:36Z

1

Because onload is a property, you should set (modify) it as a callback. But while FileReader inherits from EventTarget, all events (onload, onabort etc.) could be used with addEventListener. So in any case that you need to pass a callback as an event handler for on-load you might consider to use addEventListener.

// method 1
reader.onload = function (e) { ...
// method 2
reader.addEventListener("onload", function (e) { ...

answered Apr 24, 2017 at 15:03

Kerem

11.6k5 gold badges61 silver badges58 bronze badges

Collectives™ on Stack Overflow

Using FileReader API inside a Vue.js component method

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related