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.
