file upload button without input field?

Question

Possible Duplicate:
jQuery : simulating a click on a <input type=“file” /> doesn't work in Firefox?

Is it possible to have a file button without an input beside it by default? Ideally all I want is a button that lets the user navigate to a file without showing what they selected prior to an upload. I'll submit the form by the following after a user chooses a file:

$("#file").change(function() {
    $("#update_button").trigger('click');
});

I'm sure this must be possible with some css or jquery magic...

score 57 · Answer 1 · edited Jun 27 '13 at 15:49

57

You could simply hide the input button with visibility: hidden;, and attach a click event handler to the other button:

HTML:

<input type="file" name="somename" size="chars">
<button>Choose File</button>

CSS:

input {
    display: block;
    visibility: hidden;
    width: 0;
    height: 0;
}

JavaScript:

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

Here's the fiddle: http://jsfiddle.net/tCzuh/

edited Jun 27 '13 at 15:49

Jimbo

25,790
15
86
131

answered Dec 02 '11 at 02:17

Joseph Silber

214,931
59
362
292

This seems to work great on Chrome and IE 9 but nothing older :( – Paul Dec 02 '11 at 02:21
@Paul - Interesting. I don't have any older versions of IE installed, but I tested it by changing the browser mode to IE7, and it worked!?! – Joseph Silber Dec 02 '11 at 02:25
Interesting...maybe IE Tester isn't working correctly (I wouldn't be suprised) I'll try the same here. Thanks! – Paul Dec 02 '11 at 03:02

Matti Virkkunen · Accepted Answer · 2011-12-02T02:18:45.803

24

If I remember correctly, HTML5 allows you to call the click method on a hidden input element to show the file dialog via a custom button (why not just make it work without an element, I don't know). Unfortunately not all currently in use browsers support this yet, so you're stuck with styling a file input to look like a button.

This is a hilariously ugly but ingenious CSS hack I came across on a site once (probably imgur):

.fileupload {
    width: 100px;
    height: 50px;
    position: relative;
    overflow: hidden;
    background: ...; /* and other things to make it pretty */
}

.fileupload input {
    position: absolute;
    top: 0;
    right: 0; /* not left, because only the right part of the input seems to
                 be clickable in some browser I can't remember */
    cursor: pointer;
    opacity: 0.0;
    filter: alpha(opacity=0); /* and all the other old opacity stuff you
                                 want to support */
    font-size: 300px; /* wtf, but apparently the most reliable way to make
                         a large part of the input clickable in most browsers */
    height: 200px;
}

And the HTML to go with it:

<div class="fileupload">
  <input type="file" />
  Any content here, perhaps button text
</div>

What it does is it makes the file input itself enormous (by changing the font size (!?)) to ensure it covers the button, and then cuts off the excess with overflow: hidden;. This may not work for absolutely enormous buttons.

edited Dec 02 '11 at 02:18

answered Dec 02 '11 at 02:13

Matti Virkkunen

63,558
9
127
159

This is useless, as in some browsers the filename comes before the button, while in others it comes after. See here: http://www.quirksmode.org/dom/pix/filefields.gif – Enrique Moreno Tent Dec 02 '11 at 02:16
1

@Dbugger: IIRC Safari allows you to click the text part as well, as do a lot of other browsers. At least IE doesn't like clicks on the field, hence the right positioning. I checked, and it's infact what imgur.com does, and I'm pretty sure they're a pretty good field test. – Matti Virkkunen Dec 02 '11 at 02:20
It seems that most of these examples work with the exception of older browser...meaning IE 8 and below – Paul Dec 02 '11 at 02:30
1

@Paul: We've tested this thing on IE 6 and up. That old enough for you? – Matti Virkkunen Dec 02 '11 at 02:33
That should work...I was using IE Tester and it wasn't working on IE 7 and 8 but that could be IE Tester I suppose – Paul Dec 02 '11 at 02:38
does not work in firefox ( – Prosto Trader Feb 10 '15 at 09:44
@ProstoTrader: Got a jsfiddle of it not working? – Matti Virkkunen Feb 10 '15 at 19:48

score 9 · Answer 3 · edited Dec 02 '11 at 03:48

If you set the opacity to 0, then you can add another div underneath it that looks like a button. You can style this any way you like then.

Working code example below:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<div class="wrapper">
    <div class="fakeuploadbutton">upload</div>
    <input id="file" type="file" name="file" />
</div>
<script type="text/javascript" charset="utf-8">
    jQuery('#file').css('opacity',0);    
</script>
<style type="text/css" media="screen">
    .wrapper { position: relative; }
    .fakeuploadbutton { 
        background: red url('myuploadbutton.png') no-repeat top left;
        width: 100px; height: 30px;
    }
    #file { 
        position: absolute;
        top: 0px; left: 0px; 
        width: 100px; height: 30px;
    }
</style>

This is the best approach for cross browser compatibility issues. — Rabih Kodeih, Nov 19 '13 at 15:05

score 0 · Answer 4 · answered Dec 02 '11 at 02:21

0

An option to look at is here:

http://shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom

This allows for more customization of an <input> field

answered Dec 02 '11 at 02:21

Jason

15,017
23
85
116

file upload button without input field?

4 Answers4

Linked