132

Like a lot of people, I'd like to customize the ugly input type=file, and I know that it can't be done without some hacks and/or javascript. But, the thing is that in my case the upload file buttons are just for uploading images (jpeg|jpg|png|gif), so I was wondering if I could use a "clickable" image which would act exactly as an input type file (show the dialog box, and same $_FILE on submitted page).
I found some workaround here, and this interesting one too (but does not work on Chrome =/).

What do you guys do when you want to add some style to your file buttons? If you have any point of view about it, just hit the answer button ;)

2

14 Answers 14

362

This works really well for me:

.image-upload>input {
  display: none;
}
<div class="image-upload">
  <label for="file-input">
    <img src="https://icons.iconarchive.com/icons/dtafalonso/android-lollipop/128/Downloads-icon.png"/>
  </label>

  <input id="file-input" type="file" />
</div>

Basically the for attribute of the label makes it so that clicking the label is the same as clicking the specified input.

Also, the display property set to none makes it so that the file input isn't rendered at all, hiding it nice and clean.

Tested in Chrome but according to the web should work on all major browsers. :)

EDIT: Added JSFiddle here: https://jsfiddle.net/c5s42vdz/

8
  • i'm not sure if people still consider it a 'major browser', but this doesn't seem to work in IE7
    – Hoppe
    Nov 13, 2013 at 20:21
  • @Chet it seems to be working on the latest versions of Safari (7+) Which version are you using? Aug 7, 2014 at 7:51
  • 1
    @Toto For me it's working in IE11, I've added a JSFiddle so you can check it as well. Oct 3, 2015 at 18:03
  • 2
    sorry but I think this code must be updated with the filename or at least a message that the file has been selected successfully. The user has no visual input on what happened after he selected the file. Could this be done please? Perhaps change to a different image, when a file is chosen?
    – JoaMika
    Dec 12, 2015 at 22:24
  • 1
    I'm curious, how accessible is this? Aug 12, 2021 at 21:10
69

Actually it can be done in pure css and it's pretty easy...

HTML Code

<label class="filebutton">
Browse For File!
<span><input type="file" id="myfile" name="myfile"></span>
</label>

CSS Styles

label.filebutton {
    width:120px;
    height:40px;
    overflow:hidden;
    position:relative;
    background-color:#ccc;
}

label span input {
    z-index: 999;
    line-height: 0;
    font-size: 50px;
    position: absolute;
    top: -2px;
    left: -700px;
    opacity: 0;
    filter: alpha(opacity = 0);
    -ms-filter: "alpha(opacity=0)";
    cursor: pointer;
    _cursor: hand;
    margin: 0;
    padding:0;
}

The idea is to position the input absolutely inside your label. set the font size of the input to something large, which will increase the size of the "browse" button. It then takes some trial and error using the negative left / top properties to position the input browse button behind your label.

When positioning the button, set the alpha to 1. When you've finished set it back to 0 (so you can see what you're doing!)

Make sure you test across browsers because they'll all render the input button a slightly different size.

2
  • Thanks Toby, why is there 'left: -700px;' ? In firefox the file input field is actually floating by the left side of a page...it doesn't stick to the label span ... If I remove 'left: -700px;' it works fine
    – lisak
    May 25, 2011 at 9:05
  • +1 Thanks, @Sloin left:-700px because he wanted to get the browse button to be over the button so the cursor will be a pointer and not the text cursor. Sep 19, 2012 at 18:28
21

Great solution by @hardsetting, But I made some improvements to make it work with Safari(5.1.7) in windows

.image-upload > input {
  visibility:hidden;
  width:0;
  height:0
}
<div class="image-upload">
  <label for="file-input">
    <img src="https://via.placeholder.com/300x300.png?text=UPLOAD" style="pointer-events: none"/>
  </label>

  <input id="file-input" type="file" />
</div>

I have used visibility: hidden, width:0 instead of display: none for safari issue and added pointer-events: none in img tag to make it working if input file type tag is in FORM tag.

Seems working for me in all major browsers.

Hope it helps someone.

1
  • there is no need to add style="pointer-events: none" its create the issue to open the browse file.
    – SantoshK
    Jul 26, 2018 at 6:50
18

A much better way than writing JS is to use native, and it turns to be lighter than what was suggested:

<label>
  <img src="my-image.png">
  <input type="file" name="myfile" style="display:none">
</label>

This way the label is automatically connected to the input that is hidden. Clicking on the label is like clicking on the field.

1
  • Simplest answer and still best one Apr 26, 2022 at 6:53
7

You can replace image automatically with newly selected image.

<div class="image-upload">
      <label for="file-input">
        <img id="previewImg" src="https://icon-library.net/images/upload-photo-icon/upload-photo-icon-21.jpg" style="width: 100px; height: 100px;" />
      </label>

      <input id="file-input" type="file" onchange="previewFile(this);" style="display: none;" />
    </div>




<script>
        function previewFile(input){
            var file = $("input[type=file]").get(0).files[0];

            if(file){
              var reader = new FileReader();

              reader.onload = function(){
                  $("#previewImg").attr("src", reader.result);
              }

              reader.readAsDataURL(file);
            }
        }
    </script>
1
  • 1
    Probably the most complete answer. May 30, 2021 at 11:14
6

I would use SWFUpload or Uploadify. They need Flash but do everything you want without troubles.

Any <input type="file"> based workaround that tries to trigger the "open file" dialog by means other than clicking on the actual control could be removed from browsers for security reasons at any time. (I think in the current versions of FF and IE, it is not possible any more to trigger that event programmatically.)

7
  • Thanks, I've seen them around too, but I think that both of them need a flash player to work, and I do not want to add another mandatory layer to users. Plus are you sure that they will send the exact same type of data as the input file ones do? I do not want to retest all my PHP done in the submit page. Cheers.
    – Nicolas
    May 18, 2010 at 8:43
  • @niko no, they work differently, they are not form elements but send the file to a receiving script on their own, so you would probably have to change your script's workflow. If that's not an option, I think you can't do better than Shaun Inman did in the post you link to...
    – Pekka
    May 18, 2010 at 8:45
  • I'm afraid so then, that's really a shame. Isn't there anything about it in future CSS implementation? Thanks for the replies anyway :)
    – Nicolas
    May 18, 2010 at 8:47
  • @niko you're welcome. Good question about the CSS - I don't know actually, but HTML 5 may well bring new things here. Check out appelsiini.net/2009/10/html5-drag-and-drop-multiple-file-upload for example.
    – Pekka
    May 18, 2010 at 8:48
  • Yeah it seems promising even if the demo appelsiini.net/demo/html5_upload/demo.html does not display with my FF 3.6.3 whereas it says I do need FF 3.6.x Anyway, to go back to my issue, currently HTML/CSS/Javscript (but no flash) only allow me to do what? Some fonts and "color" customization? Am I right then? Cheers.
    – Nicolas
    May 18, 2010 at 8:57
6

This is my method if i got your point

HTML

<label for="FileInput">
    <img src="tools/img/upload2.png" style="cursor:pointer" onmouseover="this.src='tools/img/upload.png'" onmouseout="this.src='tools/img/upload2.png'" alt="Injaz Msila" style="float:right;margin:7px" />
</label>
<form action="upload.php">
    <input type="file" id="FileInput" style="cursor: pointer;  display: none"/>
    <input type="submit" id="Up" style="display: none;" />
</form>

jQuery

<script type="text/javascript">
    $( "#FileInput" ).change(function() {
      $( "#Up" ).click();
    });
</script>
5

I have had lots of issues with hidden and not visible inputs over the past decade sometimes things are way simpler than we think.

I have had a little wish with IE 5,6,7,8 and 9 for not supporting the opacity and thus the file input would cover the upload image however the following css code has resolved the issue.

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);  

The following snipped is tested on chrome, IE 5,6,7,8,9,10 the only issue in IE 5 is that it does not support auto margin.

Run the snippet simply copy and paste the CSS and HTML modify the size as you like.

.file-upload{
	height:100px;
	width:100px;
	margin:40px auto;
	border:1px solid #f0c0d0;
	border-radius:100px;
	overflow:hidden;
	position:relative;
}
.file-upload input{
	position:absolute;
	height:400px;
	width:400px;
	left:-200px;
	top:-200px;
	background:transparent;
	opacity:0;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);  
}
.file-upload img{
	height:70px;
	width:70px;
	margin:15px;
}
<div class="file-upload">
<!--place upload image/icon first !-->
<img src="https://i.stack.imgur.com/dy62M.png" />
<!--place input file last !-->
<input type="file" name="somename" />
</div>

4

its really simple you can try this:

$("#image id").click(function(){
    $("#input id").click();
});
3

You can put an image instead, and do it like this:

HTML:

<img src="/images/uploadButton.png" id="upfile1" style="cursor:pointer" />
<input type="file" id="file1"  name="file1" style="display:none" />

JQuery:

$("#upfile1").click(function () {
    $("#file1").trigger('click');
});

CAVEAT: In IE9 and IE10 if you trigger the onclick in a file input via javascript the form gets flagged as 'dangerous' and cannot be submmited with javascript, no sure if it can be submitted traditionaly.

0
2

The input itself is hidden with CSS visibility:hidden.

Then you can have whatever element you whish - anchor or image.., when the anchor/image is clicked, trigger a click on the hidden input field - the dialog box for selecting a file will appear.

EDIT: Actually it works in Chrome and Safari, I just noticed that is not the case in FF4Beta

2

Working Code:

just hide input part and do like this.

<div class="ImageUpload">
   <label for="FileInput">
      <img src="../../img/Upload_Panel.png" style="width: 18px; margin-top: -316px; margin-left: 900px;"/>
   </label>

  <input id="FileInput" type="file" onchange="readURL(this,'Picture')" style="cursor: pointer;  display: none"/>
</div>
0
2

        form input[type="file"] {
          display: none;
        }
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>

<head>
  <title>Simple File Upload</title>
  <meta name="" content="">
</head>

<body>
  <form action="upload.php" method="post" enctype="multipart/form-data">
    Select image to upload:
    <label for="fileToUpload">
      <img src="http://s3.postimg.org/mjzvuzi5b/uploader_image.png" />
    </label>
    <input type="File" name="fileToUpload" id="fileToUpload">
    <input type="submit" value="Upload Image" name="submit">
  </form>
</body>

</html>

RUN SNIPPET or Just copy the above code and execute. You will get what you wanted. Very simple and effective without javascript. Enjoy!!!

1
  • Sadly theese methods not working in Safari for me :(
    – czLukasss
    Jul 23, 2015 at 8:47
0
<script type="text/javascript">
function upl() {
    var fileSelector = document.createElement('input');
    fileSelector.setAttribute('type', 'file');
    fileSelector.setAttribute('name', 'uploimg');
    fileSelector.setAttribute('accept', 'image/*');
    fileSelector.click();
    fileSelector.style.display = "none";

    fileSelector.onchange = function() {
        document.getElementById("indicator").innerHTML = "Uploaded";
    };

    document.getElementById("par_form").appendChild(fileSelector);

}
</script>

<form id="par_form">
    <img src="image_url" onclick="upl()"><br>
    <span id="indicator"></span><br>
    <input type="submit">
</form>
1
  • 1
    Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
    – Community Bot
    Jan 8, 2022 at 8:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.