I am encountering a very strange error in my React application. I have this code:

<input
  accept="image/*"
  onChange={doUpload}
  type="file"
  name="fileUploader"
  id="photoUploader"
  ref={fileRef}
/>

but when I click the input to select a file, I don't get the file explorer at all. I also noticed that some of my form's onSumit did not fire until I added an onClick handler to the submit button.

I am encountering a very strange error in my React application. I have this code:

<input
  accept="image/*"
  onChange={doUpload}
  type="file"
  name="fileUploader"
  id="photoUploader"
  ref={fileRef}
/>

but when I click the input to select a file, I don't get the file explorer at all. I also noticed that some of my form's onSumit did not fire until I added an onClick handler to the submit button.

• javascript
• reactjs

• what is the value in {fileRef}. Try with just ref="upload" and see if issue happens. – Mahendra Pratap Commented Aug 27, 2019 at 11:00
• add this. before doUpload – Alex Commented Aug 27, 2019 at 11:37

3 Answers 3

Wow, found the bug. I had an event.stopPropagation() somewhere in a nested ponent.

I had the same issue, dont know why it is was happening but I did in this way

const fn = useCallback((event) => {
    console.log("clicked");
    event.stopPropagation();
}, []);


const handleFileClick = (event) => {
    if (fileRef.current) {
        fileRef.current.addEventListener("click", fn);
        fileRef.current.click();
    }
};

You have to add this keyword. I hope it is useful for you:

       <input
          accept="image/*"
          onChange={this.doUpload}
          type="file"
          name="fileUploader"
          id="photoUploader"
          ref={this.fileRef}
        />