ts to access the contents of the
file. The [ ` FileReader ` ](/en-US/docs/Web/API/FileReader) interface is
asynchronous, but a synchronous version, available only in [ web workers
](/en-US/docs/Web/API/Web_Workers_API) , is provided by the [ ` FileReaderSync
` ](/en-US/docs/Web/API/FileReaderSync) interface.

##  Interfaces

[ ` Blob ` ](/en-US/docs/Web/API/Blob)

    

Represents a "Binary Large Object", meaning a file-like object of immutable,
raw data; a [ ` Blob ` ](/en-US/docs/Web/API/Blob) can be read as text or
binary data, or converted into a [ ` ReadableStream ` ](/en-
US/docs/Web/API/ReadableStream) so its methods can be used for processing the
data.

[ ` File ` ](/en-US/docs/Web/API/File)

    

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

[ ` FileList ` ](/en-US/docs/Web/API/FileList)

    

Returned by the ` files ` property of the HTML [ ` <input> ` ](/en-
US/docs/Web/HTML/Element/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
the [ ` DataTransfer ` ](/en-US/docs/Web/API/DataTransfer) object for details
on this usage.

[ ` FileReader ` ](/en-US/docs/Web/API/FileReader)

    

Enables web applications to asynchronously read the contents of files (or raw
data buffers) stored on the user's computer, using [ ` File ` ](/en-
US/docs/Web/API/File) or [ ` Blob ` ](/en-US/docs/Web/API/Blob) objects to
specify the file or data to read.

[ ` FileReaderSync ` ](/en-US/docs/Web/API/FileReaderSync)

    

Enables web applications to synchronously read the contents of files (or raw
data buffers) stored on the user's computer, using [ ` File ` ](/en-
US/docs/Web/API/File) or [ ` Blob ` ](/en-US/docs/Web/API/Blob) objects to
specify the file or data to read.

###  Extensions to other interfaces

[ ` URL.createObjectURL() ` ](/en-US/docs/Web/API/URL/createObjectURL_static
"URL.createObjectURL\(\)")

    

Creates a URL that can be used to fetch a [ ` File ` ](/en-
US/docs/Web/API/File) or [ ` Blob ` ](/en-US/docs/Web/API/Blob) object.

[ ` URL.revokeObjectURL() ` ](/en-US/docs/Web/API/URL/revokeObjectURL_static
"URL.revokeObjectURL\(\)")

    

Releases an existing object URL which was previously created by calling [ `
URL.createObjectURL() ` ](/en-US/docs/Web/API/URL/createObjectURL_static
"URL.createObjectURL\(\)") .

##  Examples

###  Reading a file

In this example, we provide a [ file ` <input> ` element ](/en-
US/docs/Web/HTML/Element/input/file) , 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> ` ](/en-US/docs/Web/HTML/Element/div) .

####  HTML

html

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

####  CSS

css

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

####  JavaScript

js

    
    
    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();
      }
    });
    

###  Result

##  Specifications

Specification  
---  
[ File API  
](https://w3c.github.io/FileAPI/)  
  
##  See also

  * [ ` <input type="file"> ` ](/en-US/docs/Web/HTML/Element/input/file) : the file input element 
  * [ ` text() method ` ](/en-US/docs/Web/API/Blob/text) : .text() 
  * The [ ` DataTransfer ` ](/en-US/docs/Web/API/DataTransfer) interface 

##  Help improve MDN

Was this page helpful to you?

Yes  No

[ Learn how to contribute
](https://github.com/mdn/content/blob/main/CONTRIBUTING.md "This will take you
to our contribution guidelines on GitHub.") .

This page was last modified on  Dec 2, 2023  by  [ MDN contributors ](/en-
US/docs/Web/API/File_API/c