getting to know the file api

And how we lived without it for so long

Before the File API


Safari 5

Android 2.3

iOS 5

No access to files

(limited) Uploads via form or "iframe trick"

Complete dependence on the server

What is the File API?

W3C specification (2009)

Represent files in the browser

Wide browser support




iOS 6+

Android 4

Safari 5.1*


`Blob`: top-level file interface

Represent any content

readonly attribute unsigned long long size;
readonly attribute DOMString type;

Blob.prototype = {
    slice: function(start, end, type) {}

Make your own blob

var textBlob = new Blob(["hi"], {type: "text/plain"}); 


So What?

Upload a blob

send new Blob  via XHR

"raw" or wrapped in FormData

Download, modify, display

  1. *GET image to `Blob`
  2. *Convert to data URI
  3. Transfer to <img>
  4. Draw onto <canvas>
  5. Flip
  6. Show <canvas> / transfer back to <img>

Uploading from <canvas>

...a bit tricky (for now)

HTMLCanvasElement.toBlob()  = not well supported


Represent a file on disk:

readonly attribute DOMString name;
readonly attribute Date lastModifiedDate;

File.prototype = new Blob();

Inherits all other properties from Blob

A Better <input type="file">

HTMLInputElement.files property (FileList)

`multiple` attribute

`webkitdirectory` attribute

Handling dropped files...

Drop files, display their name/size, upload

Drop image & video files, render

Read files with `FileReader`

Identify extension-less files

Handle dropped/selected HTML files, render in iframe

The "File System" API

Chrome/Opera only

W3C Spec Considered "dead"

Read & Write Files From/To the Local Disk*

Use cases

Handle dropped folders

Cache large files for later use

Useful Links?

Getting to know the File API

By Ray Nicholus

Getting to know the File API

  • 1,979