making a input type "file" hidden with button

Question

I was wondering if this is doable? Google comes up with nothing.

Basically i want to my button to simulate when selected, allowing users to upload files. I've read its possible with labels, but i need to do with a button to do UX/UI

<button style="position:fixed;bottom:10px;right:70px" type="button" class="btn btn-default">
    <input type="file" id="files" visbility="hidden" />
    <span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span>
</button>

Currently my button looks like this: enter image description here to this:

enter image description here

You can use the `hidden` attribute instead `visbility="hidden"` like: `` (https://www.w3schools.com/tags/att_global_hidden.asp) — cespon, Feb 13 '19 at 14:24

score 77 · Accepted Answer · edited Feb 13 '19 at 14:15

77

You can actually do it with label, you just have to hide the input.

<!-- head -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

<!-- body -->
<label for="upload">
      <span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span>
      <input type="file" id="upload" style="display:none">
</label>

edited Feb 13 '19 at 14:15

cespon

5,630
7
33
47

answered Mar 25 '15 at 08:57

qtgye

3,580
2
15
30

2

Note that it doesn't work on old Android 4.2 browser. – Brian Cannard Feb 20 '17 at 07:08
"for" in the label Tag and "id" in the input Tag have to match. The rest is just for styling. – meles Apr 20 '17 at 09:31
Note that Android 4.2 and less represents 0.1% of users – Dorian May 19 '23 at 13:08

Victor Radu · Answer 2 · 2019-06-19T15:44:22.757

try an opacity of 0

opacity:0;

https://jsfiddle.net/m4e0y2o3/12/

plus fallbacks if you what to support older browsers

.hiddenFileInput > input{
  height: 100%;
  width: 100;
  opacity: 0;
  cursor: pointer;
}
.hiddenFileInput{
  border: 1px solid #ccc;
  width: 100px;
  height: 100px;
  display: inline-block;
  overflow: hidden;
  cursor: pointer;
  
  /*for the background, optional*/
  background: center center no-repeat;
  background-size: 75% 75%;
  background-image:  url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBoZWlnaHQ9IjUxMnB4IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9Ii01MyAxIDUxMSA1MTEuOTk5MDYiIHdpZHRoPSI1MTJweCI+CjxnIGlkPSJzdXJmYWNlMSI+CjxwYXRoIGQ9Ik0gMjc2LjQxMDE1NiAzLjk1NzAzMSBDIDI3NC4wNjI1IDEuNDg0Mzc1IDI3MC44NDM3NSAwIDI2Ny41MDc4MTIgMCBMIDY3Ljc3NzM0NCAwIEMgMzAuOTIxODc1IDAgMC41IDMwLjMwMDc4MSAwLjUgNjcuMTUyMzQ0IEwgMC41IDQ0NC44NDM3NSBDIDAuNSA0ODEuNjk5MjE5IDMwLjkyMTg3NSA1MTIgNjcuNzc3MzQ0IDUxMiBMIDMzOC44NjMyODEgNTEyIEMgMzc1LjcxODc1IDUxMiA0MDYuMTQwNjI1IDQ4MS42OTkyMTkgNDA2LjE0MDYyNSA0NDQuODQzNzUgTCA0MDYuMTQwNjI1IDE0NC45NDE0MDYgQyA0MDYuMTQwNjI1IDE0MS43MjY1NjIgNDA0LjY1NjI1IDEzOC42MzY3MTkgNDAyLjU1NDY4OCAxMzYuMjg1MTU2IFogTSAyNzkuOTk2MDk0IDQzLjY1NjI1IEwgMzY0LjQ2NDg0NCAxMzIuMzI4MTI1IEwgMzA5LjU1NDY4OCAxMzIuMzI4MTI1IEMgMjkzLjIzMDQ2OSAxMzIuMzI4MTI1IDI3OS45OTYwOTQgMTE5LjIxODc1IDI3OS45OTYwOTQgMTAyLjg5NDUzMSBaIE0gMzM4Ljg2MzI4MSA0ODcuMjY1NjI1IEwgNjcuNzc3MzQ0IDQ4Ny4yNjU2MjUgQyA0NC42NTIzNDQgNDg3LjI2NTYyNSAyNS4yMzQzNzUgNDY4LjA5NzY1NiAyNS4yMzQzNzUgNDQ0Ljg0Mzc1IEwgMjUuMjM0Mzc1IDY3LjE1MjM0NCBDIDI1LjIzNDM3NSA0NC4wMjczNDQgNDQuNTI3MzQ0IDI0LjczNDM3NSA2Ny43NzczNDQgMjQuNzM0Mzc1IEwgMjU1LjI2MTcxOSAyNC43MzQzNzUgTCAyNTUuMjYxNzE5IDEwMi44OTQ1MzEgQyAyNTUuMjYxNzE5IDEzMi45NDUzMTIgMjc5LjUwMzkwNiAxNTcuMDYyNSAzMDkuNTU0Njg4IDE1Ny4wNjI1IEwgMzgxLjQwNjI1IDE1Ny4wNjI1IEwgMzgxLjQwNjI1IDQ0NC44NDM3NSBDIDM4MS40MDYyNSA0NjguMDk3NjU2IDM2Mi4xMTMyODEgNDg3LjI2NTYyNSAzMzguODYzMjgxIDQ4Ny4yNjU2MjUgWiBNIDMzOC44NjMyODEgNDg3LjI2NTYyNSAiIHN0eWxlPSIgZmlsbC1ydWxlOm5vbnplcm87ZmlsbC1vcGFjaXR5OjE7IiBzdHJva2U9IiMwMDAwMDAiIGZpbGw9IiMwMDAwMDAiLz4KPHBhdGggZD0iTSAzMDUuMTAxNTYyIDQwMS45MzM1OTQgTCAxMDEuNTM5MDYyIDQwMS45MzM1OTQgQyA5NC43MzgyODEgNDAxLjkzMzU5NCA4OS4xNzE4NzUgNDA3LjQ5NjA5NCA4OS4xNzE4NzUgNDE0LjMwMDc4MSBDIDg5LjE3MTg3NSA0MjEuMTAxNTYyIDk0LjczODI4MSA0MjYuNjY3OTY5IDEwMS41MzkwNjIgNDI2LjY2Nzk2OSBMIDMwNS4yMjY1NjIgNDI2LjY2Nzk2OSBDIDMxMi4wMjczNDQgNDI2LjY2Nzk2OSAzMTcuNTkzNzUgNDIxLjEwMTU2MiAzMTcuNTkzNzUgNDE0LjMwMDc4MSBDIDMxNy41OTM3NSA0MDcuNDk2MDk0IDMxMi4wMjczNDQgNDAxLjkzMzU5NCAzMDUuMTAxNTYyIDQwMS45MzM1OTQgWiBNIDMwNS4xMDE1NjIgNDAxLjkzMzU5NCAiIHN0eWxlPSIgZmlsbC1ydWxlOm5vbnplcm87ZmlsbC1vcGFjaXR5OjE7IiBzdHJva2U9IiMwMDAwMDAiIGZpbGw9IiMwMDAwMDAiLz4KPHBhdGggZD0iTSAxNDAgMjY4Ljg2MzI4MSBMIDE5MC45NTMxMjUgMjE0LjA3NDIxOSBMIDE5MC45NTMxMjUgMzQ5LjEyNSBDIDE5MC45NTMxMjUgMzU1LjkyNTc4MSAxOTYuNTE5NTMxIDM2MS40OTIxODggMjAzLjMyMDMxMiAzNjEuNDkyMTg4IEMgMjEwLjEyNSAzNjEuNDkyMTg4IDIxNS42ODc1IDM1NS45MjU3ODEgMjE1LjY4NzUgMzQ5LjEyNSBMIDIxNS42ODc1IDIxNC4wNzQyMTkgTCAyNjYuNjQwNjI1IDI2OC44NjMyODEgQyAyNjkuMTEzMjgxIDI3MS40NTcwMzEgMjcyLjMzMjAzMSAyNzIuODIwMzEyIDI3NS42Njc5NjkgMjcyLjgyMDMxMiBDIDI3OC42MzY3MTkgMjcyLjgyMDMxMiAyODEuNzMwNDY5IDI3MS43MDcwMzEgMjg0LjA3ODEyNSAyNjkuNDgwNDY5IEMgMjg5LjAyNzM0NCAyNjQuNzgxMjUgMjg5LjM5ODQzOCAyNTYuOTg4MjgxIDI4NC42OTkyMTkgMjUyLjA0Mjk2OSBMIDIxMi4yMjY1NjIgMTc0LjI1MzkwNiBDIDIwOS44NzUgMTcxLjc4MTI1IDIwNi42NjAxNTYgMTcwLjI5Njg3NSAyMDMuMTk5MjE5IDE3MC4yOTY4NzUgQyAxOTkuNzM0Mzc1IDE3MC4yOTY4NzUgMTk2LjUxOTUzMSAxNzEuNzgxMjUgMTk0LjE3MTg3NSAxNzQuMjUzOTA2IEwgMTIxLjY5OTIxOSAyNTIuMDQyOTY5IEMgMTE3IDI1Ni45ODgyODEgMTE3LjM3MTA5NCAyNjQuOTAyMzQ0IDEyMi4zMTY0MDYgMjY5LjQ4MDQ2OSBDIDEyNy41MTE3MTkgMjc0LjE3OTY4OCAxMzUuMzAwNzgxIDI3My44MDg1OTQgMTQwIDI2OC44NjMyODEgWiBNIDE0MCAyNjguODYzMjgxICIgc3R5bGU9IiBmaWxsLXJ1bGU6bm9uemVybztmaWxsLW9wYWNpdHk6MTsiIHN0cm9rZT0iIzAwMDAwMCIgZmlsbD0iIzAwMDAwMCIvPgo8L2c+Cjwvc3ZnPgo=)
}

<span class="hiddenFileInput">
  <input type="file" name="theFile"/>
</span>

On hover cursor isn't become as pointer on top ( I guess need to add some offset — Pavlo Oliinyk, Jan 20 '19 at 10:39
@victor-radu, can you, please, explain the reason for you choosing `opacity: 0` instead of `display: none`. A little bit of reasoning (explaining when `opacity: 0` will be better) will be helpful for future reference. Thank you! — Boris D. Teoharov, May 14 '21 at 08:33
hello, @BorisD.Teoharov display none does not actually render the element in the dom, making interactions with it hardly possible. Opacity 0 renders the element but makes it completely transparent meaning that it will still catch the click interaction as you are clicking on it even if you do not see it. — Victor Radu, May 15 '21 at 10:59

score 4 · Answer 3 · answered Jun 14 '21 at 20:36

4

If you're using Angular I suppose this pretty solution

  <button class="" (click)="uploader.click()">
     <input hidden type="file" #uploader />
  <button>

you can easly make the analogy with other techno

answered Jun 14 '21 at 20:36

Smaillns

2,540
1
28
40

This is a perfect solution when using Angular. – Rodrigo Silva Feb 20 '22 at 02:15
How about the angular case when button is in the button row above the program and the place to display input image are in separated group i.e.:display section is in sketch.component.html / sketch.component.ts / sketch.component.spec.ts / topnav.component.scss while the button component is in topnav.component.html / topnav.component.ts / topnav.component.spec.ts / topnav.component.scss? Could you show me the example how to implement such a thing? – Wisarut Bholsithi Feb 23 '22 at 20:07

score 3 · Answer 4 · answered Sep 24 '21 at 07:27

As all the other answers mention various ways of hiding the <input> element, consider using opacity: 0 as well, as quoted from the MDN docs:

Note: opacity is used to hide the file input instead of visibility: hidden or display: none, because assistive technology interprets the latter two styles to mean the file input isn't interactive.

You can pretty much trigger the file input with any other event (eg: button click, hover, etc.), you can call click() on the input element (getting it with getElementById(), querySelector(), etc.)

const inputElement = document.getElementById('file-input-element')

// on some other event
inputElement.click() // will let user select files

score 1 · Answer 5 · answered Mar 25 '15 at 08:57

1

Something like this will do:

<button id="fileup" style="position:fixed;bottom:10px;right:70px" type="button" class="btn btn-default" >
<input type="file" id="files" visbility="hidden"/>
<span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span>
</button>
<script>
$('#fileup').click(function() {
   $('#files').click();
});
</script>

answered Mar 25 '15 at 08:57

Eduardo Ramos

416
3
8

6

I think you better change the visibility="hidden" to style="display: none" – Eduardo Ramos Mar 25 '15 at 09:03
To know more about difference, [visibility hidden vs display none](https://stackoverflow.com/a/133064/4067157). – Yogi Dec 04 '19 at 13:16

score 0 · Answer 6 · edited Oct 24 '21 at 11:48

0

For me this works:

<label htmlFor="inputGroupFile01">
     <span className="fa fa-file-image fa-lg"/>
</label>

edited Oct 24 '21 at 11:48

Tomerikoo

18,379
16
47
61

answered Oct 24 '21 at 11:25

Kseniia Bashkova

1

Judah the Hudson · Answer 7 · 2023-06-01T13:52:20.820

We can use style="opacity: 0" in the input:

<input type="file" id="files"  style="opacity: 0"/>

Opacity versus Visibility:
opacity is used to hide the file input instead of visibility: hidden or display: none, because assistive technology interprets the latter two styles to mean the file input isn't interactive. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file

Your Button (with only folder icon):

<button style="position:fixed;bottom:10px;right:70px" type="button" class="btn btn-default">
    <input type="file" id="files"  style="opacity: 0"/>
    <span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span>
    button
</button>

Bona Fortuna!

score -1 · Answer 8 · answered Jul 19 '17 at 08:41

Simple Method with beautiful input file [type="file"].

Output Image URL - https://i.stack.imgur.com/4Jl0H.jpg

input[type="file"] {
 display: inline-block;
 opacity: 0;
 position: absolute;
 margin-left: 20px;
 margin-right: 20px;
 padding-top: 30px;
 padding-bottom: 67px;
 width: 85%;
 z-index: 99;
 margin-top: 10px;
 cursor:pointer;
}
.custom-file-upload {
 position:relative;
    display: inline-block;
    cursor: pointer;
 padding-top:40px;
 padding-bottom:40px;
 background:url(http://www.a-yachtcharter.com/search-fleet/webaccess/assets/img/uploadIcon.png) #fff center center no-repeat;
 width:91%;
 border:1px dashed #ff5b57 !important;
 margin-left:20px;
 margin-right:20px;
 margin-top:10px;
 text-align:center;
}

<input type="file" multiple class="form-control">
<label for="file-upload" class="custom-file-upload"></label>

score -1 · Answer 9 · edited Feb 13 '19 at 14:17

-1

You can use the following to make an input type "file" hidden with a button:

<div>
     <input type="file" id="files" style="display:none"/>
     <button onclick="click_the_button(files);">Click me</button>
</div>enter code here

<script>
    function click_the_button(btn){
        btn.click();
    }
</script>

edited Feb 13 '19 at 14:17

cespon

5,630
7
33
47

answered Sep 22 '18 at 18:29

KNV

15
3

making a input type "file" hidden with button

9 Answers9

Linked

Related