How to Download Any File From URL
with HTML,CSS, JavaScript
This device (Document Downloader) can download any record like picture, video, pdf, svg, and so on. Clients need to glue a substantial URL of the record and tap the download button to download the document. Keep in mind, the document ought to be freely open to download.This record downloader is made with unadulterated JavaScript no server-side language is utilized to make it.
Video Tutorial of Any File Downloader From URL
Any File Downloader From URL [Source Codes]
To Create A Any File Downloader From URL follow the given steps line by line:
Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be style and its extension .js
Once you create these files, paste the given codes into the specified files. If you don’t want to do these then download the source code.
First, paste the following codes into your index.html file
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <title>All File Downloader</title>
- <link rel="stylesheet" href="style.css">
- </head>
- <body>
- <div class="wrapper">
- <header>
- <h1>All in One Downloader</h1>
- <p>Downloader image, video, or pdf.</p>
- </header>
- <form action="#">
- <input type="url" placeholder="Paste url of image, video, or pdf" required>
- <button>Download File</button>
- </form>
- </div>
- <script src="script.js"></script>
- </body>
- </html>
Now paste the following codes into your style.css file
- *{
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- font-family:monospace;
- }
- body{
- display: flex;
- padding: 0 10px;
- align-items: center;
- justify-content: center;
- min-height: 100vh;
- background: #282A35;
- }
- .wrapper{
- max-width: 500px;
- background: #f9f9f9;
- border-radius: 7px;
- padding: 20px 25px 15px;
- box-shadow: 0 15px 40px rgba(0,0,0,0.1);
- }
- header h1{
- font-size: 30px;
- font-weight: 600;
- }
- header p{
- margin-top: 5px;
- font-size: 18px;
- color: #606060;
- }
- 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.15);
- }
- form button {
- width: 100%;
- border: none;
- outline: none;
- color: #fff;
- cursor: pointer;
- font-size: 20px;
- margin-top: 20px;
- padding: 15px 0;
- border-radius: 5px;
- pointer-events: none;
- background: #4285F4;
- transition: background-color 0.3s ease;
- }
-
- form input:valid ~ button{
- opacity: 1;
- pointer-events: auto;
- }
Now paste the following codes into your script.js file
- 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";
- });
- }
If you face any difficulties while creating Any File Downloader From URL with JavaScript or your code is not working as expected, you can download the source code files by clicking download button.