Theo's Typesafe Cult•2y ago

file input element doesnt work if its inside a form

i have an interesting question. i have a pretty big dynamic form that im managing rhf. one of these form elements wants to allow the user to submit a picture. Inside this I have a button to submit a new picture:

          <input
            form="test"
            accept="image/*"
            type="file"
            id={inputID}
            className="hidden"
            onChange={onPhotoEdit}
          />
          <label htmlFor={inputID}>
            <Avatar component="span">
              <Edit />
            </Avatar>
          </label>

          <input
            form="test"
            accept="image/*"
            type="file"
            id={inputID}
            className="hidden"
            onChange={onPhotoEdit}
          />
          <label htmlFor={inputID}>
            <Avatar component="span">
              <Edit />
            </Avatar>
          </label>

The problem is that the file input isnt triggered as long as this element exists within the form. I tried moving it outside and it seems to work. Any idea how i can get the input to trigger when i click the label?

2 Replies

Tom•2y ago

Nevermind. this issue was caused by a event.preventDefault on an onClick listener on the parent

Samathingamajig•2y ago

Gaming

Programming

file input element doesnt work if its inside a form