DEV Community

Cover image for How to create a custom file upload button
Faddal Ibrahim
Faddal Ibrahim

Posted on • Updated on

How to create a custom file upload button

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 custom file upload button.

1. Use a label tag and point its for attribute to the id of the default HTML file upload button

<!--default html file upload button-->
<input type="file" id="actual-btn"/>

<!--our custom file upload button-->
<label for="actual-btn">Choose File</label>
Enter fullscreen mode Exit fullscreen mode

By doing this, clicking the label element in the browser toggles the default HTML file upload button (as though we clicked it directly).

The output of the above code is below. As you can see, we only have a Choose File text (from the label element) a few pixels to the right of the actual upload button.

We can click the Choose File text, and it will toggle the upload window (Click it and see)

2. Style the label element and hide the default HTML file upload button

We hide the default HTML file upload button in the browser by adding the hidden attribute to the tag like so

<input type="file" id="actual-btn" hidden/>
Enter fullscreen mode Exit fullscreen mode

Now we style the label element to look more like a button.

label {
  background-color: indigo;
  color: white;
  padding: 0.5rem;
  font-family: sans-serif;
  border-radius: 0.3rem;
  cursor: pointer;
  margin-top: 1rem;
Enter fullscreen mode Exit fullscreen mode

Now we have this beautiful custom button, which actually works like the original file upload button:

At this point, we are done. But there is one more glitch to fix.

With the default file upload button, there is a no file chosen text beside the button (scroll up to the first codepen window), which gets replaced with the name of the file we will be uploading. Unfortunately, we don't get to see that with our custom button. How do we do that?

What I did was to include a span tag (with an id of file-chosen) right after our custom file upload button.

In the javascript file, I listen to the change event on the original file upload button(which we have hidden). A file object is returned which contains the details(such as name, file size etc) of the file uploaded.

Then I set the text content of the span element(with the id of file-chosen) to the name property of the file object returned. The final result is below. Test it out.

Kindly leave your comments and questions down below

Top comments (16)

bugs_bunny profile image
Derek Oware • Edited

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

faddalibrahim profile image
Faddal Ibrahim

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

davebudah profile image
Dave Budah

But it wont hide the "no file chosen label

sampatbadhe profile image
Sampat Badhe

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

haribhusal profile image
Hari Bhusal

Thanks man

vidhyanand profile image

I have checked the docs not much browser support

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>

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!

newbietothis profile image

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

teraprath profile image

thanks man

pabloverduzco profile image
Pablo Verduzco

The easier way I found, thank you Faddal.

panshak profile image

Thank you very much.
This is quite helpful

vidhyanand profile image

was helpful. thanks

raoulcapello profile image
Raoul Capello

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

joshthecodingaddict profile image
Joshua Hassan

Thanks this was super helpful

safwantaliparamba profile image

saved my time 🥰