javascriptreactjsfilereaderreact-dropzone

Javascript FileReader hangs at readyState 1 (using react-dropzone)


Using the wonderful react-dropzone module I am attempting to read a dropped file with a FileReader before placing it in the redux store and sending it to the server. However, the events on the reader never trigger and I can't find out why not. Hope someone can help.

For curiosity, here's the onDrop handler I give the react-dropzone component:

const onDrop = (accepted, rejected) => {
        if(rejected.length > 0) {
            return console.error('Dropzone rejected:', rejected)
        }

        onChange(accepted[0])
    }

Here's my current onChange function:

const onChange = (file) => {

    file instanceof Blob === true
    file instanceof File === true

    var reader = new FileReader()

    reader.onload((event) => {
        console.log(event)
    })
    
    reader.onerror((event) => {
        console.log(event)
    })

    reader.readAsText(file)
}

Looking at the documentation and many posts on stackoverflow, the above should be right. The reader indeed changes its readyState to 1 and result to "". Yet, when I log the reader it never continues to readyState 2 nor does it ever trigger any events, also no error event.

Could there be somehting wrong with the file?


Solution

  • Looks like a typo: should be .onload instead of .onLoad.

    example from the docs (note the = sign):

    reader.onload = function(event) {
        // The file's text will be printed here
        console.log(event.target.result)
      };