Download Any File From URL with Vanilla JavaScript

5

Download Any File From URL with Vanilla JavaScript Download Image or Video in HTML CSS & JavaScript

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:

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.

 

Previous articleCreate Accordion in HTML CSS & JavaScript
Next articleMake a Website in HTML CSS & JavaScript | Website with Source Code

5 COMMENTS

  1. We are building platform for download YouTube video and from backend we got below link but facing CORS origin issue. but when we direct open this URL then it’s work well.

    Access to fetch at ‘https://rr7—sn-ci5gup-5hql.googlevideo.com/videoplayback…..’ from origin ‘null’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

  2. I want to download Snapchat videos and stories, but it’s not working ? Kindly guide, or please make a Snapchat video downloader. Thank You

  4. I just notice an error said in the console: Access to fetch at ‘https://www.youtube.com/watch?v=qXSbp3exTJI&ab_channel=anonymide’ from origin ‘null’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

    • Yes, YouTube doesn’t allow to access videos. You can download any other images or videos which are publicly accessible. Remember, you’ve to paste a valid file URL to download.

LEAVE A REPLY

Please enter your comment!
Please enter your name here