How to read a file from the input and save in the react state

I am now working on a react and redux project. What I am trying to realize is to read the file from the input area and save in the states as a file and then passing it through HTTP request using actions and saga.

state={
    file: {}
};
<Input 
      type="file"
      accept="image/*"
      onChange={(e) => {
          let file = e.target.files[0];
          console.log(file);
          this.setState({file: file})}});
      }}
>
</Input>

But this doesn't work. Any idea?

It gave error of this when I tried to see it in the React inspect. 
backend.js:7715 Uncaught TypeError: Illegal invocation
    at backend.js:7715
    at Array.forEach (<anonymous>)
    at Bridge._inspectResponse (backend.js:7711)
    at Bridge._handleMessage (backend.js:7592)
    at listener (backend.js:92)

1 answer

  • answered 2018-10-11 19:31 Hemadri Dasari

    Functionality looks fine. But code has to be corrected. Try this

      <input type="file" accept="image/*"
      onChange={e => { this.setState({file: e.target.files[0]}) }}>
      </input>