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">
    <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">
    <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>

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

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;

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


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

    color: white;
    margin-bottom: 15px;
    color: white;
    margin-bottom: 15px;


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

    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)=>{

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

    .then(file => {
        let tURL = URL.createObjectURL(file);
        let aTag = document.createElement("a");
        aTag.href = tURL; = "file name";


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

online educate
We will be happy to hear your thoughts

Leave a reply

Udemy Free Coupons