Hey friends, today in this blog, you’ll learn how to Download Any File From URL with Vanilla JavaScript. In the earlier blog, I shared how to Build A File Uploader with JavaScript, and now it’s time to create a File Downloader from the URL.
This tool (File Downloader) can download any file like image, video, pdf, svg, etc. Users have to paste a valid URL of the file and click the download button to download the file. Remember, the file should be publicly accessible to download.
This file downloader is made with pure JavaScript no server-side language is used to create it. You can see a demo or full video tutorial of this File Downloader with Vanilla JavaScript.
Video Tutorial of File Downloader with Vanilla JavaScript
In the above video, you’ve seen the demo of the file downloader and how I made it using HTML CSS & Vanilla JavaScript. As you have seen, I didn’t use any server-side language to make it.
If you liked this file downloader and want to get source codes or files, you can easily get them from the bottom of this page. But, before you download the files, let’s talk about the codes and concepts behind creating this file downloader with JavaScript.
At first, I got the user entered file URL, and using fetch() API, I fetched the file. Once I got a response, I return the response as a blob() and in another then method, I got an object that contains details of the file.
Then, using URL.createObjectURL() method, I created a URL of that file object. This URL is stored in the document window. At last, I created a <a> tag and stored the URL as the href value of this tag, and click it so the file download. Watch the above video for a detailed explanation of each JavaScript line.
Note: If you get a cors (cross-origin resource sharing) error in the console during file downloading, that means the browser blocked the request because the requested site doesn’t allow you to access that file.
You might like this:
- File Uploader with JavaScript
- QR Code Generator in JavaScript
- Drag & Drop File Upload JavaScript
- Text To Speech Converter JavaScript
Download File From URL with JavaScript [Source Codes]
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 into your file. You can also download the source code files of this File Downloader from the below download button.
First, create an HTML file with the name index.html and paste the given codes into your HTML file. Remember, you’ve to create a file with .html extension.
<!DOCTYPE html>
<!-- Coding By CodingNepal - youtube.com/codingnepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>File Downloader in JavaScript| CodingNepal</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="wrapper">
<header>
<h1>File Downloader</h1>
<p>Paste url of image, video, or pdf to download. This tool is made with vanilla javascript.</p>
</header>
<form action="#">
<input type="url" placeholder="Paste file url" required>
<button>Download File</button>
</form>
</div>
<script src="script.js"></script>
</body>
</html>
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
/* Import Google Font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
padding: 0 10px;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #4285F4;
}
.wrapper{
max-width: 500px;
background: #fff;
border-radius: 7px;
padding: 20px 25px 15px;
box-shadow: 0 15px 40px rgba(0,0,0,0.12);
}
header h1{
font-size: 27px;
font-weight: 500;
}
header p{
margin-top: 5px;
font-size: 18px;
color: #474747;
}
form{
margin: 20px 0 27px;
}
form input{
width: 100%;
height: 60px;
outline: none;
padding: 0 17px;
font-size: 19px;
border-radius: 5px;
border: 1px solid #b3b2b2;
transition: 0.1s ease;
}
form input::placeholder{
color: #b3b2b2;
}
form input:focus{
box-shadow: 0 3px 6px rgba(0,0,0,0.13);
}
form button{
width: 100%;
border: none;
opacity: 0.7;
outline: none;
color: #fff;
cursor: pointer;
font-size: 17px;
margin-top: 20px;
padding: 15px 0;
border-radius: 5px;
pointer-events: none;
background: #4285F4;
transition: opacity 0.15s ease;
}
form input:valid ~ button{
opacity: 1;
pointer-events: auto;
}
Last, create a JavaScript file with the name script.js and paste the given codes in your JavaScript file. Remember, you’ve to create a file with .js extension.
const fileInput = document.querySelector("input"),
downloadBtn = document.querySelector("button");
downloadBtn.addEventListener("click", e => {
e.preventDefault();
downloadBtn.innerText = "Downloading file...";
fetchFile(fileInput.value);
});
function fetchFile(url) {
fetch(url).then(res => res.blob()).then(file => {
let tempUrl = URL.createObjectURL(file);
const aTag = document.createElement("a");
aTag.href = tempUrl;
aTag.download = url.replace(/^.*[\\\/]/, '');
document.body.appendChild(aTag);
aTag.click();
downloadBtn.innerText = "Download File";
URL.revokeObjectURL(tempUrl);
aTag.remove();
}).catch(() => {
alert("Failed to download file!");
downloadBtn.innerText = "Download File";
});
}
Now you’ve successfully created a File Downloader in HTML CSS & JavaScript that downloads files from the URL. If your code doesn’t work or you’ve faced any problems, please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.
