Introduction to HTML5 Filesystem API

This is my deck for my "Introduction to HTML5 Filesystem API" talk on HannoverJS.

Transcript

1. INTRODUCTION TO HTML FILESYSTEM API Pascal Precht / @PascalPrecht
2. hi there. Pascal Precht Front-end Engineer, Neoskop GmbH
3. HTML5 Filesystem API
4. HTML5 Filesystem API
5. HTML5 Filesystem API
6. HTML5 Filesystem API FileWriter
7. HTML5 Filesystem API FileWriter File/Blob, FileList, FileReader
8. HTML5 Filesystem API FileWriter File/Blob, FileList, FileReader DirectoryReader, FileEntry/ DirectoryEntry, LocalFileSystem
9. Use cases?
10. Use cases?
11. • Persistent Uploader Local Sandbox, uploading a chunk at a time Use cases?
12. • Persistent Uploader Local Sandbox, uploading a chunk at a time • Video Game, Music, Apps with media assets Using assets from local cache Use cases?
13. • Persistent Uploader Local Sandbox, uploading a chunk at a time • Video Game, Music, Apps with media assets Using assets from local cache • Offline web mail client Storing attachments locally Use cases?
17. Let’s dive in!
18. 3 Storage Types • Temporary Storage No prompt, reasonable amount of storage is granted by default
19. 3 Storage Types • Temporary Storage No prompt, reasonable amount of storage is granted by default • Persistent Storage Browser prompt, zero quota granted by default, more storage can be requested
20. 3 Storage Types • Temporary Storage No prompt, reasonable amount of storage is granted by default • Persistent Storage Browser prompt, zero quota granted by default, more storage can be requested • Unlimited Storage Chrome Apps and Extensions, no prompt
21. window.webkitStorageInfo
22. webkitStorageInfo.queryUsageAndQuota(TEMPORARY, function (usage, quota) { console.log(“Using “+(usage/quota)*100+”% of temporary storage”); }, function (e) { console.log(“Error: “+ e); });
23. webkitStorageInfo.queryUsageAndQuota(TEMPORARY, function (usage, quota) { console.log(“Using “+(usage/quota)*100+”% of temporary storage”); }, function (e) { console.log(“Error: “+ e); });
24. webkitStorageInfo.queryUsageAndQuota(TEMPORARY, function (usage, quota) { console.log(“Using “+(usage/quota)*100+”% of temporary storage”); }, function (e) { console.log(“Error: “+ e); });
25. webkitStorageInfo.queryUsageAndQuota(TEMPORARY, function (usage, quota) { console.log(“Using “+(usage/quota)*100+”% of temporary storage”); }, function (e) { console.log(“Error: “+ e); });
26. webkitStorageInfo.queryUsageAndQuota(TEMPORARY, function (usage, quota) { console.log(“Using “+(usage/quota)*100+”% of temporary storage”); }, function (e) { console.log(“Error: “+ e); });
27. webkitStorageInfo.requestQuota(TEMPORARY, 2*1024*1024, function (bytes) { console.log(“Granted “+bytes+” bytes in temporary storage”); }, function (e) { console.log(“Error: “+ e); });
28. webkitStorageInfo.requestQuota(TEMPORARY, 2*1024*1024, function (bytes) { console.log(“Granted “+bytes+” bytes in temporary storage”); }, function (e) { console.log(“Error: “+ e); });
29. webkitStorageInfo.requestQuota(TEMPORARY, 2*1024*1024, function (bytes) { console.log(“Granted “+bytes+” bytes in temporary storage”); }, function (e) { console.log(“Error: “+ e); });
30. webkitStorageInfo.requestQuota(TEMPORARY, 2*1024*1024, function (bytes) { console.log(“Granted “+bytes+” bytes in temporary storage”); }, function (e) { console.log(“Error: “+ e); });
31. webkitStorageInfo.requestQuota(TEMPORARY, 2*1024*1024, function (bytes) { console.log(“Granted “+bytes+” bytes in temporary storage”); }, function (e) { console.log(“Error: “+ e); });
32. webkitStorageInfo.requestQuota(TEMPORARY, 2*1024*1024, function (bytes) { console.log(“Granted “+bytes+” bytes in temporary storage”); }, function (e) { console.log(“Error: “+ e); });
33. webkitStorageInfo.requestQuota(PERSISTENT, bytes, onSuccess, onError);
34. window.requestFileSystem
35. window.webkitRequestFileSystem(type, size, onSuccess, onError); webkitStorageInfo.requestQuota(PERSISTENT, bytes, function (bytes) { webkitRequestFileSystem(PERSISTENT, bytes, function (fs) { console.log(“Opened filesystem: “+fs.name”); }, function (e) { console.log(“Error: “+ e); }); }, onError);
36. Working with Files
37. FileEntry.isFile FileEntry.isDirectory FileEntry.fullPath FileEntry.filesystem FileEntry.getMetadata(onSuccess, onError); FileEntry.moveTo(parentDirEntry, newName, onSuccess, onError); FileEntry.copyTo(parentDirEntry, newName, onSuccess, onError); FileEntry.toUrl(); FileEntry.remove(onSuccess, onError); FileEntry.getParent(onSuccess, onError); FileEntry.createWriter(onSuccess, onError); FileEntry.file(onSuccess, onError); The FileEntry
38. FileEntry.isFile FileEntry.isDirectory FileEntry.fullPath FileEntry.filesystem // filesystem on which the entry resides FileEntry.getMetadata(onSuccess, onError); FileEntry.moveTo(parentDirEntry, newName, onSuccess, onError); FileEntry.copyTo(parentDirEntry, newName, onSuccess, onError); FileEntry.toUrl(); FileEntry.remove(onSuccess, onError); FileEntry.getParent(onSuccess, onError); FileEntry.createWriter(onSuccess, onError); FileEntry.file(onSuccess, onError); The FileEntry
39. FileEntry.isFile FileEntry.isDirectory FileEntry.fullPath FileEntry.filesystem FileEntry.getMetadata(onSuccess, onError); FileEntry.moveTo(parentDirEntry, newName, onSuccess, onError); FileEntry.copyTo(parentDirEntry, newName, onSuccess, onError); FileEntry.toUrl(); // Returns a filesystem: URL FileEntry.remove(onSuccess, onError); FileEntry.getParent(onSuccess, onError); FileEntry.createWriter(onSuccess, onError); FileEntry.file(onSuccess, onError); The FileEntry
40. FileEntry.isFile FileEntry.isDirectory FileEntry.fullPath FileEntry.filesystem FileEntry.getMetadata(onSuccess, onError); FileEntry.moveTo(parentDirEntry, newName, onSuccess, onError); FileEntry.copyTo(parentDirEntry, newName, onSuccess, onError); FileEntry.toUrl(); FileEntry.remove(onSuccess, onError); FileEntry.getParent(onSuccess, onError); FileEntry.createWriter(onSuccess, onError); // new FileWriter FileEntry.file(onSuccess, onError); The FileEntry
41. webkitRequestFileSystem(PERSISTENT, bytes, function (fs) { fs.root.getFile('example.txt', {create: true}, function (fileEntry) { fileEntry.getMetadata(function (md) { console.log(md.modificationTime.toDateString()); }); }); }); Creating a File
42. webkitRequestFileSystem(PERSISTENT, bytes, function (fs) { fs.root.getFile('example.txt', {create: true}, function (fileEntry) { fileEntry.getMetadata(function (md) { console.log(md.modificationTime.toDateString()); }); }); }); Creating a File
43. webkitRequestFileSystem(PERSISTENT, bytes, function (fs) { fs.root.getFile('example.txt', {create: true}, function (fileEntry) { fileEntry.getMetadata(function (md) { console.log(md.modificationTime.toDateString()); }); }); }); Creating a File
44. webkitRequestFileSystem(PERSISTENT, bytes, function (fs) { fs.root.getFile('example.txt', {create: true}, function (fileEntry) { fileEntry.getMetadata(function (md) { console.log(md.modificationTime.toDateString()); }); }); }); Creating a File
45. webkitRequestFileSystem(PERSISTENT, bytes, function (fs) { fs.root.getFile('example.txt', {create: true}, function (fileEntry) { fileEntry.getMetadata(function (md) { console.log(md.modificationTime.toDateString()); }); }); }); Creating a File
46. FileReader.error FileReader.readyState FileReader.result FileReader.abort(blob); FileReader.readAsArrayBuffer(blob); FileReader.readAsBinaryString(blob); FileReader.readAsDataUrl(blob); FileReader.readAsText(file); FileReader.onabort FileReader.onload FileReader.onloadstart FileReader.onloadend FileReader.onprogress The FileReader
47. FileReader.error FileReader.readyState FileReader.result // file’s contents FileReader.abort(blob); FileReader.readAsArrayBuffer(blob); FileReader.readAsBinaryString(blob); FileReader.readAsDataUrl(blob); FileReader.readAsText(file); FileReader.onabort FileReader.onload FileReader.onloadstart FileReader.onloadend FileReader.onprogress The FileReader
48. FileReader.error FileReader.readyState FileReader.result FileReader.abort(blob); FileReader.readAsArrayBuffer(blob); FileReader.readAsBinaryString(blob); FileReader.readAsDataUrl(blob); FileReader.readAsText(file); FileReader.onabort FileReader.onload // Read operation successfully completed FileReader.onloadstart FileReader.onloadend FileReader.onprogress The FileReader
49. FileReader.error FileReader.readyState FileReader.result FileReader.abort(blob); FileReader.readAsArrayBuffer(blob); FileReader.readAsBinaryString(blob); FileReader.readAsDataUrl(blob); FileReader.readAsText(file); FileReader.onabort FileReader.onload FileReader.onloadstart FileReader.onloadend // Read completed, whether successfully or not FileReader.onprogress The FileReader
50. webkitRequestFileSystem(PERSISTENT, bytes, function (fs) { fs.root.getFile('example.txt', {}, function (fileEntry) { fileEntry.file(function (file) { var reader = new FileReader(); reader.onloadend = function (e) { var textarea = document.createElement(‘textarea’); textarea.value = this.result; document.body.appendChild(textarea); }; reader.readAsText(file); }); }); }); Reading a File
51. webkitRequestFileSystem(PERSISTENT, bytes, function (fs) { fs.root.getFile('example.txt', {}, function (fileEntry) { fileEntry.file(function (file) { var reader = new FileReader(); reader.onloadend = function (e) { var textarea = document.createElement(‘textarea’); textarea.value = this.result; document.body.appendChild(textarea); }; reader.readAsText(file); }); }); }); Reading a File
52. FileReader.position FileReader.length FileReader.error FileReader.readyState FileReader.abort(); FileReader.write(blob); FileReader.seek(offset); FileReader.truncate(size); FileReader.onabort FileReader.onerror FileReader.onprogress FileReader.onwrite FileReader.onwritestart FileReader.onwriteend The FileWriter
53. FileReader.position FileReader.length FileReader.error FileReader.readyState // One of 3 states: INIT, WRITING, DONE FileReader.abort(); FileReader.write(blob); FileReader.seek(offset); FileReader.truncate(size); FileReader.onabort FileReader.onerror FileReader.onprogress FileReader.onwrite FileReader.onwritestart FileReader.onwriteend The FileWriter
54. FileReader.position FileReader.length FileReader.error FileReader.readyState FileReader.abort(); FileReader.write(blob); FileReader.seek(offset); FileReader.truncate(size); // Changes the length of a file FileReader.onabort FileReader.onerror FileReader.onprogress FileReader.onwrite FileReader.onwritestart FileReader.onwriteend The FileWriter
55. FileReader.position FileReader.length FileReader.error FileReader.readyState FileReader.abort(); FileReader.write(blob); FileReader.seek(offset); FileReader.truncate(size); FileReader.onabort FileReader.onerror FileReader.onprogress FileReader.onwrite // write operation successfully completed FileReader.onwritestart FileReader.onwriteend The FileWriter
56. FileReader.position FileReader.length FileReader.error FileReader.readyState FileReader.abort(); FileReader.write(blob); FileReader.seek(offset); FileReader.truncate(size); FileReader.onabort FileReader.onerror FileReader.onprogress FileReader.onwrite FileReader.onwritestart // before writing is about to start FileReader.onwriteend The FileWriter
57. FileReader.position FileReader.length FileReader.error FileReader.readyState FileReader.abort(); FileReader.write(blob); FileReader.seek(offset); FileReader.truncate(size); FileReader.onabort FileReader.onerror FileReader.onprogress FileReader.onwrite FileReader.onwritestart FileReader.onwriteend // write complete, whether successful or not The FileWriter
58. webkitRequestFileSystem(PERSISTENT, bytes, function (fs) { fs.root.getFile('example.txt', {}, function (fileEntry) { fileEntry.createWriter(function (fileWriter) { var blob = new Blob( [“Hello World”], {“type”:”text/plain”}); fileWriter.write(blob); }); }); }); Writing a File
59. webkitRequestFileSystem(PERSISTENT, bytes, function (fs) { fs.root.getFile('example.txt', {}, function (fileEntry) { fileEntry.createWriter(function (fileWriter) { var blob = new Blob( [“Hello World”], {“type”:”text/plain”}); fileWriter.write(blob); }); }); }); Writing a File
60. webkitRequestFileSystem(PERSISTENT, bytes, function (fs) { fs.root.getFile('example.txt', {}, function (fileEntry) { fileEntry.createWriter(function (fileWriter) { var toAppend = new Blob([“Appended sentence”], { “type”:”text/plain” }); fileWriter.seek(fileWriter.length); fileWriter.write(toAppend); }); }); }); Appending Data
61. webkitRequestFileSystem(PERSISTENT, bytes, function (fs) { fs.root.getFile('example.txt', {}, function (fileEntry) { fileEntry.createWriter(function (fileWriter) { var toAppend = new Blob([“Appended sentence”], { “type”:”text/plain” }); fileWriter.seek(fileWriter.length); fileWriter.write(toAppend); }); }); }); Appending Data
62. webkitRequestFileSystem(PERSISTENT, bytes, function (fs) { fs.root.getFile('example.txt', {}, function (fileEntry) { fileEntry.createWriter(function (fileWriter) { var toAppend = new Blob([“Appended sentence”], { “type”:”text/plain” }); fileWriter.seek(fileWriter.length); fileWriter.write(toAppend); }); }); }); Appending Data
63. Importing Files
64. Importing Files
65. • Use <input type=”file”> User selects files from hard drive Importing Files
66. • Use <input type=”file”> User selects files from hard drive • HTML5 Drag And Drop Nearly the same. (Checkout Dnd.js!) Importing Files
67. • Use <input type=”file”> User selects files from hard drive • HTML5 Drag And Drop Nearly the same. (Checkout Dnd.js!) • XHR2 Fetching remote binary data Importing Files
68. • Use <input type=”file”> User selects files from hard drive • HTML5 Drag And Drop Nearly the same. (Checkout Dnd.js!) • XHR2 Fetching remote binary data • Copy and Paste Events Apps can read clipboard information Importing Files
69. <input type=”file”>
70. <input type=”file” multiple>
71. document.querySelector(“input[type=file]”).onchange = function (e) { var files = this.files; webkitRequestFileSystem(TEMPORARY, 1024*1024, function (fs) { var i = 0, file; for(; file = files[i]; i++) { fs.root.getFile(file.name, {create: true}, function (fileEntry) { fileEntry.createWriter(function(fileWriter) { fileWriter.write(file); }); }); } }); });
72. document.querySelector(“input[type=file]”).onchange = function (e) { var files = this.files; webkitRequestFileSystem(TEMPORARY, 1024*1024, function (fs) { var i = 0, file; for(; file = files[i]; i++) { fs.root.getFile(file.name, {create: true}, function (fileEntry) { fileEntry.createWriter(function(fileWriter) { fileWriter.write(file); }); }); } }); });
73. document.querySelector(“input[type=file]”).onchange = function (e) { var files = this.files; webkitRequestFileSystem(TEMPORARY, 1024*1024, function (fs) { var i = 0, file; for(; file = files[i]; i++) { fs.root.getFile(file.name, {create: true}, function (fileEntry) { fileEntry.createWriter(function(fileWriter) { fileWriter.write(file); }); }); } }); });
74. document.querySelector(“input[type=file]”).onchange = function (e) { var files = this.files; webkitRequestFileSystem(TEMPORARY, 1024*1024, function (fs) { var i = 0, file; for(; file = files[i]; i++) { fs.root.getFile(file.name, {create: true}, function (fileEntry) { fileEntry.createWriter(function(fileWriter) { fileWriter.write(file); }); }); } }); });
75. document.querySelector(“input[type=file]”).onchange = function (e) { var files = this.files; webkitRequestFileSystem(TEMPORARY, 1024*1024, function (fs) { var i = 0, file; for(; file = files[i]; i++) { fs.root.getFile(file.name, {create: true}, function (fileEntry) { fileEntry.createWriter(function(fileWriter) { fileWriter.write(file); }); }); } }); });
76. document.querySelector(“input[type=file]”).onchange = function (e) { var files = this.files; webkitRequestFileSystem(TEMPORARY, 1024*1024, function (fs) { var i = 0, file; for(; file = files[i]; i++) { fs.root.getFile(file.name, {create: true}, function (fileEntry) { fileEntry.createWriter(function(fileWriter) { fileWriter.write(file); }); }); } }); });
77. HTML5 Drag And Drop (using DnD.js)
80. dnd.on(‘#dropArea’, { ‘enter’: function (element) { element.classList.add(‘dropping’); }, ‘leave’: function (element) { element.classList.remove(‘dropping’); }, ‘drop’: function (element, files) { [].forEach.call(files, function (file, i) { webkitRequestFileSystem(TEMPORARY, 1024*1024, function (fs) { fs.root.getFile(file.name, {create: true}, function (fileEntry) { fileEntry.createWriter(function (writer) { writer.write(file); }); }); }); } });
81. dnd.on(‘#dropArea’, { ‘enter’: function (element) { element.classList.add(‘dropping’); }, ‘leave’: function (element) { element.classList.remove(‘dropping’); }, ‘drop’: function (element, files) { [].forEach.call(files, function (file, i) { webkitRequestFileSystem(TEMPORARY, 1024*1024, function (fs) { fs.root.getFile(file.name, {create: true}, function (fileEntry) { fileEntry.createWriter(function (writer) { writer.write(file); }); }); }); } });
82. Filesystem URLS
83. filesystem:<ORIGIN>/<STORAGE_TYPE>/<FILENAME> fileEntry.toURL(); e.g. “filesystem:http://localhost/TEMPORARY/foo.txt”
84. window.resolveLocalFileSystemURL
85. window.resolveLocalFileSystemURL(URL, function (fileEntry) { // fileEntry.isFile === true }, onError);
86. window.resolveLocalFileSystemURL(URL, function (fileEntry) { // fileEntry.isFile === true }, onError);
87. window.resolveLocalFileSystemURL(URL, function (fileEntry) { // fileEntry.isFile === true }, onError);
88. window.resolveLocalFileSystemURL(URL, function (fileEntry) { // fileEntry.isFile === true }, onError);
89. Further Reading
90. Further Reading
91. Further Reading
92. • HTML5ROCKS.COM http://www.html5rocks.com/en/tutorials/file/ filesystem/ Further Reading
93. • HTML5ROCKS.COM http://www.html5rocks.com/en/tutorials/file/ filesystem/ • MDN https://developer.mozilla.org/en/DOM/File_API/ File_System_API/FileSystem Further Reading
94. INTRODUCTION TO HTML FILESYSTEM API Pascal Precht Twitter: @PascalPrecht Blog: hopelessart.com Slides: speakerdeck.com/u/pascalprecht/p/introduction-to-html5- filesystem-api
95. Thanks!