getting to know the file api
![](http://www.w3.org/html/logo/downloads/HTML5_Logo_256.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/raynicholus/images/395329/demo.png)
(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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/raynicholus/images/395334/demo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/raynicholus/images/395332/demo.png)
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>
![](https://s3.amazonaws.com/media-p.slid.es/uploads/raynicholus/images/395335/demo.png)
Uploading from <canvas>
...a bit tricky (for now)
HTMLCanvasElement.toBlob() = not well supported
![](https://s3.amazonaws.com/media-p.slid.es/uploads/raynicholus/images/395336/demo.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/raynicholus/images/395337/demo.png)
Handling dropped files...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/raynicholus/images/395342/demo.png)
Drop files, display their name/size, upload
Drop image & video files, render
![](https://s3.amazonaws.com/media-p.slid.es/uploads/raynicholus/images/395338/demo.png)
Read files with `FileReader`
![](https://s3.amazonaws.com/media-p.slid.es/uploads/raynicholus/images/395345/demo.png)
Identify extension-less files
![](https://s3.amazonaws.com/media-p.slid.es/uploads/raynicholus/images/395344/demo.png)
Handle dropped/selected HTML files, render in iframe
The "File System" API
![](https://s3.amazonaws.com/media-p.slid.es/uploads/raynicholus/images/394431/warning.png)
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,997