customizing file upload to look same in all browsers

Question

How do I customize the file upload,

<input type="file" />

To look the same in all browsers? I want to invoke file browser on clicking on my custom styled button.

This will probably help you: http://stackoverflow.com/questions/5191375/a-file-input-button-for-all-browsers-is-this-possible — , May 09 '13 at 14:04
There are probably a dozen threads on this very topic already. Please make use of the search box on SO. — Ray Nicholus, May 09 '13 at 14:10
[please don't](http://en.wikipedia.org/wiki/Principle_of_least_astonishment) — Quentin, May 09 '13 at 14:16

score 1 · Answer 1 · answered May 09 '13 at 14:15

You can overload the style on a upload button yourself by setting the opacity of the file upload to 0 and putting a div on top with the style you want. e.g.

    <input style="opacity:0; position: fixed;" onchange="openfile(event)" type="file">
    <div class="icon">Open</div>

score 1 · Answer 2 · answered May 09 '13 at 14:15

One option is to hide the real input and replace it with a button.

$('input[type=file]').each(function(index,input){

     var button = $("<button class='file_btn'>Upload File</button>");
     $(input).before(button);
     $(input).css({position:'absolute',top:'-1000px'});

     button.click(function(){
         $(input).trigger('click');
     });

});

A working fiddle: http://jsfiddle.net/KQhGR/1/

Nagendra Rao · Accepted Answer · 2013-05-09T14:29:48.537

After thinking for half hour found a solution myself which just solves this problem.(Yes, I knew the answer when I posted this question, but wanted to see how others would solve this, and of course I want to share my solution with the rest)

Working jsfiddle example.

<input style="float:left; width:270px; height:25px;" id="path" name="path" disabled /> <!--disabled it, to avoid user from editing the file path-->
<input style="display:none;" type="file" id="photo-path" name="file" placeholder="" /> <!-- hide the default input type='file' coz its ugly :) -->

<button type="submit" onclick="document.getElementById('photo-path').click(); return false;">Browse</button>  <!-- but call hidden input type='file' when user clicks on your custom browse button,  -->

This is the JQuery code: (to copy file path to your custom field)

<script type='text/javascript'>
    $('input[name="file"]').change(function(){
        var fileName = $(this).val();
        $('input[name="path"]').val(fileName);
    });
</script>

score -1 · Answer 4 · answered May 09 '13 at 14:06

-1

Your best bet for something like this is to use a plugin like Uploadify to not only style the upload button consistently but add a progress bar adn multiple file uploads.

Unfortunately there isn't a reliable way (that I know of) to style file uploads consistently across all browsers. It's one of those controls front end developers don't like to talk about.

answered May 09 '13 at 14:06

Maloric

5,525
3
31
46

There is a reliable way to do this cross-browser. Many file upload libraries accomplish this already with a bit of CSS and javascript. – Ray Nicholus May 09 '13 at 14:26

customizing file upload to look same in all browsers

4 Answers4