getting to know the file api

And how we lived without it for so long

Before the File API

IE9

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

Chrome/Opera

Firefox

IE10+

iOS 6+

Android 4

Safari 5.1*

Blobs

`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"}); 

expect(textBlob.type).toEqual("text/plain");
expect(textBlob.size).toBe(2);

So What?

Upload a blob

send new Blob via XHR

"raw" or wrapped in FormData

Download, modify, display

GET image to `Blob`

Convert to data URI

Transfer to <img>

Draw onto <canvas>

Flip

Show <canvas> / transfer back to <img>

Uploading from <canvas>

...a bit tricky (for now)

HTMLCanvasElement.toBlob() = not well supported

Files

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