The File API enables web applications to access files and their contents.

Web applications can access files when the user makes them available, either using afile<input> element orvia drag and drop.

Sets of files made available in this way are represented asFileList objects, which enable a web application to retrieve individualFile objects. In turnFile objects provide access to metadata such as the file's name, size, type, and last modified date.

File objects can be passed toFileReader objects to access the contents of the file. TheFileReader interface is asynchronous, but a synchronous version, available only inweb workers, is provided by theFileReaderSync interface.

There are two other major APIs that also deal with files:File and Directory Entries API andFile System API.

The File API is the most basic one. It supports reading and processing file data explicitly provided by the user in the form of a form element input or drag-and-drop operation. It also enables binary data handling via blobs.

The File and Directory Entries API, like the File API, also deals with files provided by the user via form inputs or drag-and-drop operations. However, instead of a single file, the input element now allows the selection of a directory or multiple files. The API then provides a way to process the directory or files. It is mostly Chrome's own invention—you will find that its extensions to other interfaces are all prefixed withwebkit. TheFile and Directory Entries API has a more complete story about its implementation and standardization. It was originally intended to support a full virtual file system, but now only supports read operations on user-provided data.

The File System API provides a virtual file system for web applications, so that they can persistently store data in a virtual system which is private to the document's origin (known as anOrigin private file system (OPFS)). The File System Access API further extends the File System API to allow websites to read and write user files, subject to user consent. Unlike the File API and the File and Directory Entries API, the File System API is purely JavaScript and does not deal with form inputs.

Blob

Represents a "Binary Large Object", meaning a file-like object of immutable, raw data; aBlob can be read as text or binary data, or converted into aReadableStream so its methods can be used for processing the data.

File

Provides information about a file and allows JavaScript in a web page to access its content.

FileList

Returned by thefiles property of the HTML<input> element; this lets you access the list of files selected with the<input type="file"> element. It's also used for a list of files dropped into web content when using the drag and drop API; see theDataTransfer object for details on this usage.

FileReader

Enables web applications to asynchronously read the contents of files (or raw data buffers) stored on the user's computer, usingFile orBlob objects to specify the file or data to read.

FileReaderSync

Enables web applications to synchronously read the contents of files (or raw data buffers) stored on the user's computer, usingFile orBlob objects to specify the file or data to read.

URL.createObjectURL()

Creates a URL that can be used to fetch aFile orBlob object.

URL.revokeObjectURL()

Releases an existing object URL which was previously created by callingURL.createObjectURL().

In this example, we provide afile<input> element, and when the user selects a file, we read the contents of the first file selected as text, and display the result in a<div>.

HTML

<input type="file" /><div></div>

CSS

.output {  overflow: scroll;  margin: 1rem 0;  height: 200px;}

JavaScript

const fileInput = document.querySelector("input[type=file]");const output = document.querySelector(".output");fileInput.addEventListener("change", async () => {  const [file] = fileInput.files;  if (file) {    output.innerText = await file.text();  }});

• <input type="file">: the file input element
• Blob.text()
• TheDataTransfer interface