How to handle files in Javascript with the File API of the Browser?

About

The file api ¹⁾ is a browser javascript api that allows file system operation in the browser.

Operation

Opening / Uploading a file

Uploading a file:

• You can open and read files via the input of type file

<input type="file" accept=".txt"/>

• The input object gives access to the files selected via the the files property that holds a FileList ²⁾ a list of file

document.querySelector("input").addEventListener('change', async  (event) => {
    let file = event.target.files[0];
    console.log(`File name: ${file.name}`);
    let text = await (new Response(file)).text();
    console.log(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 ³⁾, you can open folders (ie directories) and upload a list of files.

• 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 = event.target.files;
  for (let i=0; i<files.length; i++) {
    console.log(files[i].webkitRelativePath);
  };
});

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

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

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>

• with theObjectURL to create a data URL

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(e.target.href), 30 * 1000);
});

• Result:

Features

File API interface:

• Blob - a data container
• File - a blob with file system features
• FileList⁵⁾ - an object that represents a list of file created by the html input file
• Blob.close()
• Blob.type
• The concept of read errors

Documentation / Reference

• https://web.dev/browser-fs-access/