File and FileReader
Let’s explore File and FileReader in JavaScript.
As a rule, a file object inherits from the Blob. It can be extended to filesystem-related facilities.
You can obtain it in two ways:
- The first way is using a constructor similar to Blob:
new File(fileParts, fileName, [options]) - As a rule, a file can be received from <input type="file">, or drag and drop or other browser interfaces. In this situation, the file receives information from OS.
The file objects have the same properties as Blob. But, they also have some additional properties such as the name (the file name) and the lastModified(last modification timestamp).
Let’s see how the File object can be received from <input type="file">:
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<input onchange="showFile(this)" type="file">
<script>
function showFile(input) {
let file = input.files[0];
alert(`File name: ${file.name}`);
alert(`Last modified: ${file.lastModified}`);
}
</script>
</body>
</html>FileReader¶
The purpose of the fileReader is to read data from Blob objects. It provides data with the usage of events because reading from disk might take long.
The constructor of the FileReader is the following:
let fileReader = new FileReader(); // not a argumentsIts primary methods are as follows:
- readAsArrayBuffer(blob) – reading data in binary format ArrayBuffer.
- readAsText(blob, [encoding]) – reading the data like a text string with particular encoding (utf-8 by default).
- readAsDataURL(blob) – reading the binary data and encoding that as base64 data url.
- abort() – canceling the action.
The events that can trigger during the process of reading are the following:
- loadstart
- progress
- load
- abort
- error
- loadend
After the reading is over, the result can be accessed in this way:
- The result is reader.result.
- The error is reader.error.
The error and load are the most commonly used events.
An example of reading a file will look as follows:
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<input onchange="readFile(this)" type="file">
<script>
function readFile(input) {
let file = input.files[0];
let fileReader = new FileReader();
fileReader.readAsText(file);
fileReader.onload = function() {
alert(fileReader.result);
};
fileReader.onerror = function() {
alert(fileReader.error);
};
}
</script>
</body>
</html>Summary¶
File objects use the methods and properties of Blob. But, they have additional properties such as name and lastModified. File objects are usually received from user input such as <input> or Drag and drop events.
FileReader objects are capable of reading from a file or a blob, in one of the formats below:
- String
- ArrayBuffer
- Data URL, base-64 encoded.
0 Comments
CAN FEEDBACK
Emoji