7

this is my code :

 <label for="uploadFile" class="custom-uploadFile">
    <i class="fa fa-cloud-upload"></i> UPLOAD ID 
  </label>
  <input class="form-control input-lg"  name="picture" id="uploadFile" type="file" style="display:none;" required>

I WANT the let this field of upload required but the input is hidden . i must use some javascript or what to solve this problem because i watched a lot of tuto but not work ! Thank you

  • 1
    Please avoid language spamming. Pick one language and try to solve it in this one. You forgot to ask a question. – Turing85 Jun 18 '18 at 20:30
  • Tagging lots of languages like that generally means you get downvotes from more users. If you had one tag, it would have been a serious question, now it's not and everyone in all the tagged languages are going to downvote you. – Andreas Jun 18 '18 at 20:32
  • @Turing85 my question is how to let this field required –  Jun 18 '18 at 20:34
  • input is hidden because of the property `display: none`. Moreover, do not use inline css. – Marco Luzzara Jun 18 '18 at 20:40

2 Answers2

18

If you want to see the form validation message you can hide the input using opacity.

#uploadFile {
  opacity: 0;
  width: 0;
  float: left; /* Reposition so the validation message shows over the label */
}

div {
    text-align: center;
}
<form>
<input name="picture" id="uploadFile" type="file" required>

<label for="uploadFile">Upload label</label>
    
<div><input  name="submit" type="submit"></div>
</form>
Jarzon
  • 551
  • 5
  • 16
  • 1
    the form element now no longer HIDDEN, it just INVISIBLE. "hidden" input take no space on the form, while the "invisible" input still took space (width/height) in the form – Toni Tegar Sahidi Jan 23 '19 at 03:39
  • 1
    You can't just make the input hidden since that's gonna also hide the validation message, but there is a few hacks you can probably use to better mimic a hidden input with pros/cons. – Jarzon Jan 24 '19 at 01:46
  • I added width: 0; so the input doesn't take width space. Thanks for you input. – Jarzon Jan 24 '19 at 01:57
  • nice hack, why didnt i thought of that in first place. good job – Galzor Oct 24 '19 at 10:02
  • 1
    .input-hidden { opacity: 0; width: 0; height: 0; border: none; position: absolute; pointer-events: none; } // setting padding: 0; won't show required validation error. so don't set padding to 0; – Riajul Mar 06 '21 at 05:56
  • Is this the right solution though? Is there any accessiblity reasons to not do this? – dwjohnston May 26 '21 at 06:42
  • It's a bit better that other hacks to hide the upload input since you can still select the input with tab. But nothing will be highlighted to let you know it's selected. – Jarzon May 26 '21 at 21:49
2

But I think it's a nice approach and I also added

pointer-events: none;

to the input. So the user can't click on it and also the cursor doesn't change on hover.

10 Rep
  • 2,156
  • 7
  • 17
  • 31
DeadApe
  • 158
  • 1
  • 8