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>
-
*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
Useful Links?
Getting to know the File API
By Ray Nicholus
