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.

Online Educate
We will be happy to hear your thoughts

Leave a reply

Online Educate
Logo
Enable registration in settings - general