y images 
  * Example: Uploading a user-selected file 
  * Example: Using object URLs to display PDF 
  * Example: Using object URLs with other file types 
  * See also 

#  Using files from web applications

**Note:** This feature is available in [ Web Workers ](/en-
US/docs/Web/API/Web_Workers_API) .

Using the File API, web content can 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"> ](/en-
US/docs/Web/HTML/Element/input/file) ` element or by drag and drop.

##  Accessing selected file(s)

Consider this HTML:

html

    
    
    <input type="file" id="input" multiple />
    

The File API makes it possible to access a [ ` FileList ` ](/en-
US/docs/Web/API/FileList) containing [ ` File ` ](/en-US/docs/Web/API/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:

js

    
    
    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 ` ](/en-
US/docs/Web/API/FileList) through the ` change ` event. You need to use [ `
EventTarget.addEventListener() ` ](/en-
US/docs/Web/API/EventTarget/addEventListener) to add the ` change ` event
listener, like this:

js

    
    
    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 ` ](/en-US/docs/Web/API/FileList) object provided by the DOM
lists all of the files selected by the user, each specified as a [ ` File `
](/en-US/docs/Web/API/File) object. You can determine how many files the user
selected by checking the value of the file list's ` length ` attribute:

js

    
    
    const numFiles = fileList.length;
    

Individual [ ` File ` ](/en-US/docs/Web/API/File) objects can be retrieved by
accessing the list as an array.

There are three attributes provided by the [ ` File ` ](/en-
US/docs/Web/API/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:

html

    
    
    <!doctype html>
    <html lang="en-US">
      <head>
        <meta charset="UTF-8" />
        <title>File(s) size</title>
      </head>
    
      <body>
        <form name="uploadForm">
          <div>
            <input id="uploadInput" type="file" multiple />
            <label for="fileNum">Selected files:</label>
            <output id="fileNum">0</output>;
            <label for="fileSize">Total size:</label>
            <output id="fileSize">0</output>
          </div>
          <div><input type="submit" value="Send file" /></div>
        </form>
    
        <script>
          const uploadInput = document.getElementById("uploadInput");
          uploadInput.addEventListener(
            "change",
            () => {
              // Calculate total size
              let numberOfBytes = 0;
              for (const file of uploadInput.files) {
                numberOfBytes += file.size;
              }
    
              // Approximate to the closest prefixed unit
              const units = [
                "B",
                "KiB",
                "MiB",
                "GiB",
                "TiB",
                "PiB",