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: – with enough funding I plan to develop a website of some sort with a new developer experience!

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

By admin

26 thoughts on “Custom File Upload Button with FileList – HTML, CSS & JavaScript Tutorial”
  1. 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.

  2. 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!

  3. Hi! Sorry if this sounds like a silly question but I'm trying to make a website that allows a user to customize an object using their uploaded image. (eg a book cover, and you upload your own image and it displays on the cover) I don't really know how to do this though and it seems like I keep googling the wrong thing, please advise and thanks!

  4. 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….

  5. now after this how to save it on the DATABASE? LOCALLY. MONGO DATABASE LOCAL. create new folder PATH please!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! please. for BACKEND PROGRAMMING NOOBS help us!!!!!!!

  6. 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?

Leave a Reply

Your email address will not be published.