0

You can find a runnable code example here CodeSandbox, just try uploading the same image twice, only 1 log will appear.

Basically, I have this code 

<div>
  <input
    accept="image/*"
    className={classes.input}
    id="raised-button-file"
    multiple
    type="file"
    onChange={e => console.log(e)}
  />
  <label htmlFor="raised-button-file">
    <Button raised component="span" className={classes.button}>
      Upload
    </Button>
  </label>
</div>

the problem is that if I upload the same file twice consecutively the onChange method is not triggered the second time.
I mean ok, the file is the same, but at least the timestamp of upload has changed :/.

Is there another prop I can use to be triggered everytime a file is uploaded? I want to make some checks on the file, like checking if the size is not too big.

r4id4
  • 5,877
  • 8
  • 46
  • 76
  • Do you clear the input after uploading the first one? Otherwise selecting the same file again would not trigger the input change as nothing has changed. – XCS Dec 12 '17 at 22:05
  • what about reseting the field after logging e => { console.log(e); e.target.value = '' } – AngelSalazar Dec 12 '17 at 22:07
  • 1
    Yep, I didn't know I had to clear the input. This did the trick `e.target.value = null;`. Thanks – r4id4 Dec 12 '17 at 22:09

0 Answers0