Netlify form integration is removing the functionality of my labels?

Support
1

Hi there,

I am creating a React app and have successfully managed to experiment with getting the form fields to submit correctly, this includes files, text and select fields. I am however struggling as I have now lost the ability to click on a form fields label and for the focus to switch to inside that form field. Now this in itself is not a huge problem, however in the file uploads I am relying on a handler being called that changes the label to represent a thumbnail of the image that has just been uploaded and I now no longer have that functionality unless I unhide the actual file input and use the unstyled html button.

The code for the index.html is:

 <form name="Submission" netlify netlify-honeypot="bot-field" hidden>
  <input type="text" name="name" id="firstName" />
  <select name="age" id="ageSelect"></select>
  <input type="email" name="email" id="email" />
  <select name="country" id="countryList"></select>
  <input
    type="file"
    name="todayImageUpload"
    id="todayImageUpload"
    accept="image/x-png,image/gif,image/jpeg,image/svg+xml"
  />
  <textarea
    type="text"
    name="todayImageDescription"
    id="todayImageDescription"
    rows="5"
  ></textarea>
  <input
    type="file"
    name="tomorrowImageUpload"
    id="tomorrowImageUpload"
    accept="image/x-png,image/gif,image/jpeg,image/svg+xml"
  />
  <textarea
    type="text"
    name="tomorrowImageDescription"
    id="tomorrowImageDescription"
    rows="5"
  ></textarea>
  <input type="checkbox" id="marketingPreference" name="marketingPreference" />
</form>

And the code for the input image is:

<label htmlFor="todayImageUpload">
      <div className={styles.thumbnail_container} id="todayImageThumbnail">
        <img src={uploadText} className="w-1/2" />
      </div>
    </label>
    <input
      type="file"
      onChange={(event) => {
        console.log(event);
        handleFileUpload(event, setTodayImagePresent, setTomorrowImagePresent);
      }}
      accept="image/x-png,image/gif,image/jpeg,image/svg+xml"
      name="todayImageUpload"
      id="todayImageUpload"
      // className={"hidden"}
    />

When the className hidden is uncommented it also no longer works. Now I know that when the index.html form is commented out this functionality all works fine, so are there any thoughts on what is causing this so I can try and fix it? I assume it is something to do with the original fields being replaced by the netlify ones?

Many thanks in advance

2

Can you try wrapping your label around the input element instead of using the for/htmlFor attribute/prop? Like this:

<label>
    <div className={styles.thumbnail_container} id="todayImageThumbnail">
      <img src={uploadText} className="w-1/2" />
    </div>
    <input
      type="file"
      onChange={(event) => {
        console.log(event);
        handleFileUpload(event, setTodayImagePresent, setTomorrowImagePresent);
      }}
      accept="image/x-png,image/gif,image/jpeg,image/svg+xml"
      name="todayImageUpload"
      id="todayImageUpload"
      // className={"hidden"}
    />
</label>

Let me know if the works better for you.