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.
Wow, found the bug. I had an event.stopPropagation() somewhere in a nested component.
event.preventDefault() or event.stopPropagation(). I believe you ment to say one of those.
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}
/>
const fileRef = useRef(null);.
this.before doUpload