Add memberships to your Webflow project in minutes.
Over 200 free cloneable Webflow components. No sign up needed.
Add memberships to your React project in minutes.
From a programming standpoint — A file is essentially a container for storing information. For example, you may have a text-based file containing a list of grades for a course. You may also have an image file containing a JPEG image of your dog. A file could be anything, but it usually represents some form of data that is structured in a way that makes sense to people.
Prerequisite
The following prerequisites are assumed before getting started with this tutorial:
- Basic familiarity with Javascript
- Node.js 14 or later must be installed.
- A text editor
Node.js fs Module
As mentioned previously, the file system module is built right into node.js, which means that we don’t have to install any other packages to get started. And we can include it in a node.js project like below:
If you'd prefer to import it as an ECMA Script module instead. Using the import statement, we can do so like below:
This will import the whole node.js file system module, which gives us direct access to creating a new file or altering existing ones on our local machine or server.
Also, rather than importing the whole fs package into our project, we can choose to import a specific method from it using javascript destructuring. An example would look like this:
So that methodName is now available as a standalone function that we can call directly. However, for the sake of clarity and conciseness, we will not be employing this format in this article moving forward.
Ways to Read files in Node.js
Naturally, node.js includes two different methods for reading files: fs.readFile() and the fs.readFileSync() method. The first method will read the file content in a non-blocking asynchronous manner and return the content in a callback function. The readFileSync() method, on the other hand, will read the file synchronously i.e, code executions are blocked until this process is completed. Also, unlike the readFile() method, this method returns its result as a return value.
The fs.readFile () method takes three parameters, which are described further below:
- File: A required string specifying the path and file name of the file to read.
- Encoding: An optional string indicating the type of file encoding.
- A callback function is used to handle the data returned from the request as well as any errors that may occur.
A sample request to read a file's content with fs.readFile() would look like this:
The fs.readFileSync() method likewise accepts the same parameters, except with the callback function, and a sample request would look like this:
It's also worth mentioning that if no encoding is specified, the data is returned as a buffer object. Otherwise, it will be returned as a string.
fs.readFile() vs fs.readFileSync()
Let's try a short experiment to better grasp the difference between these two functions. Assume we wish to read the contents of a file and then log another message to the console in another code block. Our code example would be as follows:
If our sample file contains “Hello world”, the output we get from this code is:
I.e the console.log() is invoked before fs.readFile() completes reading the file. This is to emphasize that this method is asynchronous (non-blocking), and its execution will not prevent other code blocks from running. However, this is not the case with fs.readSync(), as the result is returned as a value that we can act on right away.
Please keep in mind that, in order to avoid ambiguity, we will only use the fs.readFile() in this guide moving forward.
Reading Text File
Reading text file with both functions is quite straightforward. Lets say we have a file structure like below:
And we want to read the contents from sample.txt with app.js, we can do so with the code below:
From the callback function, we’ve made the file available via variable data, and when we run this code, we should have the content from our sample.txt file logged to the console.
And, yes, the file content has now been converted to a string, i.e we can now perform string-related operations with it.
Below is an updated code from our previous example that splits our file content and checks if its first word is “hello”.
Reading HTML Files
We can read HTML files the same way we’d read a .txt file using the fs.readFile() method, also specifying the encoding type as utf-8. If for example, have an index.html, its possible to read this file content like below:
You can then choose to proceed to parse this markup with packages like cheerio or maybe even take it one step further and render it with node http package:
Reading file by URL
Reading a remote file using its url is more tricky than the previous examples we've seen. We'll need to first create a file stream, then use node http request to send a request to the remote file, and finally pipe the response to our file stream.
An example is provided below:
In the example provided above, we used the fs.createWriteStream() function to create a file stream that allows us to write raw data to this file, and then we used Node.js' built-in https package to send a request to a sample image hosted on Imgur. After that, we piped the result from our request to our file, so when you run the code above, the image file from our remote URL is downloaded as a new file — image.jpg — and saved on our local machine.
Reading a JSON file
We can read JSON files following the same process we did for reading a .txt and the .html file in our previous examples. Suppose we have a file called cities.json that contains the following data:
We can read its content like so:
Running the code above, our JSON content is converted to a string. However, we can easily convert it to a valid JSON object using the JSON.parse() function, and can then proceed to loop each item in the json object, or perform any other action as deemed fit:
fs.promises
Node.js version 10 also introduces a new promise based solution for performing file operations using the async/await syntax.
This method is available in the file system module as fs.promises, and performing a basic readFile operation would look like this:
The main difference between this new syntax and earlier examples is that we removed the callback function, avoiding callback hell. Furthermore, this is a lot cleaner syntax, allowing us to write better, more performant code.
Conclusion
In this article, we took a closer look at some of the most common Node.js techniques for reading and processing various file types. We looked into a variety of ways for extracting data from text, HTML, and even image files. These strategies come in handy for creating a file system, document parsing, or data processing programs. It's now your turn to use these techniques to create something very cool.