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

Question

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

sample design

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.

Jason · Accepted Answer · 2016-01-21T19:22:29.433

49

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();
    });
});

edited Jan 21 '16 at 19:22

answered Apr 26 '11 at 17:31

Jason

51,583
38
133
185

8

+1 Good answer. I forked your fiddle. This will display the file name in a textbox next to the button when the file has been selected. http://jsfiddle.net/nKVkM/ – jessegavin Apr 26 '11 at 17:37
On the surface this seems to work very well, but when I try it on a real form and try to submit the form, IE8 doesn't submit the form the first time I click the submit button. Instead it just clears the file upload control (I had to make it visible to confirm this part), then if I click submit again it works. I'm guessing this is a security feature, trying to avoid people making it not-obvious what you are uploading. – eselk Nov 30 '12 at 04:53
More about why this doesn't work: http://stackoverflow.com/questions/3935001/getting-access-is-denied-error-on-ie8 – eselk Nov 30 '12 at 05:16
@eselk yes, if you are trying to submit the form using a basic form POST it will not work. however, given that javascript penetration is over 99%, you can programmatically submit your form and not really worry about the three people in the world who have JS turned off. – Jason Nov 30 '12 at 18:38

score 6 · Answer 2 · answered Apr 26 '11 at 17:27

6

Here's are two excellent articles which shows you how to customize the appearance of file inputs.

jQuery Custom File Upload Input: from the book Designing with Progressive Enhancement by the Filament Group

Styling File Inputs with CSS and the DOM by Shaun Inman

answered Apr 26 '11 at 17:27

jessegavin

74,067
28
136
164

Links not working – Sushan Aug 16 '23 at 13:23

score 5 · Answer 3 · answered Jun 18 '13 at 18:16

For a solution that does not require JavaScript, you could use a <label>:

<label for="upload">Upload</label>
<input type="file" id="upload" style="position:absolute; visibility:hidden"/>

This won't work in every browser, namely older ones and mobile Safari. To cover these, use the above mentioned JavaScript solution.

score 4 · Answer 4 · answered May 31 '13 at 06:34

another example:

see this Fiddle

HTML:

<div class="button-green"><input class="file-upload" type="file">Upload File</div>

CSS:

.button-green
{
    font-family: "Segoe UI","Segoe","Verdana";
    background: #0f9e0a center top no-repeat;
    background-image: linear-gradient(rgb(15, 158, 10), rgb(24, 105, 21)); 
    overflow: hidden;
    color: white;
    border-radius: 5px;
    width: 82px;  
    position: relative; 
    padding: 8px 10px 8px 10px;
}

.button-green:hover
{
    background: #0a8406 center top no-repeat;
    background-image: linear-gradient(rgb(12, 141, 8), rgb(19, 88, 17));     
}

.file-upload
{
    opacity: 0;
    width: 102px;
    height: 35px;
    position: absolute;
    top: 0px;
    left: 0px;
}

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

4 Answers4

Linked