Vanilla JavaScript (Pure JS) is used to handle the downloading functionality in an application to download any file from a URL application with Vanilla JavaScript language. In this application, There is a styled card component that has the input field to accept the valid file URL. Once the user enters the URL and clicks on the Download button, the file is been downloaded to the local drive. As there is no server involved in the application, the application restricts the downloading of CORS-added content. We can download images and videos which are not restricted.
Preview Image:
Prerequisites:
Approach:
- Create an HTML file with the necessary structure. Include links to external CSS stylesheets, JavaScript files, and external libraries (like Font Awesome and Animate.css).
- Using the <div> with the class card, the elements like the input field and button are wrapped into the card component.
- Once the structure is completed, in the CSS styling file, the entire card component along with UI elements is designed by using various styling properties.
- Implement the JavaScript functions (downFn, extFn) to handle the user input, and file downloading functionality and validate the file extension.
- Conditional statements are used to handle the errors and display user-friendly error messages.
Project Structure:
Example: In this example, we will see the implementation of the Download Any File From URL Application with Vanilla JavaScript.
Javascript
// app.jsconst userIP = document.getElementById("fileUrl");
const dBtn = document.getElementById("downloadBtn");
const errMsg = document.getElementById("error-message");
dBtn.addEventListener("click", (e) => {
e.preventDefault();
dBtn.innerText = "Downloading file...";
downFn(userIP.value);
});function downFn(url) {
const pattern = /^(ftp|http|https):\/\/[^ "]+$/;
if (!pattern.test(url)) {
errMsg.textContent = "Wrong URL Entered";
dBtn.innerText = "Download File";
return;
}
errMsg.textContent = "";
fetch(url)
.then((res) => {
if (!res.ok) {
throw new Error("Network Problem");
}
return res.blob();
})
.then((file) => {
const ex = extFn(url);
let tUrl = URL.createObjectURL(file);
const tmp1 = document.createElement("a");
tmp1.href = tUrl;
tmp1.download = `downloaded_file.${ex}`;
document.body.appendChild(tmp1);
tmp1.click();
dBtn.innerText = "Download File";
URL.revokeObjectURL(tUrl);
tmp1.remove();
})
.catch(() => {
errMsg.textContent =
"Cannot Download Restricted Content!";
dBtn.innerText = "Download File";
});
}function extFn(url) { const match = url.match(/\.[0-9a-z]+$/i);
return match ? match[0].slice(1) : "";
} |
HTML
<!DOCTYPE html><head>
<title>GFG</title>
<link rel="stylesheet" href=
<link rel="stylesheet" href=
<link href=
rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="card">
<i class="fas fa-download"></i>
<h2 style="color: green;">
GeeksforGeeks File Downloader
</h2>
<p>Enter File URL:</p>
<input type="url" id="fileUrl"
placeholder="Enter file URL" required>
<button onclick="downFn()" id="downloadBtn">
Download
</button>
<div id="error-message"></div>
</div>
<script src="app.js"></script>
</body>
</html>
|
CSS
body { font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background: linear-gradient(135deg, #dbbc34, #8e44ad);
}.card { background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
text-align: center;
max-width: 400px;
width: 100%;
animation: fadeInUp 1.5s ease-out;
}.card i { font-size: 3em;
color: #64f710;
}.card p { margin: 10px 0;
}input { width: 100%;
padding: 10px;
margin-bottom: 10px;
box-sizing: border-box;
}button { background-color: #ff0000;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s;
}button:hover { background-color: #00fff2;
}#error-message { color: #e74c3c;
margin-top: 10px;
} |