Javascript filereader

An API allowing developers to view file data asynchronously is called JavaScript FileReader. The filereader offers several file-reading methods. It includes readAsArrayBuffer() and readAsText(); a load event is triggered when a file is read. The createObjectURL() method of the FileReader Library enables developers to create files and save them to the user's device. It is an effective and feasible method for receiving entry to local file contents without a server-side back-end.

Use of the Javascript filereader

JavaScript represents all documents as a File object when you drag and drop files into the web browser. It chooses files to submit using the file input element.
The chosen file can be accessed in JavaScript using the File object. JavaScript uses the FileList object to store the File objects.
The FileReader object is used to view a file's content. Remember that the FileReader can only view your chosen files through drag and drop or file input.

Syntax

The filereader syntax shows the method without argument.

How to work javascript filereader

Create html, css, and javascript pages or tags as per user requirement.
Use input with the file type to select the files and documents.

Use the javascript file variable with the input files.

function readFileFunction(input_var) {
let file_var = input_var.files[0];
}

Use javascript filereader syntax.

Read the file which uses it as an input value.

Example

The basic file reader example shows the inert file and shows the required data of the file. We can show the result data in the alert box; otherwise shows an error message.

<!DOCTYPE html>
<head>
<title> Javascript filereader  </title>
</head>
<body>
<h3> Javascript filereader Example </h3>
<p> Select the required file in the device </p>
<input onchange = "readFileFunction(this)" type = "file">
<script>
function readFileFunction(input_var) {
let file_var = input_var.files[0];
let fileReader_var = new FileReader();
fileReader_var.readAsText(file_var);
fileReader_var.onload = function() {
alert(fileReader_var.result);
};
fileReader_var.onerror = function() {
alert(fileReader_var.error);
};
}
</script>
</body>
</html>

Output

The output images show the file name with the alert popup box.

Constructors for JavaScript FileReaders

Several constructors are available in the JavaScript FileReader API to build FileReader objects. These constructors define the properties of the FileReader object, including the file to be read and the kind of read operation to be carried out.

The following are the FileReader class's primary constructors:

FileReader():

A new FileReader object has created the function using an object () With no arguments. It initializes the object with its preset properties.

FileReader(file Blob):

The function Object() creates a new FileReader object and specifies the file to be read. A Blob object that depicts the file to be read must be provided as the file argument.

Note: In JavaScript, a file is represented as an object of immutable, raw data by a data structure called a Blob (binary large object). Large quantities of data, including files, images, and binary data, can be stored and transmitted using blobs.

FileReader(file: Blob, encoding: string):

FileReader In addition to setting the file to be read and specifying the file's encoding, this function Object() { [native code] } generates a new FileReader object. The encoding argument specifies the character encoding of the file, which must be a Blob object representing the file to be viewed.

These constructors are used to build and initialize a FileReader object. Using the proper read method, such as readAsArrayBuffer, the object can read the file after it has been created.

Events in a JavaScript FileReader

Developers can read files from the user's computer asynchronously using the JavaScript FileReader API. This is frequently used in conjunction with HTML5 file input elements to enable users to upload files to a web application.

The JavaScript FileReader has several events that can be used to monitor the progression and conclusion of file reading activities. These things happen like:

loadstart: The start of a file reading operation triggers this event.
progress: This event is regularly generated while a file is being read, enabling developers to monitor the operation's progress and show the user a progress bar.
load: When a file accessing action is completed, this event is fired.
abort: This event is launched if the user interrupts or cancels the file reading procedure.
error: If a problem reads the file, this event is started.
loadend: When a file reading process is finished, whether successful or not, the loadend event is triggered.

Developers may design user-friendly file upload interfaces that give feedback and keep users informed about the progress of their file uploads by monitoring these events and responding appropriately.

Properties of a JavaScript FileReader instance

To obtain details about a FileReader object, the JavaScript FileReader API offers several instances of properties. These properties are implemented to obtain details about the file being viewed, the read operation's progress, and the read operation's outcome.

The following are the FileReader API's primary instance properties:

When a file is read by the FileReader object, this property yields the DOMException error.

readyState: This property gives the FileReader object's current state. Any of the following numbers could represent it:

0: This indicates that no read action was initiated although the FileReader object was created.
1: It denotes a progressive state for the read process.
2: It indicates that the read process is finished.
result: Depending on the type of read operation carried out, this property gives the outcome of the read operation as a string, an ArrayBuffer, or a DataURL.
Information of the FileReader object and the file is worked to access using these instance properties. The operator can access instance attributes, such as the reader.error, reader.readyState, and reader.result.

Examples

The following examples show the required image and file information to read the value.

Example1

The following example shows the file data with the result using the input file. If we select the file, image, or another document, the output shows the file's essential information, such as size.

<!DOCTYPE html>
<html>
<head>
<title> JavaScript FileReader Example</title>
<meta charset = "UTF-8">
<script>
function changeHandlerFunction(evnt_data) {
evnt_data.stopPropagation();
evnt_data.preventDefault();
// FileList object.to get output data
var files = evnt_data.target.files;
var file_data = files[0];
var file_dataReader = new FileReader();
file_dataReader.onloadstart = function(progressEvent) {
resetLog();
appendLog("Function onloadstart!");
var msg_output = "File Name: " + file_data.name + "<br>" +
"File Size: " + file_data.size + "<br>" +
"File Type: " + file_data.type;
appendLog(msg_output);
}
file_dataReader.onload = function(progressEvent) {
appendLog("onload!");
var stringData = file_dataReader.result;
appendLog(" ---------------- File Content shows required information ----------------: ");
appendLog(stringData);
}
file_dataReader.onloadend = function(progressEvent) {
appendLog("onloadend!");
// FileReader.EMPTY, FileReader.LOADING, FileReader.DONE
appendLog("readyState = " + file_dataReader.readyState);
}
file_dataReader.onerror = function(progressEvent) {
appendLog("onerror!");
appendLog("Has Error!");
}
// Read file_data asynchronously.
file_dataReader.readAsText(file_data, "UTF-8");
}
function resetLog() {
document.getElementById('log-div').innerHTML = "";
}
function appendLog(msg_output) {
document.getElementById('log-div').innerHTML += "<br>" + msg_output;
}
</script>
</head>
<body>
<h3> Javascript FileReader Example</h3>
<a href = ""> Reset Files </a> <br> <br>
<input type = "file" onchange = "changeHandlerFunction(event)">
<br><br>
<output id = "log-div"> </output>
</body>
</html>

Output

The following image shows the information on the selected files.

Example 2:

The following example shows the file data with the display data using the input file. If we select the file, image, or another document, then the output shows the file's essential data.

<!DOCTYPE html>
<html>
<head>
<title> JavaScript FileReader Example</title>
<meta charset = "UTF-8">
<script>
function changeHandlerFunction(event_output) {
event_output.stopPropagation();
event_output.preventDefault();
// FileList object.
var files = event_output.target.files;
var file_output = files[0];
var file_outputReader = new FileReader();
file_outputReader.onload = function(progressEvent) {
var url = file_outputReader.result;
console.log(url);
//Show the url image as an output
var myImg = document.getElementById("image_val");
myImg.src= url;
}
// Read file_output asynchronously.
file_outputReader.readAsDataURL(file_output);
}
</script>
</head>
<body>
<h3> Javascript FileReader Example</h3>
<a href = ""> Reset Files </a> <br> <br>
<input type = "file" onchange = "changeHandlerFunction(event)">
<br><br>
<output id = "log-div"> </output>
<img id = "image_val" src = "">
</body>
</html>

Output

The following image shows the information on the selected files.

FileReader Instance Methods in JavaScript

Several instance methods are available in the FileReader class of JavaScript that let you retrieve data from a File or Blob object. These techniques consist of

abort():

The readyState changes to 2, which is the DONE or COMPLETED state, and the abort() method terminates the reading process.

readAsArrayBuffer(blob):

The Blob or File object information can be received and delivered as an ArrayBuffer using this instance function. This can be helpful when working with binary information or files you want to view directly as raw bytes.

readAsBinaryString(blob):

In contrast to readAsArrayBuffer(), this function returns the Blob or File's contents as a binary string.

readAsDataURL(blob):

Information obtained from a Blob and a File object can be read using this function, and the returned data will be base64-encoded. Directly showing images or other types of files in the browser can be made helpful by this.

readAsText(blob, [encoding]):

This method allows you to extract data from a Blob or File object and return it as a text string. It is possible to specify the text's encoding.

Except for abort():

Each method accepts a Blob or the File type as its first parameter and synchronously returns the data inside the file. This implies that in order to view the file's contents, you need to utilize a FileReader instance's load event handler.