Browser / Web Api - File (Blob)

About

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.

Management

Creation

Input file

When you use a HTML input of file type to select files, you get back a file object. See How to handle files in Javascript with the File API of the Browser?

Demo:

• 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

Reference