How to create a file downloader via url using pure javascript

Whats up associates, at the moment on this weblog you’ll discover ways to create a file downloader by way of URL utilizing pure Javascript. In our earlier weblog, we noticed how to create drag & drop or sortable lists using HTML, CSS, and Sortable JS. Earlier, I shared many tasks associated to javascript, you possibly can test if you’d like, and do not forget to test HTML, CSS, and Javascript projects.

This device (File Downloader by way of URL) can obtain any file like picture, video, pdf, SVG, and so forth. Customers have to stick a sound URL of the file and click on the obtain button to obtain the file. Keep in mind, the file must be publicly accessible to obtain.

At first, I bought the person entered file URL, and utilizing fetch() API, I fetched the file. As soon as I bought a response, I return the response as a blob() and in one other then methodology, I bought an object that comprises particulars of the file.



It’s possible you’ll like these:

Then, utilizing URL.createObjectURL() methodology, I created a URL of that file object. This URL is saved within the doc window. Eventually, I created a <a> tag and saved the URL because the href worth of this tag, and click on it so the file obtain. Watch the above video for an in depth rationalization of every JavaScript line.

Be aware: For those who get a cors (cross-origin useful resource sharing) error within the console throughout file downloading, meaning the browser blocked the request as a result of the requested website doesn’t permit you to entry that file.

This file downloader is made with pure JavaScript no server-side language is used to create it. For those who preferred it and wish to create So you possibly can test the supply code or preview.

The Preview is out there here.



HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta title="viewport" content material="width=device-width, initial-scale=1.0">
    <title>Obtain Any File By URL Utilizing Javascript - InCoder</title>
    <hyperlink rel="stylesheet" href="https://style-tricks.com/incoderweb/predominant.css">
    <hyperlink rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
</head>
<physique>
    <div class="container">
        <div class="title">File Downloader by way of URL</div>
        <p>Paste url of any picture, video or PDF to Obtain. This device is made with pure Javascript</p>
        <kind id="fileDownloader">
            <div class="formInput">
                <i class="fa-solid fa-link"></i>
                <enter sort="textual content" id="fileURL" placeholder="Paste the URL" oninvalid="this.setCustomValidity('Enter a sound URL')" required />
            </div>
            <button sort="submit">Obtain</button>
        </kind>
    </div>

    <script src="script.js"></script>
</physique>
</html>
Enter fullscreen mode

Exit fullscreen mode



CSS Code

/* ------------------------ Created By InCoder ------------------------ */

@import url("https://fonts.googleapis.com/css2?household=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&show=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

physique {
  top: 100vh;
  show: flex;
  align-items: heart;
  justify-content: heart;
  background-color: #015d52;
}

.container {
  padding: 0.5rem;
  border-radius: 0.5rem;
  background-color: #fff;
  width: clamp(18rem, 45vw, 25rem);
}

.container .title {
  font-weight: 600;
  colour: #202020;
  text-align: heart;
  font-size: clamp(1rem, 4vw, 1.6rem);
}

.container p {
  font-size: 0.9rem;
}

.container button[type="submit"] {
  border: 0;
  width: 100%;
  opacity: 0.9;
  colour: #fff;
  top: 2.5rem;
  cursor: pointer;
  font-size: 1rem;
  margin-top: 0.8rem;
  border-radius: 0.3rem;
  background-color: #015d52;
  transition: opacity 0.2s ease-in-out;
}

.container button[type="submit"]:hover {
  opacity: 1;
}

.formInput enter {
    border: 0;
    width: 100%;
    top: 100%;
    margin-left: .3rem;
}

.formInput enter::placeholder {
    colour: #4e4e4ed4;
}

.formInput {
  margin-top: .8rem;
  width: 100%;
  show: flex;
  top: 2.5rem;
  padding: .2rem;
  colour: #4e4e4ed4;
  align-items: heart;
  border-radius: .3rem;
  border: 2px strong #4e4e4ed4;
}

.formInput enter:focus {
    define: none;
}
Enter fullscreen mode

Exit fullscreen mode



Javascript Code

let kind = doc.querySelector('#fileDownloader')
downloadBtn = kind.querySelector('button')

kind.addEventListener('submit', e => {
    e.preventDefault()
    let inputURL = e.goal.querySelector('#fileURL').worth.trim()
    downloadBtn.innerText="Downloading File Please Wait...."
    downloadBtn.setAttribute('disabled', 'disabled')
    getFile(inputURL)
})

const getFile = (url) => {
    fetch(url).then(response => response.blob()).then(file => {
        let tempLink = URL.createObjectURL(file)
        let anchorTag = doc.createElement('a')
        anchorTag.href = tempLink
        anchorTag.obtain = url.change(/^.*[/]/, '')
        doc.physique.appendChild(anchorTag)
        anchorTag.click on()
        downloadBtn.innerText="Obtain File"
        downloadBtn.removeAttribute('disabled', 'disabled')
        URL.revokeObjectURL(tempLink);
        anchorTag.take away();
    }).catch(() => {
        alert("Unable to obtain file!");
        downloadBtn.innerText = "Obtain File";
        downloadBtn.removeAttribute('disabled', 'disabled')
    })
} 
Enter fullscreen mode

Exit fullscreen mode

Add a Comment

Your email address will not be published. Required fields are marked *