JavaScript file handling is a technique that allows JavaScript code to interact with files both on the client-side (in web browsers) and on the server-side (with the help of libraries and frameworks like Node.js).
It involves various tasks such as reading file contents, writing data to a file, modifying the file metadata (For example file name, file size, file type), moving, deleting or renaming files, and performing other file-related operations. This is important for web developers as it enables them to create interactive and well-functioning web applications that enhance user experiences. To effectively handle files using JavaScript, advanced techniques and tricks can be utilized to save time and money.
This article attempts to cover some of the advanced techniques and patterns for JavaScript file handling with code examples and the output result.
All codes have been thoroughly tested to ensure their functionality. If you encounter any issues, please feel free to provide feedback in the comment section. However, it is important to prefer secure coding practices when implementing these codes into your web-based programs to ensure the overall security and integrity of your application.
Reading File Contents:
This common task in JavaScript file handling can be achieved by various methods. Here is an example of reading files asynchronously by using FileReader API:
const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', (event) => {
const file = event.target.files[0];
const reader = new FileReader();
reader.onload = (event) => {
const fileContents = event.target.result;
console.log('File contents:', fileContents);
};
reader.readAsText(file);
});
In this example,
the input element with an ID “fileInput" is used to allow users to select a file and when the "change" event is triggered, and a FileReader object is created. For the asynchronous file reading process, the onload event of the FileReader an object is used. The contents of the file are accessed through the utilization of the event.target object, and the readAsText() method is used to read the file contents as text.
In order to generate output from the above code, paste the above JavaScript codes in the place of //Paste the JavaScript code here
<!DOCTYPE html>
<html>
<head>
<title>File Reader Test</title>
</head>
<body>
<input type="file" id="fileInput">
<script>
// Paste the JavaScript code here
</script>
</body>
</html>
Then, create an HTML file and open it on a web browser. Once the JavaScript code is executed, it will allow you to upload a file. Open Console in your web browser using the “Inspect” option, and check the output. You can use different file types to test the output.
The output looks something like this:
Writing Data to a File:
This is another file-handling task which is to write data to a file. On the client side, JavaScript can’t write directly to a file but it can generate a downloadable file with data in it.
Here's an example using the Blob API and the download attribute:
const data = 'This is a sample file content';
const fileName = 'sample.txt';
const blob = new Blob([data], {type: 'text/plain'});
const downloadLink = document.createElement('a');
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = fileName;
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
In this example,
The JavaScript code creates a downloadable Blob Object in a form of a text file by setting up the Blob URL. Once the “Download” is clicked, a file "sample.txt" will be downloaded, and then the link will be removed from the DOM using document.body.removeChild(downloadLink). In order to trigger a click event, downloadLink.click() is used in the JavaScript code.
Follow the same process for the HTML file as above by pasting JavaScript codes as follows:
<!DOCTYPE html>
<html>
<head>
<title>File Download Example</title>
</head>
<body>
<h1>File Download Example</h1>
<button onclick="downloadFile()">Download File</button>
<script>
Paste the JavaScript code here
</script>
</body>
</html>
Here, a "Download File" button is created, and an onclick event handler is attached to it. When the button is clicked, the downloadFile() function is executed which contains the JavaScript code for generating and triggering the file download using the Blob and URL APIs. The file will be downloaded with the specified content and filename defined in the JavaScript code.
Manipulating File Metadata:
JavaScript also allows the manipulation of file metadata, such as file name, file size, and file type. Here's an example using the File API:
const file = new File(['sample content'], 'sample.txt', {type: 'text/plain'});
console.log('File Name:', file.name);
console.log('File Size:', file.size, 'bytes');
console.log('File Type:', file. Type);
The provided JavaScript code creates a File object with the content "sample content", filename "sample.txt", and a specified type of "text/plain". The File object is then used to access its properties and print them to the console.
Replace Paste the JavaScript code here by the above JavaScript code in the following HTML code and then open it in your browser to check the output in the browser’s console.
<!DOCTYPE html>
<html>
<head>
<title>File Properties Example</title>
</head>
<body>
<input type="file" id="fileInput">
<script>
Paste the JavaScript code here
</script>
</body>
</html>
Create an HTML file using the above code and then open it on a web browser. You see something like this:
Here, an image is uploaded to check the metadata in the browser’s console using the “Inspect” feature.
Moving and Renaming Files:
JavaScript can also be used to move or rename files server-side using libraries and frameworks like Node.js. It cannot be executed directly in a web browser console but you can test the code in the local environment. Here's an example using the fs module in Node.js:
const fs = require('fs');
const path = require('path');
const sourcePath = path.join(__dirname, 'old_folder', 'old_file.txt'); // Path of the source file
const destinationPath = path.join(__dirname, 'new_folder', 'new_file.txt'); // Path of the destination file
fs.rename(sourcePath, destinationPath, (err) => {
if (err) {
console.error('Error occurred while moving and renaming file:', err);
} else {
console.log('File moved and renamed successfully!');
}
});
In this example,
we are using the fs module in Node.js for file system-related functionality. We use the fs.rename() method to move and rename a file. The sourcePath variable specifies the path of the source file that we want to move and rename, and the destinationPath variable specifies the path of the destination file with the new name.
The callback function is passed as the last argument to fs.rename() and is executed after the file has been moved and renamed.
To check this code, ensure you have sufficient permission to access and modify the files on your local machine. If you see any error message in the console, care to share it in the comment section.
JavaScript offers a wide range of techniques that can effectively help web-based application development for file-handling purposes. In this regard, let's explore additional explanations for executing advanced tasks and implementing complex patterns using JavaScript code.
Reading and Writing Binary Files:
JavaScript's FileReader API can be used to read binary files, such as images or audio files, from the user's local file system. Similarly, the Blob API can be used to create binary files and save them to the local file system or send them to a server.
<!DOCTYPE html>
<html>
<head>
<title>Binary File Handling Example</title>
</head>
<body>
<h1>Binary File Handling Example</h1>
<input type="file" id="fileInput">
<script>
// JavaScript code here
// Reading a binary file
const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', (event) => {
const file = event.target.files[0];
const reader = new FileReader();
reader.onload = (event) => {
const data = event.target.result;
// Process the binary data
console.log(data);
};
reader.onerror = (event) => {
console.error('Error reading file:', event.target.error);
};
reader.readAsArrayBuffer(file);
});
// Writing a binary file
const data = new Uint8Array([0x48, 0x45, 0x4C, 0x4C, 0x4F]); // 'HELLO' in binary
const blob = new Blob([data], { type: 'application/octet-stream' });
const downloadLink = document.createElement('a');
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = 'binaryFile.bin';
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
</script>
</body>
</html>
The code provided exhibits advanced techniques in JavaScript for reading and writing binary files. It utilizes event listeners, FileReaders, Blobs, and download links to handle binary data. The code demonstrates how to read binary files from file input elements and process the data using ArrayBuffers, and write binary files for download with specified MIME types and filenames.
Once you attempt to execute the above code, the browser prompts you to download a file in .bin format. Upload the file and then check the console.
Streaming Large Files:
You can create JavaScript code that efficiently streams large files, such as videos, without consuming excessive memory by utilizing the Fetch API and the ReadableStream API. These powerful features allow for the effective handling of large files, preventing memory overload and ensuring smooth file streaming.
<!DOCTYPE html>
<html>
<head>
<title>Large File Streaming Example</title>
</head>
<body>
<h1>Large File Streaming Example</h1>
<script>
// JavaScript code here
const url = 'https://example.com/largeFile.mp4';
fetch(url)
.then(response => response.body)
.then(body => {
const reader = body.getReader();
const stream = new ReadableStream({
start(controller) {
function push() {
reader.read()
.then(({ done, value }) => {
if (done) {
controller.close();
return;
}
controller.enqueue(value);
push();
})
.catch(error => {
console.error('Error reading file:', error);
controller.error(error);
});
}
push();
}
});
return new Response(stream);
})
.then(response => response.blob())
.then(blob => {
// Process the streamed file
console.log(blob);
})
.catch(error => {
console.error('Error streaming file:', error);
});
</script>
</body>
</html>
Please replace https://example.com/largeFile.mp4 with the URL of the video file on your own server or use a third-party video hosting service. Please note that fetch API doesn’t work with the YouTube URL in this case now.
Alright, these are the well-working tricks for excellent JavaScript file handling, which can be very effective for web-based application development.
Conclusion:
As a web developer, it's important to have strong JavaScript file-handling skills because you will be dealing with various file-handling functionalities such as reading, writing, and manipulating files with JavaScript code which are essential for creating the best and well-functioning web applications that provide the seamless user experience. With JavaScript, you can handle various file types such as text, JSON, images, and more.
No matter whether you're working on a basic website or a more complicated web application, good expertise in file handling with JavaScript can help you create powerful and effective web app-based solutions. So, it will never be too late to learn to code, start now.