The File interface provides information about files and allows JavaScript in a web page to access their content.
File objects are generally retrieved from a FileList object returned as a result of a user selecting files using the <input> element, from a drag and drop operation's DataTransfer object, or from the mozGetAsFile() API on an HTMLCanvasElement.
A File object is a specific kind of a Blob, and can be used in any context that a Blob can. In particular, FileReader, URL.createObjectURL(), createImageBitmap(), and XMLHttpRequest.send() accept both Blobs and Files.
See Using files from web applications for more information and examples.
_____________________________________________________________________________________________
Using the File API, which was added to the DOM in HTML5, it's now possible for web content to ask the user to select local files and then read the contents of those files. This selection can be done by either using an HTML <input type="file"> element or by drag and drop.
If you want to use the DOM File API from extensions or other browser chrome code, you can; however, note there are some additional features to be aware of. See Using the DOM File API in chrome code for details.
Accessing selected file(s)
Consider this HTML:
<input type="file" id="input" multiple>The File API makes it possible to access a FileList containing File objects representing the files selected by the user.
The multiple attribute on the input element allows the user to select multiple files.
Accessing the first selected file using a classical DOM selector:
const selectedFile = document.getElementById('input').files[0];Accessing selected file(s) on a change event
It is also possible (but not mandatory) to access the FileList through the change event. You need to use EventTarget.addEventListener() to add the change event listener, like this:
const inputElement = document.getElementById("input");
inputElement.addEventListener("change", handleFiles, false);
function handleFiles() {
const fileList = this.files; /* now you can work with the file list */
}Getting information about selected file(s)
The FileList object provided by the DOM lists all of the files selected by the user, each specified as a File object. You can determine how many files the user selected by checking the value of the file list's length attribute:
const numFiles = fileList.length;Individual File objects can be retrieved by simply accessing the list as an array:
for (let i = 0, numFiles = fileList.length; i < numFiles; i++) {
const file = fileList[i];
// ...
}
This loop iterates over all the files in the file list.
There are three attributes provided by the File object that contain useful information about the file.
name- The file's name as a read-only string. This is just the file name, and does not include any path information.
size- The size of the file in bytes as a read-only 64-bit integer.
type- The MIME type of the file as a read-only string or
""if the type couldn't be determined.
Example: Showing file(s) size
The following example shows a possible use of the size property:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>File(s) size</title>
</head>
<body>
<form name="uploadForm">
<div>
<input id="uploadInput" type="file" name="myFiles" multiple>
selected files: <span id="fileNum">0</span>;
total size: <span id="fileSize">0</span>
</div>
<div><input type="submit" value="Send file"></div>
</form>
<script>
function updateSize() {
let nBytes = 0,
oFiles = this.files,
nFiles = oFiles.length;
for (let nFileId = 0; nFileId < nFiles; nFileId++) {
nBytes += oFiles[nFileId].size;
}
let sOutput = nBytes + " bytes";
// optional code for multiples approximation
const aMultiples = ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"];
for (nMultiple = 0, nApprox = nBytes / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) {
sOutput = nApprox.toFixed(3) + " " + aMultiples[nMultiple] + " (" + nBytes + " bytes)";
}
// end of optional code
document.getElementById("fileNum").innerHTML = nFiles;
document.getElementById("fileSize").innerHTML = sOutput;
}
document.