DEV Community

Cover image for How to create a custom file upload button

How to create a custom file upload button

Faddal Ibrahim on August 16, 2020

I find the default HTML file upload button rather ugly. Annoying enough, there seems to be no way to style it directly. Here is how I created a cus...
Collapse
 
bugs_bunny profile image
Derek Oware • Edited

You can style the button with input::-webkit-file-upload-button. You can check the docs

Collapse
 
faddalibrahim profile image
Faddal Ibrahim

Interesting. Never knew about that. Thanks for sharing, Derek.

Collapse
 
haribhusal profile image
Hari Bhusal

Thanks man

Collapse
 
davebudah profile image
Dave Budah

But it wont hide the "no file chosen label

Collapse
 
sampatbadhe profile image
Sampat Badhe

@davebudah I think you can set the blank string to span with id file-chosen

Collapse
 
vidhyanand profile image
Vidhyanandcs

I have checked the docs not much browser support

Collapse
 
michael_lev_dbf1756aeed4c profile image
Michael Lev

Your exlanations and demos are very clear and of course very useful.
You succeeded to cover the whole subject.
I used your idea in my code.
You helped me very much!

Collapse
 
peranp profile image
Predrag Peranović

This is nice solution but you can't focus "button" with keyboard.

I used something like this to make focus working:

<input style="display:none" type="file" id="my-file">
<button type="button" onclick="document.getElementById('my-file').click()">Choose file\</button>

Collapse
 
teraprath profile image
Terry

thanks man

Collapse
 
raoul profile image
Raoul

Nice post @faddalibrahim , I like the options this give me :)
Thanks @bugs_bunny too, TIL :)

Collapse
 
pabloverduzco profile image
Pablo

The easier way I found, thank you Faddal.

Collapse
 
panshak profile image
Panshak

Thank you very much.
This is quite helpful

Collapse
 
vidhyanand profile image
Vidhyanandcs

was helpful. thanks

Collapse
 
newbietothis profile image
Newbie

Hi Faddal
Thank you for your code. I am new to trying to make an upload button work.

Can you please advise what the code would be to finish off the process, eg the file is selected, can you please let me know what the code is to actually submit/upload the file.

Does it need another button to press submit, and can you please also advise where the file is uploaded to, can I create another folder on the server that the uploaded files go into. Will it let the person know who is uploading the file that their file was uploaded successfully?

I would be most grateful if you could help me understand what code I need to have to get the file actually uploaded and where it is uploaded to.

Many thanks for your help in advance

Collapse
 
tracyv profile image
Tracy Valentine

How you direct upload button to a folder to put files

Collapse
 
safwantaliparamba profile image
Safwan

saved my time šŸ„°

Collapse
 
joshthecodingaddict profile image
Joshua Hassan

Thanks this was super helpful

Collapse
 
naveen_nandhakumar_0810c profile image
Naveen Nandha Kumar

Nice ideas