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



  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

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

Useful Links?


Getting to know the File API

By Ray Nicholus

Getting to know the File API

  • 1,065
Loading comments...

More from Ray Nicholus