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

Solution 1

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.

Solution 2

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/

Solution 3

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>