Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Upload from local drive to local filesystem in HTML with Filesystem API
To upload files from your local drive to the local filesystem in the browser, HTML5 provides several powerful APIs that work together. This approach uses the webkitdirectory attribute, Filesystem API, and File API to create a complete file handling solution.
Required APIs
Three main APIs enable this functionality:
- webkitdirectory attribute - Allows users to select entire directories through a file dialog
- Filesystem API - Creates a sandboxed filesystem for storing files on the client's machine
- File API - Enables reading and processing selected files
These APIs work best in Chromium-based browsers like Google Chrome and Edge.
Setting Up the Filesystem
First, initialize the sandboxed filesystem with a size limit:
<script>
var fs;
var err = function(error) {
console.error("Filesystem error:", error);
};
// Request 5MB of temporary storage
webkitRequestFileSystem(
window.TEMPORARY,
5 * 1024 * 1024,
function(_fs) {
fs = _fs;
console.log("Filesystem ready");
},
err
);
</script>
HTML File Input with Directory Support
Create an input element that accepts directory selection:
<!DOCTYPE html>
<html>
<head>
<title>Directory Upload Example</title>
</head>
<body>
<input type="file" id="fileInput" webkitdirectory multiple>
<div id="output"></div>
<script>
var fs;
var err = function(error) {
console.error("Error:", error);
};
// Initialize filesystem
webkitRequestFileSystem(
window.TEMPORARY,
5 * 1024 * 1024,
function(_fs) {
fs = _fs;
console.log("Filesystem initialized");
},
err
);
// Handle file selection
document.getElementById('fileInput').addEventListener('change', function(e) {
var files = e.target.files;
var output = document.getElementById('output');
output.innerHTML = '<h3>Selected Files:</h3>';
for (var i = 0; i < files.length; i++) {
var file = files[i];
output.innerHTML += '<p>' + file.webkitRelativePath + ' (' + file.size + ' bytes)</p>';
// Copy file to local filesystem
copyToLocalFS(file);
}
});
function copyToLocalFS(file) {
if (!fs) {
console.log("Filesystem not ready");
return;
}
fs.root.getFile(file.name, {create: true}, function(fileEntry) {
fileEntry.createWriter(function(fileWriter) {
fileWriter.write(file);
console.log("File saved:", file.name);
}, err);
}, err);
}
</script>
</body>
</html>
Key Attributes and Properties
| Attribute/Property | Purpose | Browser Support |
|---|---|---|
webkitdirectory |
Enables directory selection | Chrome, Edge |
webkitRelativePath |
Shows file path within selected directory | Chrome, Edge |
multiple |
Allows multiple file selection | All modern browsers |
Browser Compatibility
The Filesystem API has limited browser support and is deprecated in favor of newer storage solutions. For production applications, consider using:
- IndexedDB - For structured data storage
- Web Storage API - For simple key-value storage
- File System Access API - Modern replacement (Chrome 86+)
Conclusion
While the webkitdirectory attribute and Filesystem API provide directory upload capabilities, they have limited browser support. Consider modern alternatives like the File System Access API for new projects requiring broader compatibility.
266 Views
