In this article we will show you the solution of JavaScript read local file from path, with the aid of the File API, HTML 5 offers a common interface for interacting with local files.

The File API enables interaction with BLOB, single, and many files. Now let us move to the read local file without input.

Step By Step Guide On JavaScript Read Local File From Path :-

There are numerous JavaScript libraries and APIs that enable users to read data from a local file. Two of these libraries are particularly well-known:

1. File System Package - JavaScript applications can read files from the system thanks to the File System Package.

2. FileReaderWeb API - Allows working with files from an HTML webpage using the FileReaderWeb API.

As you can see, both have different uses; one is for a local JavaScript programme, while the other is for an HTML webpage.

Package for reading files from your desktop’s file system:

The default node environment for locally hosted JavaScript scripts is included in the file system package. However, you must still use the necessary keyword in your JavaScript code to include the File system package. After that, you can read data from a file using the function readFile () contained in this package.

readFile () method syntax:

The readFile () method's syntax is as follows:

FileSystemVar.readFile(PathToTheFile, Options, CallbackFunction);

These are the specifics of this syntax:

• FileSystamVar: This variable is equal to the one that says you need the filesystem package.
• PathToTheFile: This is the location of the desired file to read.
• Options: These are the extra choices you can make to filter the file's encoding and other properties.
• CallbackFunction: A callback function that will be run after the file has been successfully read.

Reading files on an HTML webpage using the FileReader Web API:

Only HTML web pages can use the file reader API, and one of its limitations is that it can only read files that have been specified as input via the input type="file"> tag. The user can read the file in many encodings thanks to its many capabilities.

Asynchronous file reading is possible with the FileReader API and JavaScript event handling. However, not all browsers support HTML 5, therefore it's crucial to check for compatibility before utilising the File API.

The FileReader API includes four built-in methods for reading local files:

• FileReader. ReadAsArrayBuffer (): The readAsArrayBuffer () function reads the data from the provided input file. The data from the file is represented by an Array Buffer in the result attribute.
• FileReader.readAsBinaryString(): The readAsBinaryString () method of the FileReader reads the data from the specified input file. The raw binary data from the file is present in the result attribute as a string.
• FileReader.readAsDataURL(): The readAsDataURL() method of the FileReader reads the data from the supplied input file. The data from the file is represented by a URL in the result attribute.
• FileReader.readAsText(): Reads the contents of the specified input file using the file’s contents are included in the result attribute as a text string. The second input for this procedure can be the encoding version (if required). The UTF-8 encoding is the standard.

//demo.txt

Hi, Welcome to Talkerscode
This is our demo text which we used in our code.


//demo.js

const fs = require("fs");
fs.readFile("demo.txt", (err, data) => {
  if (err) throw err;
  console.log(data.toString());
});

1. Firstly, we create the demo.txt file in which we write some text.
2. This file we used in our JavaScript code.
3. In demo.js file firstly we use const keyword after that, use the require keyword inside of your JavaScript programme to include the file system package.
4. Then we use the read file which reads the demo.txt file.
5. After that If there is an error, then throw that error message onto the terminal
6. An if there is no error, store the data read from the file in the data variable
7. Then we create the print function with the help of console.log to Print the content of the data variable after converting it to string using the toString () method

Conclusion :-

Hence, we have successfully learnt about the concept of reading local file without input. Also, we learnt that We have two alternatives for reading a locally stored text file: loading the content in HTML or reading the file in your desktop JavaScript programme. You have a file system package for desktop JavaScript and File Reader Web API for web pages to help with this. Both of them essentially carry out the same task: reading a text file. You have used the readFile () and readFileAsText () functions in this tutorial, both of which are part of the File system package. I hope this article on JavaScript read local file from path helps you and the steps and method mentioned above are easy to follow and implement.