How Can I Create a Custom File Upload With Only HTML, JS and CSS

Issue

Here is the design of the control I want to create:

As you can see, it's easy to create the design except the browse button of upload control. I created the rest. I've been searching about changing the place of Browse button but could not find anything useful.

So, how to do that? There was an idea like embedding an unvisible upload control over button but any other advice is golden, thanks.

Solution

It's actually not as complicated as you may think. Check out this fiddle. Stylize your button how you will!

HTML

<input type="file" id="uploadme" />
<input type="button" id="clickme" value="Upload Stuff!" />

CSS

input[type=file] { 
    width: 1px; 
    visibility: hidden;
}

JavaScript

$(function(){
    $('#clickme').click(function(){
        $('#uploadme').click();
    });
});

Answered By - Jason