How to read a local text file using JavaScript?
Last Updated :
09 Jan, 2025
Reading a local text file involves accessing the contents of a file stored on a user's device. Using JavaScript, this can be achieved with the HTML5 File API and the FileReader object, which reads files selected through an <input> element or drag-and-drop, asynchronously.
Getting Started with the File API
To start reading a file, the user first needs to select it. This can be achieved using a simple file input:
<input type="file" id="fileInput">
Once a file is selected, you can use JavaScript to access the file and read its contents.
There are four inbuilt methods in the FileReader API to read local files which are as follows:
1. FileReader.readAsArrayBuffer() Method
The FileReader.readAsArrayBuffer() method is used to read the contents of a file as an ArrayBuffer object, which represents raw binary data. Here's an example demonstrating how to use readAsArrayBuffer() to read a local file selected by the user
Example: To demonstrate using the FileReader.readAsArrayBuffer() method to read the local file.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Read File as ArrayBuffer</title>
</head>
<body>
<input type="file" id="fileInput">
<div id="fileContents"></div>
<script>
document
.getElementById('fileInput')
.addEventListener('change', function (event) {
let file = event.target.files[0];
let reader = new FileReader();
reader.onload = function (event) {
let arrayBuffer = event.target.result;
let array = new Uint8Array(arrayBuffer);
// Display some information about the file
let fileSize = arrayBuffer.byteLength;
let bytes = [];
for (let i = 0; i < Math.min(20, fileSize); i++) {
bytes.push(array[i]);
}
document
.getElementById('fileContents')
.textContent =
'First 20 bytes of file as ArrayBuffer: '
+ bytes.join(', ');
console.log('ArrayBuffer:', arrayBuffer);
};
reader.readAsArrayBuffer(file);
});
</script>
</body>
</html>
Output:
Output
2. FileReader.readAsText()
Reads the contents of the specified input file. The result attribute contains the contents of the file as a text string. This method can take the encoding version as the second argument(if required). The default encoding is UTF-8.
Example : To demonstrate using the FileReader.readAsText() method to read the local file.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Read Text File</title>
</head>
<body>
<input type="file" name="inputfile" id="inputfile">
<br>
<pre id="output"></pre>
<script type="text/javascript">
document.getElementById('inputfile')
.addEventListener('change', function () {
let fr = new FileReader();
fr.onload = function () {
document.getElementById('output')
.textContent = fr.result;
}
fr.readAsText(this.files[0]);
})
</script>
</body>
</html>
Output:
Output 3. FileReader.readAsDataURL()
The FileReader.readAsDataURL() method is used to read the contents of a file and return them as a data URL representing the file's data. Here's an example demonstrating how to use readAsDataURL() to read a local file selected by the user and display it as an image:
Example: To demonstrate using the FileReader.readAsDataURL() method to read the local file.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Read File as Data URL</title>
</head>
<body>
<input type="file" id="fileInput">
<div>
<h2>Selected Image:</h2>
<img id="imageDisplay"
src="#" alt="Selected Image"
style="max-width: 100%;">
</div>
<script>
document
.getElementById('fileInput')
.addEventListener('change', function (event) {
let file = event.target.files[0];
let reader = new FileReader();
reader.onload = function (event) {
let dataURL = event
.target
.result;
document
.getElementById('imageDisplay')
.src = dataURL;
console.log('Data URL:', dataURL);
};
reader.readAsDataURL(file);
});
</script>
</body>
</html>
Output:
Output 4. FileReader.readAsBinaryString()
The FileReader.readAsBinaryString() method reads the contents of a file as a raw binary string. This approach is useful when you need to handle binary data directly, such as for processing images, files, or other non-text data formats in JavaScript.
Example: To demonstrate using the FileReader.readAsBinaryString()method to read the local file.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Read Text File</title>
</head>
<body>
<input type="file" name="inputfile" id="inputfile">
<br>
<pre id="output"></pre>
<script type="text/javascript">
document.getElementById('inputfile')
.addEventListener('change', function () {
let fr = new FileReader();
fr.onload = function () {
document.getElementById('output')
.textContent = fr.result;
}
fr.readAsBinaryString(this.files[0]);
})
</script>
</body>
</html>
Output:
Output Browser Compatibility
While the File API is widely supported in modern browsers, it’s always good to check compatibility, especially if your client uses older browsers.
Similar Reads
JavaScript Program to read text File
Given a text file, write a JavaScript program to extract the contents of that file. There is a built-in Module or in-built library in NodeJs that handles all the reading operations called fs (File-System). It is basically a JavaScript program (fs.js) where a function for reading operations is writte
2 min read
Read JSON File Using JavaScript
JSON (JavaScript Object Notation) is a lightweight format used for storing and exchanging data. In JavaScript, there are multiple ways to read and parse JSON files. These methods can be used both in browser environments and in Node.js.1. Using the fetch() API The fetch() API retrieves JSON files asy
3 min read
How to download File Using JavaScript/jQuery ?
The ability to download files directly from a website is an essential feature for many web applications. Whether you're providing documents, images, or other data, enabling users to download files seamlessly enhances their experience and ensures they can access the content offline. This article prov
2 min read
How to print a web page using JavaScript ?
Javascript is the world most popular lightweight, cross-platform, interpreted compiled programming language, along with a scripting language for web. It facilitates the dynamic functionality that helps to make the interactive website. As all the Morden browsers use the Javascript & is a client-s
2 min read
How to clear cache memory using JavaScript?
Clearing cache memory in JavaScript refers to managing or removing stored data like images, files, and resources that browsers save for faster loading. Although JavaScript cannot directly clear the browser cache, developers often use cache-busting techniques to ensure users receive updated content.B
2 min read
JavaScript Program to write data in a text File
To write data to a text file using JavaScript in a Node.js environment, the built-in fs (File System) module provides efficient file operations. It supports reading, writing, appending, and deleting files, making it a powerful tool for handling file-related tasks in Node.js.Used Function:The writeFi
3 min read
How to get the file name from page URL using JavaScript ?
JavaScript provides multiple techniques for string manipulation and pattern matching. By demonstrating various methods, the article equips developers with versatile solutions to dynamically retrieve and utilize file names from different URL formats within their applications. There are several approa
3 min read
How To Read a File Line By Line Using Node.js?
To read a file line by line in Node.js, there are several approaches that efficiently handle large files and minimize memory usage. In this article, we'll explore two popular approaches: using the Readline module (which is built into Node.js) and using the Line-reader module, a third-party package.
3 min read
How to read and write JSON file using Node ?
Node JS is a free and versatile runtime environment that allows the execution of JavaScript code outside of web browsers. It finds extensive usage in creating APIs and microservices, catering to the needs of both small startups and large enterprises.JSON(JavaScript Object Notation) is a simple and t
3 min read
How to Download PDF File on Button Click using JavaScript ?
Sometimes, a web page may contain PDF files that can be downloaded by the users for further use. Allowing users to download the PDF files can be accomplished using JavaScript. The below methods can be used to accomplish this task. Table of Content Using html2pdf.js libraryUsing pdfmake LibraryUsing
5 min read