t id="fileItem" type="file" />
    

The following line of code fetches the first file in the node's file list as a
[ ` File ` ](/en-US/docs/Web/API/File) object:

js

    
    
    const file = document.getElementById("fileItem").files[0];
    

**Note:** This interface was an [ attempt to create an unmodifiable list
](https://stackoverflow.com/questions/74630989/why-use-domstringlist-rather-
than-an-array/74641156#74641156) and only continues to be supported to not
break code that's already using it. Modern APIs use types that wrap around
ECMAScript array types instead, so you can treat them like ECMAScript arrays,
and at the same time impose additional semantics on their usage (such as
making their items read-only).

##  Instance properties

[ ` length ` ](/en-US/docs/Web/API/FileList/length "length") Read only

    

A read-only value indicating the number of files in the list.

##  Instance methods

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

    

Returns a [ ` File ` ](/en-US/docs/Web/API/File) object representing the file
at the specified index in the file list.

##  Example

###  Logging filenames

In this example, we log the names of all the files selected by the user.

####  HTML

html

    
    
    <input id="myfiles" multiple type="file" />
    <pre class="output">Selected files:</pre>
    

####  CSS

css

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

####  JavaScript

js

    
    
    const output = document.querySelector(".output");
    const fileInput = document.querySelector("#myfiles");
    
    fileInput.addEventListener("change", () => {
      for (const file of fileInput.files) {
        output.innerText += `\n${file.name}`;
      }
    });
    

####  Result

##  Specifications

Specification  
---  
[ File API  
#  filelist-section  ](https://w3c.github.io/FileAPI/#filelist-section)  
[ HTML Standard  
#  dom-input-files-dev
](https://html.spec.whatwg.org/multipage/input.html#dom-input-files-dev)  
  
##  Browser compatibility

BCD tables only load in the browser  with JavaScript enabled. Enable
JavaScript to view data.

##  See also

  * [ Using files from web applications ](/en-US/docs/Web/API/File_API/Using_files_from_web_applications)
  * [ ` File ` ](/en-US/docs/Web/API/File)
  * [ ` FileReader ` ](/en-US/docs/Web/API/FileReader)

##  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/FileList/contributors.txt) .

[ View this page on GitHub
](https://github.com/mdn/content/blob/main/files/en-
us/web/api/filelist/index.md?plain=1 "Folder: en-us/web/api/filelist \(Opens
in a new tab\)") â¢  [ Report a problem with this content
](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-
url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-
US%2Fdocs%2FWeb%2FAPI%2FFileList&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-
us%2Fweb%2Fapi%2Ffilelist%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-
US%2Fdocs%2FWeb%2FAPI%2FFileList%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-
us%2Fweb%2Fapi%2Ffilelist%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F8fd2ee72038310e3ecc387df235ffac1cb08775c%0A*+Document+last+modified%3A+2023-12-02T09%3A32%3A56.000Z%0A%0A%3C%2Fdetails%3E
"This will take you to GitHub to file a new issue.")

[ MDN logo  ](/)

Your blueprint for a better internet.

  * [ MDN on Mastodon  ](https://mozilla.social/@mdn)
  * [ MDN on X (formerly Twitter)  ](https://twitter.com/mozdevnet)
  * [ MDN on GitHub  ](https://github.com/mdn/)
  * [ MDN Blog RSS Feed  ](/en-US/blog/rss.xml)

##