I was working on the JavaScript for this website recently and I had a problem: I wanted to ask the user what file they wanted to use for their profile picture, but I didn't want to show the name of the file like the input tag by default does. The file the user submitted was going to be displayed on the page anyways, so I just wanted them to click a button and not be shown their filename.
An example from MDN Web Docs on the file input element before and after file selection
After looking at a thread on Stack Overflow, I decided to try wrapping the input in a label tag, as you often do with forms. This meant giving the input an id and giving the label a "for" attribute with a value of that id. Then I simply set the input display to "none" using styling - the Stack Overflow thread recommended setting opacity to 0 instead of using "display: none" or "visibility: hidden" since these latter two options apparently can make the element noninteractive, but I had no such problem. Because I was using React Bootstrap, I was able to style the label as a button and enter the text I wanted to display as its content, but I imagine putting a button tag in the label and wrapping that around the desired text should work too. You can see additional styling with bootstrap in the below image, but it isn't relevant.
Inspecting the label element on the page. The whole blue part is clickable and opens up file submission!
Top comments (0)