React hidden input type file onChange not firing

Question

const passFromPicToUpload = (e) =>{
        hiddenFileInput.current.click();
        console.log("one")
    }

const handleProfilePicUpload = (e) =>{
    console.log("two")

    if(e.target.files[0]){
        setImage(e.target.files[0]);
        
    }
}

 return (
     <div className="profile">
      <div className="imageContainer" >
       <a href="#" onClick={passFromPicToUpload}>
        {
          profile.avatarUrl?<Image src={profile.avatarUrl} className="profile__image"  /> :<Image src="https://i.sstatic.net/l60Hf.png" className="profile__image" /> 
        }
       </a>
      </div>   
     <input type="file" ref={hiddenFileInput} onChange={handleProfilePicUpload} style={{display:'none'}} /> 

 </div>
)

So basically the file choosing window is showing but after I choose a pic the "handleProfilePicUpload" is not firing.

Please show us the whole component. Also, why is that 'display: none'? — yovchokalev
– yovchokalev, Commented Feb 6, 2021 at 13:32
Did the below answers help you? If so, please accept or vote — Ajeet Shah
– Ajeet Shah, Commented Feb 27, 2021 at 18:56

Dennis Vash · Accepted Answer · 2021-02-06 13:51:13Z

3

You trying to simulate onChange by click event. Change the listener to onClick:

<input onClick={handleProfilePicUpload} .. />

A cleaner solution would be using a label:

<input type="file" id="file" style="display:none;">
<label for="file">
   <a>Image</a>
</label>

edited Feb 6, 2021 at 13:51

answered Feb 6, 2021 at 13:45

Dennis Vash

54.2k12 gold badges120 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ajeet Shah · Accepted Answer · 2021-02-06 13:46:45Z

1

You can simply use a label:

.hidden {
  display: none;
}

<input type="file" name="file" id="my-file" class="hidden">
<label for="my-file">
   <img src="https://picsum.photos/200/300" width="100" height="100"> 
</label>

It will work exactly as an HTML file input tag works.

So, you can do:


function onFileChange(e) {
  setImage(e.target.files)
}

// ...

<label
  htmlFor="my-file"
  title="Click to choose a file"
>
  <img src="https://picsum.photos/200/300" width="100" height="100">
</label>
<input
  type="file"
  id="my-file"
  className="hidden"
  onChange={onFileChange}
/>

answered Feb 6, 2021 at 13:46

Ajeet Shah

19.9k10 gold badges66 silver badges107 bronze badges

Comments

Sehrish Waheed · Accepted Answer · 2022-06-01 05:21:25Z

0

<input
   type="file"
   accept="image/*"
   name="pic"
   onChange={(e: any) => {}}
   style={{ display: 'none' }}
   ref={fileRef}
/>

If you hide the input through styles onChange does get fired but make sure your component is mounted before your call click through the reference

edited Jun 1, 2022 at 5:21

answered May 30, 2022 at 7:18

Sehrish Waheed

1,59518 silver badges22 bronze badges

1 Comment

codewario Over a year ago

Code-only answers are generally considered low-quality answers on Stack Overflow. This answer could be improved with an explanation as to how this solves OP's problem presented in the question.

Collectives™ on Stack Overflow

React hidden input type file onChange not firing

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related