React Dropzone FileReader - cannot read as File: {}

Question

I'm using the following code to retrieve data from a dropped/selected file.

onDrop = (files) => {
  files.forEach(file => {
    const reader = new FileReader();
    reader.onload = () => {
      const fileAsBinaryString = reader.result
      console.log(fileAsBinaryString);
    }
    reader.onabort = () => console.log('file reading was aborted');
    reader.onerror = () => console.log('file reading has failed');

    try {
      reader.readAsDataURL(file);
    } catch(err) {
      console.log(err)
      console.log(file);
    }

    this.setState({
      fileName: file.name
    })
  });
}

render() {
  return (
    <div className="app">
      <ReactDropzone onDrop={this.onDrop} className="dropzone">
        <IconContext.Provider value={{ size: "5em" }}>
          <IoMdCloudUpload/>
        </IconContext.Provider>
        <h1>{this.state.fileName}</h1>
      </ReactDropzone>
    </div>
  );
}

When I run the server and drop something inside the dropzone, even though console.log(file) gives me a non-blank File object, I get

Error: cannot read as File: {}

At

reader.readAsDataURL(file);

Any idea as to why this may happen and how I should fix it?

I am having the same issue, did you ever find a solution?

Hanley Soilsmith
– Hanley Soilsmith

2019-01-05 08:32:24 +00:00
Commented Jan 5, 2019 at 8:32 — Hanley Soilsmith
– Hanley Soilsmith, Commented Jan 5, 2019 at 8:32

sina farbod · Accepted Answer · 2020-03-10 09:10:30Z

2

onDrop = (acceptedFiles, rejectedFiles) => {
        const reader = new FileReader()

        reader.readAsDataURL(acceptedFiles[0])

        reader.onload = () => {
            if (!!reader.result) {
                console.log('reader.result', reader.result)
            }
        }
}

answered Mar 10, 2020 at 9:10

sina farbod

4974 silver badges18 bronze badges

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

Collectives™ on Stack Overflow

React Dropzone FileReader - cannot read as File: {}

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related