JavaScript Project With Source Code to Build your Skills

File Downloader in HTML, CSS & JavaScript [Source Codes]

I’ve shown you how to build a File Downloader with Vanilla JavaScript. This tool is made with pure JavaScript no server-side language is used to create it. To download a file, you’ve to paste a valid URL of the file and click the download button. The file should be publicly accessible to download.

To create a File Downloader in JavaScript. First, you need to create three Files: HTML, CSS & JavaScript File. After creating these files just paste the given codes.

First, create an HTML file with the name index.html and paste the given codes into your HTML file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>File Downloader</title>
    <link rel="stylesheet" href="style.css">
    
</head>
<body>
    <div class="container">
        <h1>File Downloader</h1>
        <p>Lorem ipsum dolor sit amet consectetur.</p>
        <form action="">
            <input type="text" placeholder="Paste File Url">
            <button>Download File</button>
        </form>
    </div>
    

    <script src="javascript.js"></script>
</body>
</html>


Second, create a CSS file with the name of style.css and paste the given codes in your CSS file.

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    background: #dfe;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;

}

.container{
    background-color: #4285df;
    width: 450px;
    height: 300px;
    border-radius: 15px;
    padding: 20px 25px 15px;
    
}

h1{
    color: white;
    margin-bottom: 15px;
}
p{
    color: white;
    margin-bottom: 15px;

}

form input{
    width: 100%;
    height:45px;
    outline: none;
    padding-left: 10px;
    margin-bottom: 10px;
}

button{
    width: 100%;
    height: 30px;
    outline: none;
    background-color: #dfe;
    color: black;
    font-weight: 500;
    border: none;
    cursor: pointer;
}

then create a JavaScript file with the name javascript.js and paste the given codes in your JavaScript file.

const formV = document.querySelector("input");
const btn = document.querySelector("button");

btn.addEventListener("click" , (e)=>{
    e.preventDefault();
    
    filefetch(formV.value);
})

function filefetch(url){
    fetch(url)
    .then(resp => resp.blob())


    .then(file => {
        let tURL = URL.createObjectURL(file);
        let aTag = document.createElement("a");
        aTag.href = tURL;
        aTag.download = "file name";
        document.body.appendChild(aTag);
        aTag.click();
        aTag.remove();
        URL.revokeObjectURL(tURL);

    })
}

now you’ve successfully created a File Downloader in HTML CSS & JavaScript.

WebHelperApp

WebHelperApp

Rely on the Coupon WebHelperApp team's decade of expertise in sourcing 100% off Udemy coupons. Our commitment includes rigorous verification and daily updates to ensure a reliable assortment of fully functional coupon codes. We specialize in promptly uncovering fresh offers, often with limited availability, necessitating swift action on your part.

We will be happy to hear your thoughts

Leave a reply

Free udemy coupons
Logo