D4mations.com

Javascript Tutorial – Custom File Upload Button | HTML + CSS



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

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.

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

d4mer

, , , , , , , , , , , , , , , , , ,

26 responses to “Javascript Tutorial – Custom File Upload Button | HTML + CSS”

  8. 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";
    }
    }

    “`

  13. 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. 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

  20. 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. 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.

  26. 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 Reply