• Wednesday , 3 June 2020

Javascript Tutorial – Custom File Upload Button | HTML + CSS

Code Canyon



Regular Expression: /[/\]([wds.-()]+)$/

This code is now downloadable!
https://codepen.io/dcode-software/pen/RerBgR

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.

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

Original source

3d Ocean

Related Posts

26 Comments

  1. dcode
    April 23, 2019 at 05:08

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

  2. Tùng Lê
    April 23, 2019 at 05:08

    your video very useful, it makes me understand thank you 🤞 ah.. can you give me the font in Atom ?, please

  3. James Portman
    April 23, 2019 at 05:08

    how do i then use the uploaded file?

  4. Fox Nation
    April 23, 2019 at 05:08

    I subscribed. Thanks. I needed a custom button. So thanks again.

  5. Fuffi 2T
    April 23, 2019 at 05:08

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

  6. Erik Serna Vite
    April 23, 2019 at 05:08

    Muchas gracias 👍

  7. fim h
    April 23, 2019 at 05:08

    very useful. just added it to my project

  8. Tate A
    April 23, 2019 at 05:08

    I chaged up the javascript a bit so it can handl multiple files.

    “`

    function _(eID) {
    return document.getElementById(eID);
    }

    function selectFiles() {
    _("get-files").click();
    }

    function addFileNames() {
    if (_("get-files").value) {
    if (_("get-files").files.length > 1) {
    _("upload-files-names").innerHTML = _("get-files").files.length + " Files";
    } else {
    _("upload-files-names").innerHTML = _("get-files").value.match(/[/\]([wds.-()]+)$/)[1];
    }

    } else {
    _("upload-files-names").innerHTML = "No File Selected";
    }
    }

    “`

  9. Mustafa kamal
    April 23, 2019 at 05:08

    Wow thank you brother.God bless u

  10. John Erick Marzo
    April 23, 2019 at 05:08

    Wheres the upload button?

  11. Manoranjana Bandara
    April 23, 2019 at 05:08

    Hello, can i know what theme and font you are using for atom?

  12. Erick Servin
    April 23, 2019 at 05:08

    I believe you could use HTMLInputElement.files property instead of that whole regex thing and get also the lastModified, lastModifiedDate, size and type

  13. Sufian Rashidi
    April 23, 2019 at 05:08

    Decode I have a question for you:

    I am not exactly sure when I upload docx or doc file why do i get garbage characters when i read the content on the docx/doc file. What am I doing wrong however text file content is reading fine with filereader(). Please help.

    Here is the garabage characters:

    ��ࡱ�>�� .0����-��������������������

    Here is javascript code.

    const File = document.getElementById("file");

    const Btn = document.getElementById("button");

    const Txt = document.getElementById("text");

    Btn.addEventListener("click", function() {

    File.click();

    });

    File.addEventListener("change", function() {

    if (File.value) {

    Txt.innerHTML = File.value.match(

    /[/\]([wds.-()]+)$/

    )[1];

    } else {

    Txt.innerHTML = "No file chosen, yet.";

    }

    const file = document.getElementById("file").files[0];

    if (file) {

    const reader = new FileReader();

    reader.readAsText(file);

    reader.onload = function (evt) {

    document.getElementById("data").innerHTML = evt.target.result;

    }

    reader.onerror = function (evt) {

    document.getElementById("data").innerHTML = "error reading file";

    }

    }

    });

    Here is teh HTMl code:

    <!DOCTYPE html>

    <html lang="en">

    <head>

    <link rel="stylesheet" href="openfile.css">

    <title>Document</title>

    </head>

    <body>

    <input type="file" id="file" hidden="hidden" />

    <button type="button" id="button">Upload</button>

    <span id="text">Upload a Resume</span>

    <p id='data'></p>

    <script src="openfile.js"></script>

    </body>

    </html>

    I would appreciate your guidance.
    Thanks in advance.

  14. shyvha beauregard
    April 23, 2019 at 05:08

    I want to make a system that makes the file pop on a particular page of my website but each users (no log in) have a limited amount of files and size sent per day, and so that after a certain amount of time the file is erased from the website. How do I do that?
    Thanks in advance,
    Shyvha

  15. Samuel Gunter
    April 23, 2019 at 05:08

    Is this code downloadable?

  16. Tier X
    April 23, 2019 at 05:08

    white burn my eyes

  17. Ahmed Hussien
    April 23, 2019 at 05:08

    thanks a lot for this amazing tutorial , its working with me but i need to accept Arabic file names in custom-text area, any help ?

  18. Zarki
    April 23, 2019 at 05:08

    is there a way to make an image into a button? Or have an image execute some script if clicked?

  19. Snake Snoop
    April 23, 2019 at 05:08

    <script>alert("Hello");</script>

  20. Internet Relationship
    April 23, 2019 at 05:08

    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…

  21. Timothy Lee
    April 23, 2019 at 05:08

    Hi…I am trying to use different CSS files for different browsers using Javascript. When a web page is loaded onto a particular browser, the right CSS file is loaded accordingly. I did a research on this and found this script ; although it didn't work. It failed to load the CSS file at all, and displayed the web page as HTML only. I don't know why. Here is the script:

    <script type="text/javascript">

    var browser=navigator.appName;
    if browser == "Microsoft Internet Explorer" {
    document.write("<link type="text/css" rel="stylesheet" href="IE.css">");
    }
    else if browser == "Firefox" {
    document.write("<link type="text/css" rel="stylesheet" href="FF.css">");
    }
    else {
    document.write("<link type="text/css" rel="stylesheet" href="generic.css">");
    }
    </script>

    any help would be appreciated…..Thanks.

  22. Winner Increase
    April 23, 2019 at 05:08

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

  23. Wahaj Zafar
    April 23, 2019 at 05:08

    how to use far fa-square-plus icon to choose file

  24. Tudor Hulban
    April 23, 2019 at 05:08

    thank you

  25. AW Tech
    April 23, 2019 at 05:08

    such a useful material. It helps alot

  26. Shaoin
    April 23, 2019 at 05:08

    You're not doing it the proper way. There is an API for this. The event listener function can have a parameter 'event' which you can then extract the selected file from by typing: event.target.files[0]. Then, if you console.log this, you'll see all the properties for the file like the name, type, size, …etc. If you select multiple files, then event.target.files will have them all.

Leave A Comment

You must be logged in to post a comment.