Browsers provide a File object for files selected by the user.

A File extends the Blob interface and adds three properties:

• name — the file name (a string)
• lastModified — UNIX timestamp of the last modification
• plus the Blob properties: size (bytes) and type (MIME type)

You get a File from a FileList—for example from an <input type="file" /> or from the Drag and Drop API. Loop over the FileList or use an index (e.g. myFileList[0]) to get a File object.

Example with a file input:

<input type="file" />

Listen for the change event; the input’s files property is a FileList. Use files[0] to get the first File and access its properties:

document.querySelector('input').addEventListener('change', () => {
  const file = document.querySelector('input').files[0]
  alert(
    `The file ${file.name} was last modified on ${new Date(
      file.lastModified,
    ).toDateString()}`,
  )
})

See it on codepen: https://codepen.io/flaviocopes/pen/EzxdMm/

Lessons in this unit:

0:	Introduction
1:	▶︎ The File object
2:	FileList
3:	FileReader
4:	Blob
5:	FormData
6:	Accept only images in file input
7:	Check if checkbox is checked
8:	Reset a form
9:	File upload with server handling
10:	Drag and drop file upload
11:	Validating file size before upload