Javascript - Browser - File API

Javascript - Browser - File API


The file api 1) is a browser javascript api that allows file system operation in the browser.

With the FileApi, you can't open and edit and save the same file.

The original file when saved (download) will end up as a new copy of the original file in the operating system's default Downloads folder.


Opening / Uploading a file

Uploading a file:

<input type="file" accept=".txt"/>
  • The input object gives access to the files selected via the the files property that holds a FileList 2) a list of file
document.querySelector("input").addEventListener('change', async  (event) => {
    let file =[0];
    console.log(`File name: ${}`);
    let text = await (new Response(file)).text();
  • Result: Choose a text file, the file name and content will be printed below

Opening / Uploading a list of files in a directory

By adding the boolean attribute webkitdirectory 3), you can opening folders (or directories).

  • The HTML
<input type="file" webkitdirectory  />
  • With the change event, you can retrieve all files in the chosen directory
document.querySelector("input").addEventListener('change', (event) => {
   let files =;
  for (let i=0; i<files.length; i++) {

Note that after choosing your directory, you will get the following warning dialog

Html Input File Multiple Warning Dialog

  • Result: Choose a directory, we will list the name of their descendant files below.

Despite its vendor-prefixed name, webkitdirectory is supported in all browser. 4)

Downloading / Saving a file

Example on how to download a file

Saving a file with the FileApi is limited to downloading a file. It works thanks to the anchor download attribute.

<a id="download" download="foobar.txt">Click to Save / Download the file</a>
let a = document.querySelector("#download");
let blob = new Blob(["foobar"], {type: 'text/plain'});
a.href = URL.createObjectURL(blob);
  • To prevent memory leaks, we revoke the URL after the download (ie close the resource) with a click callback
a.addEventListener('click', (e) => {
    // To prevent memory leaks, always revoke the URL after the download.
    setTimeout(() => URL.revokeObjectURL(, 30 * 1000);
  • Result:


File API interface:

  • Blob - a data container
  • File - a blob with file system features
  • FileList - a list of file
  • Blob.close()
  • Blob.type
  • The concept of read errors

Documentation / Reference

Recommended Pages
Browser / Javascript - File System ( API )

API File System in the browser via the Web Api See: File download test - Selenium ...
Browser / Web Api - File (Blob)

A file in the Javascript Browser Api (WebApi) is represented by a File object . The file object is a blob object that adds support for files on the user's system. When you use a HTML input...
Card Puncher Data Processing
Datacadamia - Data all the things

Computer science from a data perspective
HTML - A element (anchor)

HTML The a (or anchor) is a html element that represents a hyperlink. It is the cornerstone: of every navigation scheme on the web. and of the importance of a page on the internet (pagerank) ...
Html Input File Multiple Warning Dialog
HTML - Input File

The input file is an input of type file that permits to select files or directory and send them to the browser file system api HTML The HTML Result When using the webkitdirectory attribute...
Javascript - Browser - File System Access

The File System Access is a file system api that permits to open, modify and save the same file. While the fileAPI permits just to load and download file without overwriting the source. You are...

Share this page:
Follow us:
Task Runner