Widely available Supported across all major browsers. Safe to use in production.

File API

The File interface provides information about files and allows JavaScript in a web page to access their content.

File objects are generally retrieved from a FileList object returned as a result of a user selecting files using the <input> element, or from a drag and drop operation's DataTransfer object.

A File object is a specific kind of Blob, and can be used in any context that a Blob can. In particular, the following APIs accept both Blobs and File objects:

FileReader

URL.createObjectURL()

Window.createImageBitmap() and WorkerGlobalScope.createImageBitmap()

the body option to fetch()

XMLHttpRequest.send()

See Using files from web applications for more information and examples.

Blob File

Files, Clipboard and Streams

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
File
13
12
7
4
18
3.2
Blob

The Blob interface represents a blob, which is a file-like object of immutable, raw data; they can be read as text or binary data, or converted into a ReadableStream so its methods can be used for processing the data.
5
12
4
6
18
6
arrayBuffer

The arrayBuffer() method of the Blob interface returns a Promise that resolves with the contents of the blob as binary data contained in an ArrayBuffer.
76
79
69
14
76
14.5
Blob

The Blob() constructor returns a new Blob object. The content of the blob consists of the concatenation of the values given in the parameter blobParts.
20
12
13
6
25
6
bytes

The bytes() method of the Blob interface returns a Promise that resolves with a Uint8Array containing the contents of the blob as an array of bytes.
144
144
128
18
144
18
size

The size read-only property of the Blob interface returns the size of the Blob or File in bytes.
5
12
4
6
18
6
slice

The slice() method of the Blob interface creates and returns a new Blob object which contains data from a subset of the blob on which it's called.
21
12
13
7
25
7
stream

The stream() method of the Blob interface returns a ReadableStream which upon reading returns the data contained within the Blob.
76
79
69
14.1
76
14.5
text

The text() method of the Blob interface returns a Promise that resolves with a string containing the contents of the blob, interpreted as UTF-8.
76
79
69
14
76
14.5
type

The type read-only property of the Blob interface returns the MIME type of the file.
5
12
4
6
18
6
File

The File() constructor creates a new File object instance.
38
79
28
10.1
38
10.3
lastModified

The lastModified read-only property of the File interface provides the last modified date of the file as the number of milliseconds since the Unix epoch (January 1, 1970 at midnight). Files without a known last modified date return the current date.
13
18
15
10
18
10
name

The name read-only property of the File interface returns the name of the file represented by a File object. For security reasons, the path is excluded from this property.
13
12
3.6
8
18
8
FileList

The FileList interface represents an object of this type returned by the files property of the HTML input element; this lets you access the list of files selected with the element. It's also used for a list of files dropped into web content when using the drag and drop API; see the DataTransfer object for details on this usage.
2
12
3
4
18
3.2
item

The item() method of the FileList interface returns a File object representing the file at the specified index in the file list.
2
12
3
4
18
3.2
length

The length read-only property of the FileList interface returns the number of files in the FileList.
2
12
3
4
18
3.2
FileReader

The FileReader interface lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer, using File or Blob objects to specify the file or data to read.
6
12
3.6
6
18
6
abort

The abort() method of the FileReader interface aborts the read operation. Upon return, the FileReader.readyState will be DONE.
6
12
3.6
6
18
6
abort_event

The abort event of the FileReader interface is fired when a read has been aborted: for instance because the program called FileReader.abort().
6
12
3.6
6
18
6
error

The error read-only property of the FileReader interface returns the error that occurred while reading the file.
6
12
3.6
6
18
6
error_event

The error event of the FileReader interface is fired when the read failed due to an error (for example, because the file was not found or not readable).
6
12
3.6
6
18
6
FileReader

The FileReader() constructor creates a new FileReader.
6
12
3.6
6
18
6
load_event

The load event of the FileReader interface is fired when a file has been read successfully.
6
12
3.6
6
18
6
loadend_event

The loadend event of the FileReader interface is fired when a file read has completed, successfully or not.
6
12
3.6
6
18
6
loadstart_event

The loadstart event of the FileReader interface is fired when a file read operation has begun.
6
12
79
6
18
6
progress_event

The progress event of the FileReader interface is fired periodically as the FileReader reads data.
6
12
3.6
6
18
6
readAsArrayBuffer

The readAsArrayBuffer() method of the FileReader interface is used to start reading the contents of a specified Blob or File. When the read operation is finished, the FileReader.readyState property becomes DONE, and the FileReader/loadend_event event is triggered. At that time, the FileReader.result property contains an ArrayBuffer representing the file's…
6
12
3.6
6
18
6
readAsDataURL

The readAsDataURL() method of the FileReader interface is used to read the contents of the specified Blob or File. When the read operation is finished, the FileReader.readyState property becomes DONE, and the FileReader/loadend_event event is triggered. At that time, the FileReader.result attribute contains the data as a data: URL representing the file's…
6
12
3.6
6
18
6
readAsText

The readAsText() method of the FileReader interface is used to read the contents of the specified Blob or File. When the read operation is complete, the FileReader.readyState property is changed to DONE, the FileReader/loadend_event event is triggered, and the FileReader.result property contains the contents of the file as a text string.
6
12
3.6
6
18
6
readyState

The readyState read-only property of the FileReader interface provides the current state of the reading operation. This will be one of the states: EMPTY, LOADING, or DONE.
6
12
3.6
6
18
6
result

The result read-only property of the FileReader interface returns the file's contents. This property is only valid after the read operation is complete, and the format of the data depends on which of the methods was used to initiate the read operation.
6
12
3.6
6
18
6
worker_support

Available in workers
6
12
46
6
18
6
FileReaderSync

The FileReaderSync interface allows to read File or Blob objects synchronously. This interface is only available in workers as it enables synchronous I/O that could potentially block.
7
12
8
6
18
6
FileReaderSync

The FileReaderSync() constructor creates a new FileReaderSync.
7
12
8
6
18
6
readAsArrayBuffer

The readAsArrayBuffer() method of the FileReaderSync interface allows to read File or Blob objects in a synchronous way into an ArrayBuffer. This interface is only available in workers as it enables synchronous I/O that could potentially block.
9
12
8
6
18
6
readAsDataURL

The readAsDataURL() method of the FileReaderSync interface allows to read File or Blob objects in a synchronous way into a string representing a data URL. This interface is only available in workers as it enables synchronous I/O that could potentially block.
7
12
8
6
18
6
readAsText

The readAsText() method of the FileReaderSync interface allows to read File or Blob objects in a synchronous way into a string. This interface is only available in workers as it enables synchronous I/O that could potentially block.
7
12
8
6
18
6
worker_support

Available in workers
7
12
8
6
18
6
createObjectURL_static

The createObjectURL() static method of the URL interface creates a string containing a blob URL pointing to the object given in the parameter.
19
12
19
6
25
6
revokeObjectURL_static

The revokeObjectURL() static method of the URL interface releases an existing object URL which was previously created by calling URL.createObjectURL_static.
19
12
19
6
25
6
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (7)
Implementation note
  • Non-standard implementation.
Notes 1 item(s)
Implementation note
  • Before Firefox 16, the second parameter, when set to `null` or `undefined`, leads to an error instead of being handled as an empty dictionary.
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (25)
Compatibility
  • Available with a vendor prefix: webkit (5)
Notes 3 item(s)
Implementation note
  • Before Firefox 12, there was a bug that affected the behavior of `Blob.slice()`; it did not work for `start` and `end` positions outside the range of signed 64-bit values; it has now been fixed to support unsigned 64-bit values.
Removed
  • This feature was removed in a later browser version (13)
Compatibility
  • Available with a vendor prefix: moz (5)
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (7)
Compatibility
  • Available with a vendor prefix: webkit (6)
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (25)
Compatibility
  • Available with a vendor prefix: webkit (18)
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (7)
Compatibility
  • Available with a vendor prefix: webkit (6)
Notes 1 item(s)
Implementation note
  • Before Firefox 4, `Blob` parameters were `File` parameters.
Notes 3 item(s)
Implementation note
  • Before Firefox 13, the `error` property returned a `FileError` object.
  • From Firefox 13 to Firefox 58, the `error` property returned a `DOMError` object.
  • From Firefox 58, the `error` property returns a `DOMException` object.
Notes 1 item(s)
Implementation note
  • The `error` property returns a `DOMError` object.
Notes 1 item(s)
Implementation note
  • The `error` property returns a `DOMError` object.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (79)
Implementation note
  • `loadstart` event dispatches synchronously (should be asynchronously as per spec).
Notes 1 item(s)
Implementation note
  • `createObjectURL()` is no longer available within the context of a `ServiceWorker`.
Notes 1 item(s)
Implementation note
  • `revokeObjectURL()` is no longer available within the context of a `ServiceWorker`.

Use cases

  • Using File API

    The File interface provides information about files and allows JavaScript in a web page to access their content.

Cautions

  • May not be supported in older browsers.

Implementation notes

  • Some APIs require a secure context (HTTPS) or user activation. Check the requirements before use.

Related links