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: to this:

Grimy

You can use the hidden attribute instead visbility="hidden" like: <input type="file" id="files" hidden /> (w3schools.com/tags/att_global_hidden.asp) – Newt

Answer 1

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>

Taub

Note that it doesn't work on old Android 4.2 browser. – Kermit

"for" in the label Tag and "id" in the input Tag have to match. The rest is just for styling. – Game

Note that Android 4.2 and less represents 0.1% of users – Fortissimo

Answer 2

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>

Conscientious

get a 404 for that fiddle. – Michalmichalak

On hover cursor isn't become as pointer on top ( I guess need to add some offset – Mord

@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! – Adal

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. – Conscientious

Answer 3

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

Wicketkeeper

This is a perfect solution when using Angular. – Lagunas

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? – Kathe

Answer 4

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

Plotter

Answer 5

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>

Lamoureux

I think you better change the visibility="hidden" to style="display: none" – Lamoureux

To know more about difference, visibility hidden vs display none. – Sagerman

Answer 6

A nice way of doing this is making the input field to be

• positioned absolute inside parent element
• having zero opacity
• filling the whole parent element

Parent element in this example is a button.

<button 
  style="padding: 0.625rem; border-radius: 9999px; background-color: #1F87CC; position: relative;"
>
  <input
    type="file"
    style="position: absolute; bottom: 0px; top: -1px; left: 0px; right: 0px; opacity: 0;"
  >
  <svg viewBox="0 0 20 20" fill="#FFFFFF" aria-hidden="true" style="width: 1rem; height: 1rem;"><path fill-rule="evenodd" d="M15.621 4.379a3 3 0 00-4.242 0l-7 7a3 3 0 004.241 4.243h.001l.497-.5a.75.75 0 011.064 1.057l-.498.501-.002.002a4.5 4.5 0 01-6.364-6.364l7-7a4.5 4.5 0 016.368 6.36l-3.455 3.553A2.625 2.625 0 119.52 9.52l3.45-3.451a.75.75 0 111.061 1.06l-3.45 3.451a1.125 1.125 0 001.587 1.595l3.454-3.553a3 3 0 000-4.242z" clip-rule="evenodd"></path></svg>
</button>

Which will result in looking like this. The rounded button is working as an input field of type "file".

Jaquelinejaquelyn

Answer 7

For me this works:

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

Desertion

Answer 8

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!

Sletten

Answer 9

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

Output Image URL - https://i.sstatic.net/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>

Walkup

Answer 10

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>

Kinescope