How to use FileReader with React? (getting a strange error)

Question

I have tried solutions from

and gotten the same error as my code.

I'm trying to use the FileReader() in a react component.

class Home extends Component {

  onChange(e) {
    let files = e.target.files;
    console.log(files);
    let reader = new FileReader();
    reader.readAsDataURL(files[0]);

    reader.onload = e => {
      console.log(e.target.result);
    };
  }

  render() {
    return (
        <div onSubmit={this.onFormSubmit}>
          <h1>Upload File Here</h1>
          <input type="file" name="file" onChange={e => this.onChange(e)} />
        </div>

export default Home;

console.log(files) returns the uploaded file (if I run it without the rest of the onChange() code). When I run the whole thing, I get an error message of:

Error: cannot read as File: {} on reader.readAsDataURL(files[0]);

I'm following this tutorial exactly and it is working fine for them. Any thoughts?!

https://www.youtube.com/watch?v=sp9r6hSWH_o&t=50s

score 1 · Accepted Answer · answered Jan 05 '19 at 08:58

1

Try this

Change

   onChange(e) {
        let files = e.target.files;
         console.log(files);
         let reader = new FileReader();
         reader.readAsDataURL(files[0]);

          reader.onload = e => {
              console.log(e.target.result);
          };
     }

To

    onChange = e => {
         let files = e.target.files;
         console.log(files);
         let reader = new FileReader();
         reader.onload = r => {
              console.log(r.target.result);
          };
         reader.readAsDataURL(files[0]);
     }

answered Jan 05 '19 at 08:58

Hemadri Dasari

32,666
37
119
162

Thank you very much for taking the time to help me. Unfortunately, this code is producing the same error. I am going to try it in a fresh create-react-app to see if it makes any difference. – Hanley Soilsmith Jan 05 '19 at 09:04
It worked when I created a new app. Very Strange! Thanks again for taking the time :) – Hanley Soilsmith Jan 05 '19 at 09:07
I thought binding is the issue. Do you mean your old code worked? – Hemadri Dasari Jan 05 '19 at 09:11
1

Yes, both code worked when I created the new react app. Accepted your answer as it is also a solution to this problem should some other poor soul come along.. – Hanley Soilsmith Jan 05 '19 at 09:15
@HemadriDasari how can i set the `state` if this functionality is placed in my `utils.csvreader.js` file? unable to return a value on `reader.onload` function – Azhar Uddin Sheikh Feb 23 '23 at 14:55

How to use FileReader with React? (getting a strange error)

1 Answers1

Linked