Introduction to File URL API
The File URL API is a critical aspect of web development, enabling developers to create, manage, and manipulate file URLs seamlessly. In this guide, we will delve into dozens of useful API explanations with practical code snippets to improve your understanding and implementation of File URLs. Let’s get started!
Creating a Blob URL
To create a Blob URL from a File object:
const file = new File(["Hello, world!"], "hello.txt", {
type: "text/plain",
});
const url = URL.createObjectURL(file);
console.log(url);
Revoking a Blob URL
Don’t forget to revoke Blob URLs that you no longer need:
URL.revokeObjectURL(url);
console.log('Blob URL revoked:', url);
FileReader API Example
Read the contents of a file using the FileReader API:
const reader = new FileReader();
reader.onload = function(event) {
console.log(event.target.result);
};
reader.readAsText(file);
Downloading a File Using a Blob URL
Create a download link for a Blob URL:
const downloadLink = document.createElement('a');
downloadLink.href = url;
downloadLink.download = 'hello.txt';
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
Example Web Application Utilizing File URL API
Here’s a simple web application example to demonstrate how to use File URL API. The app allows users to upload a file, display its content, and download it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>File URL API Example</title>
</head>
<body>
<input type="file" id="fileInput" />
<pre id="fileContent"></pre>
<button id="downloadBtn">Download File</button>
<script>
const fileInput = document.getElementById('fileInput');
const fileContent = document.getElementById('fileContent');
const downloadBtn = document.getElementById('downloadBtn');
fileInput.addEventListener('change', function(event) {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
fileContent.textContent = e.target.result;
};
reader.readAsText(file);
downloadBtn.onclick = function() {
const url = URL.createObjectURL(file);
const a = document.createElement('a');
a.href = url;
a.download = file.name;
a.click();
URL.revokeObjectURL(url);
};
}
});
</script>
</body>
</html>
By using the above APIs, you can enhance your web applications to provide more robust file handling capabilities. Whether you’re creating simple tools for single-file uploads or complex systems for file management, mastering these APIs will significantly improve your development skills.
Happy coding!
Hash: 30a597850662126fb46ffcf26875d9281970478eaa5a8801d5a883bcd110c93e
