0

I've built some component in React, that allows the user to crop a selected image file, after it is selected from a simple input type file element. I'm using the Onchange event to capture this action.

The problem is, that this event runs only when the newly selected file is actually different than the previous one. This is a problem, because a user might want to re-crop the same image.

The onChange event doesn't fire, if the same file is selected.

I do not have anything special in my code. This is the input element:

                        <input onChange={(e) => { this.onFileChange(e.target.files) }} type="file" name="file" id="exampleFile" />

And then the method that is run:

 onFileChange = (files) => {      
    var reader = new FileReader();
    reader.onload =  (e)=> {          
        this.setState(() => ({ showCropper: true, cropperSrc:reader.result }))
    };
    reader.readAsDataURL(files[0]);             
}

How can i "intercept" the file selection, even if the file is the same? Maybe some work-around?

i.brod
  • 3,993
  • 11
  • 38
  • 74
  • 2
    It's because `onChange` only get's fired when the **value** changes. An easy workaround would be to clear the file inputs value in your `onFileChange` event. This answer should help: https://stackoverflow.com/questions/26634616/filereader-upload-same-file-again-not-working – Chase DeAnda Jun 21 '18 at 19:24
  • Thank you, it works. I used a ref to clear the value of the input. – i.brod Jun 21 '18 at 19:32

0 Answers0