Custom File Upload Button with FileList - HTML, CSS & JavaScript Tutorial

Link to code:

In this video tutorial I'll be showing you how to create a completely custom file upload button from scratch using HTML, CSS and JavaScript (with FileList).

This is a follow up to my previous video on creating a file upload button with a regular expression.

Support me on Patreon:

For your reference, check this out:

Follow me on Twitter @dcodeyt!

If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!

#javascript #webdev #dcode

[MuhammadAli-hurz]

Amazing tutorial, Well explained. explained everything. I was not able to find better tutorial anywhere else. It is difficult to create a tutorial with such a great quality.

[TomasMisura]

thanks a lot for this tutorial, I use something similiar but i have learned something new with a different aproach and i am glad for that.

[farhadcohan]

Thanks I’ve watched many of your videos but your are one of the best I like the fact you explain reasons for every step of codes I’m searching to watch more of your videos if you have more! I have subscribe and like 👍 few I watch so far one question? under what name if someone try to find your video because I would like recommend you to friends.👌🤙

[mukeshpandey]

thank you very much for this awesome tutorial...

[nimeshvishwakarma]

Subscribed bro make awesome videos like this! Love u bruh

[theseusRJ]

I loved your content and classic keyboard noice

LMAO..

[yunokawaii]

Awesome Video :3 I like the way u are working ^^ ty very much

[ColourboyBlack]

If i was using Adobe Acrobat Pro Forms, Which part of this will I use to make this button work in the Javascript and the Document Javascript ? Please advise.

[sbmahapatra]

Where the file will go from the drop box? I mean to say what is the upload path?

Very goog toturial.
Can you please explain why not to use the input as your button and style it as your button, instead of creating a button and hidding the input?

[douglasmcdougal]

Do you have a video on how to create the PHP page to actually upload the file from the files collected from your button? I subscribed and joined.

[ReactanceIsFutile]

Graphically, it's great, but how do you actually get the files once you press Submit in a real form? $_FILES array is empty in PHP and the $_POST array only has 'Submit' in it....

[daiwik_yt]

I am on Mac and the code is working but the problem is that when you click chose file I cannot chose a file

[mohammadalkhaled]

you are amazing
thank you so much for your explanation

[flcordis]

Hey, i need to create a real-time chat with this function, but the people on the chat need to download my uploaded file.... can u help me?

[mohammadalongan]

Nice tutorial, how can I add remove function to remove a file uploaded?

[lightmare]

but how i can make upload button like put in to my domain.. and can download it?

[sal]

The hidden attribute does not work when I add external custom style sheets. There appears to be some conflict. How can I get it to ignore the style sheet?
Thanks for the awesome video!

[DamonMedekMusic]

but you can't go to another computer and download the file. I don't see anyway to download even on your codepen. I mean its cool but whats the point of showing us how to upload if we can't download it afterwards.

[elkhanismayilov]

hi thank you so much easy explain like difficult language javascript. bu i have a question for you. how can we make turkish characters for trigger name during file upload like this ƏÖÜ