I'm working on a Vue.js file picker that needs to display previews of selected files. To accomplish this, I am utilizing the FileReader API to read user-selected files as data URLs using the readAsDataURL method of the FileReader object.
However, I'm encountering an error that states "Uncaught TypeError: reader.onload is not a function" when I try to use reader.onload in my handleFileChanges function.
It seems like the issue may be that the reader object is not defined, leading to the FileReader undefined error mentioned earlier.
Here is the snippet of how I am attempting to achieve this:
handleFileChanges (e) {
var reader = new window.FileReader() // Using window to avoid FileReader undefined error
reader.onload(function (event) {
let imageDataURL = event.target.result
this.$store.dispatch('attachedFile', imageDataURL)
})
reader.readAsDataURL(e.target.files[i])
}
Can someone please point out what I may be missing in my implementation?