File

Represents a file selected by the user (inherits from Blob).

const file = input.files?.[0]; // File object
Property Description
name File name (e.g. "avatar.png")
size Size in bytes
type MIME type (e.g. "image/jpeg")
lastModified Timestamp (in ms) of last modification 
if (file) {
  console.log(file.name);             // e.g. avatar.png
  console.log((file.size / 1024).toFixed(2), 'KB');
  console.log(file.type);             // image/jpeg
}

FileList

An array-like object returned from <input type="file">.

const files = input.files; // FileList
for (const file of files) {
  console.log(file.name);
}
Property Description
length Number of files
item(i) Get file by index
[i] Also indexable like array

Blob

Base class of File. Used for handling binary data in memory.

const blob = new Blob(['Hello world'], { type: 'text/plain' });

Use case

URL.createObjectURL

Creates a temporary local URL for previewing files (e.g. images).

const url = URL.createObjectURL(file);
<img src={url} />