Cross-browser One Click File Upload

Aug
14

I wanted to make a simple file uploader where I could click one button, choose a file, and it would begin to upload. The trick is that I wanted to avoid the ugly "Choose File" button and use a custom button. After toying with a few different methods, I figured out that the following is the best way to go about this, as it works on IE 7+ and all other major browsers. The <label> tag can be styled as a button to fit in to any application. Without further ado, here it is.

<form>
    <label for="input">Click Me to Upload</label>
    <input type="file" id="input" style="display: none" onchange="this.parentNode.submit()"/>
</form>
comments powered by Disqus