How to style a ‘Choose File’ Upload button

Posted on


For some silly reason standard css wouldn’t allow the file upload button to be styled. Naturally the very smart people have found ways around this. Although there are various method, I like this simple one the most.

The HTML

<div id="file" class="btn">Upload Photo</div>
<input type="file" name="file" />

The CSS

#file {
    display:none;
}​

The Javascript

var wrapper = $('<div/>').css({height:0,width:0,'overflow':'hidden'});
var fileInput = $(':file').wrap(wrapper);

fileInput.change(function(){
    $this = $(this);
    $('#file').text("File attached");
})

$('#file').click(function(){
    fileInput.click();
}).show();

From the very intelligent folks at Stack Overflow

Variation 1: Image button

If you would like to use an image button instead, simple add your image code instead of “Upload Photo” like this:

The HTML

<div id="file"><img src="/images/button-image.jpg"></div>
<input type="file" name="file" />

Variation 2: File name

If you would like to use the file name instead of the text “File attached”, you could try the following Javascript, courtesy of the brainy folks of StackOverflow, the only code that is highlighted:

The Javascript

 var wrapper = $('<div/>').css({height:0,width:0,'overflow':'hidden'});
 var fileInput = $(':file').wrap(wrapper);

 fileInput.change(function(){
    $this = $(this).val().replace(/C:\\fakepath\\/i, '');
    $('#file').text($this);
 })

 $('#file').click(function(){
    fileInput.click();
 }).show();

 

 

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInEmail this to someone

By

Hong Kong based Digital Creative & Web Designer who loves to tinker with technology. Happily accept I'm a geek but hate to sit still all day.

Follow me on Twitter @ChiWaiLi

Tags: , , , , ,

  • http://tomdignan.com Thomas Dignan

    Thanks, this was very helpful. You have to wonder what they were thinking when they made this standard…

    • Chi-Wai Li

      Glad it was useful to you Tom. It took me a while to realise normal CSS doesn’t work for upload buttons, it’s really silly IMO.

  • mauritian_host

    Thank you so much this code was really helpful to me! Keep it up..

    • Chi-Wai Li

      Happy to help Mauritian_host!

  • http://www.covershub.net Facebook Cover Photos

    Thank you so much this code was really helpful to me! Keep it up..

  • dorrax

    I’m too new at this, I can do basic HTML and simple servlets, but javascript escapes me write now. Where can I find an example that puts the three pieces (html, css, and javascript) together? I don’t know how to use css beyond adding a style tag to html elements, so I have no clue what to do with the css portion shown here.

  • Kathy

    Thanks this is great. One question – I now have to pass the filename via post to be uploaded – I used console.log(“filename is ” + $this) and the filename was correct, but I cannot pass this value. This is how I”m passing it:

    $(‘form.general’).append(“”);

    Any ideas?

    • Chi

      Hi Kathy, Do you have an example of your code? Where are you trying to show the file name? Thanks for dropping by