Alternate styling for file upload?

[deronsizemore]

I’ve been beating my head against the wall for a while now trying to figure out a better solution for uploading a file.

What I would love to have is something like what Dribbble has for their image upload, if anyone is familiar with that? It’s basically just a “browse” link which opens the explorer dialog box so you can select your image and then once the image is selected, the form submits and goes to the next page.

Here’s the HTML I have:

<a href="" id="browse">Browse</a>
<input id="id_image" name="image" type="file">

All I want to do is allow users to click the “browse” link above and then select a file which then gets inserted into the file input like it otherwise would if you had clicked the actual browse button on the file input. Is this possible?

I found a jsfiddle that is close but deals with two inputs instead of a link and an input and I can’t seem to get it to work with my above code: http://jsfiddle.net/CSvjw/

I never in my life thought working with this file upload field would be this difficult. lol

[fretburner]

What you want is very similar to the existing code in the fiddle:

$('#browse').click(function(e) {
    e.preventDefault();  // prevents the browser from trying to follow the link
    $('input[type=file]').trigger('click');
});

If you want to display the name of the selected file somewhere, you’ll also need to modify file input’s change handler, otherwise it can be removed.

[deronsizemore]

@fretburner

$(‘#browse’).click(function(e) {
e.preventDefault(); // prevents the browser from trying to follow the link
$(‘input[type=file]’).trigger(‘click’);
});

Ah, thank you. I had something similar to this but I did not have the preventDefault for the click on the link, so I assume that’s why I wasn’t getting anything returned to the file input when file was selected. Thanks!