Javascript Tutorial - Custom File Upload Button | HTML + CSS

Regular Expression: /[\/\\]([\w\d\s\.\-\(\)]+)$/

This code is now downloadable!

In this video I take you through how to create your own custom file upload buttons using only HTML, CSS and Javascript, no frameworks required!

We can do this by 'virtually' clicking on a hidden default file upload button and then extract the value of the real file upload button and plant it into a custom-defined span tag.

0:00 Overview
0:22 Starting on the HTML
1:58 Adding the CSS
3:55 Writing the JavaScript
7:52 Wrapping up

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

#dcode #javascript #css

[dcode-software]

[2019 UPDATE]

Check out my updated video, using FileList instead of the regular expression 😁

[yuripalienko]

Thank you for the regular expression in the video description!

[huckfaters]

Better approach would be to use <label></label>, great video btw.

Edit:for showing the name of file you could use the split method and split with "/" and pop last index from the array. And pass it to innerHtml.

[internetrelationship]

thank you dude i many times trying custom file button in css but now javascript make it easy.. so thankyou for trigger...

you are a new youtuber so i hope very soon you will get a one million sub. on your channal keep it up...

[TomasMisura]

this tutorial is working with a charm :)

[elkhanismayilov]

you are very very excellent bro. I really appreciate your every single video. thank you so much

[winnerincrease]

I really like your theme on atom looks simple and nice
I really love your tutorial thanks alot

[alfredotiapa]

Bro you're the best, I was searching all day this, thanks you so much

[annagardt]

Cool!!!! Despite the fact that I do not know English. I've understood. In your video you explain very clearly.

[sparshgupta]

sir plz keep uploading these type of videos, your videos are short as well as explanations are good

[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!

[dcode-software]

For more JavaScript and Web Development tutorials, check out my 110+ video Web Development playlist on my channel 😁 subscribe while you're over there!

[neuaction]

if i upload a video would i be able to watch it? could you please help, out of curiosity i want to make a website by myself and would be nice to add an upload button to the website but what i am curious about is that how would it be possible to watch videos, how to programming it?

[zachfenton]

this is good, but how would one save the file? I would assume that there has to be some node js, python (django) added to save it to a server .

[jimh]

very useful. just added it to my project

[christmastracksofficial]

@dcode Thank you for that tutorial. Now I just need a downloadbutten to download this files tutorial

[himanshuneegex]

i used this and work perfectly..its really very good.

[zenan.bamboat]

how do I save this uploaded file into a folder?

[just]

Hello, thanks a lot it helped. But l do have a question is it possible to create a file upload where a user uploads a file and it gets stored in the database and regenerated to appear on the site for other users to see?

[kirakira]

This queation might be stupid, but is it possible for a website to steal my local files through the choose file button?