Browser / Web Api - File (Blob)

About

A file in the Javascript Browser Api (WebApi) is represented by a File object 1).

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 Javascript - Browser - File API

Demo:

<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 = 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


Powered by ComboStrap