# The File Object

> Learn what the browser File object is, a Blob with name, lastModified, size and type properties, and how to read it from an input type file change event.

Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2019-05-06 | Updated: 2019-05-10 | Topics: [Web Platform](https://flaviocopes.com/tags/platform/) | Canonical: https://flaviocopes.com/file/

Browsers provide us a `File` object.

The File object is a [**Blob**](https://flaviocopes.com/blob/) object, and it provides 3 properties on top of it:

- `name` (a [String](https://flaviocopes.com/javascript-string/))
- `lastModified` (the [UNIX timestamp](https://flaviocopes.com/how-to-get-timestamp-javascript/) of the last modified date time)

which adds up to the `Blob` object properties:

- `size` (the size in bytes)
- `type` (the MIME type)

You will receive a `File` object when interacting with the `FileList` object, which can be retrieved from an HTML Form with an `<input type="file" />` element, or when interacting with **Drag and Drop**.

When you got a `FileList` object, when you loop over it or you pick an element (for example the first item with `myFileList[0]`) you will get a `File` object.

Say you have an `input type="file"` element in your form:

```js
<input type="file" />
```

Now you can listen for the `change` event on this element, so when you choose a file you'll get information about it. `document.querySelector('input').files` will return a `FileList` object, like explained above, and using `[0]` we get the first file loaded, and we can access all the properties we need from the `File` object:

```js
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/>