| OLD | NEW |
| 1 <h1>Storage APIs</h1> | 1 <h1>Storage APIs</h1> |
| 2 | 2 |
| 3 <p> | 3 <p> |
| 4 Almost every aspect of app development involves some element | 4 Almost every aspect of app development involves some element |
| 5 of sending or receiving data. | 5 of sending or receiving data. |
| 6 Starting with the basics, | 6 Starting with the basics, |
| 7 you should use an MVC framework to help you design and implement your app | 7 you should use an MVC framework to help you design and implement your app |
| 8 so that data is completely separate from the app's view on that data | 8 so that data is completely separate from the app's view on that data |
| 9 (see <a href="app_frameworks">MVC Architecture</a>). | 9 (see <a href="app_frameworks">MVC Architecture</a>). |
| 10 </p> | 10 </p> |
| 11 | 11 |
| 12 <p> | 12 <p> |
| 13 You also need to think about how data is handled when your app is offline | 13 You also need to think about how data is handled when your app is offline |
| 14 (see <a href="offline_apps">Offline First</a>). | 14 (see <a href="offline_apps">Offline First</a>). |
| 15 This doc briefly introduces the storage options | 15 This doc briefly introduces the storage options |
| 16 for sending, receiving, and saving data locally; | 16 for sending, receiving, and saving data locally; |
| 17 the remainder of the doc shows you how | 17 the remainder of the doc shows you how |
| 18 to use Chrome's File System and Sync File System APIs | 18 to use Chrome's File System and Sync File System APIs |
| 19 (see also <a href="fileSystem">fileSystem API</a> and | 19 (see also <a href="fileSystem">fileSystem API</a> and |
| 20 <a href="syncFileSystem">syncFileSystem API</a>). | 20 <a href="syncFileSystem">syncFileSystem API</a>). |
| 21 </p> | 21 </p> |
| 22 | 22 |
| 23 <p class="note"> | 23 <p class="note"> |
| 24 <b>API Samples: </b> | 24 <b>API Samples: </b> |
| 25 Want to play with the code? | 25 Want to play with the code? |
| 26 Check out the | 26 Check out the |
| 27 <a href="https://github.com/GoogleChrome/chrome-app-samples/tree/master/filesyst
em-access">filesystem-access</a>, | 27 <a href="https://github.com/GoogleChrome/chrome-app-samples/tree/master/samples/
filesystem-access">filesystem-access</a>, |
| 28 <a href="https://github.com/GoogleChrome/chrome-app-samples/tree/master/syncfs-e
ditor">syncfs-editor</a> | 28 <a href="https://github.com/GoogleChrome/chrome-app-samples/tree/master/samples/
syncfs-editor">syncfs-editor</a> |
| 29 and <a href="https://github.com/GoogleChrome/chrome-app-samples/tree/master/stor
age">storage</a> samples. | 29 and <a href="https://github.com/GoogleChrome/chrome-app-samples/tree/master/samp
les/storage">storage</a> samples. |
| 30 </p> | 30 </p> |
| 31 | 31 |
| 32 <h2 id="options">Storage options</h2> | 32 <h2 id="options">Storage options</h2> |
| 33 | 33 |
| 34 <p> | 34 <p> |
| 35 Packaged apps use many different mechanisms | 35 Packaged apps use many different mechanisms |
| 36 to send and receive data. | 36 to send and receive data. |
| 37 For external data (resources, web pages), | 37 For external data (resources, web pages), |
| 38 you need to be aware of the | 38 you need to be aware of the |
| 39 <a href="contentSecurityPolicy">Content Security Policy (CSP)</a>. | 39 <a href="contentSecurityPolicy">Content Security Policy (CSP)</a>. |
| (...skipping 31 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 71 a photo-sharing app can use the Filesystem API | 71 a photo-sharing app can use the Filesystem API |
| 72 to read and write any photos that a user selects. | 72 to read and write any photos that a user selects. |
| 73 </p> | 73 </p> |
| 74 | 74 |
| 75 <p> | 75 <p> |
| 76 With Chrome's Sync Filesystem API, | 76 With Chrome's Sync Filesystem API, |
| 77 apps can save and synchronize data | 77 apps can save and synchronize data |
| 78 on a user's Google Drive | 78 on a user's Google Drive |
| 79 so that the same data can be available across different clients. | 79 so that the same data can be available across different clients. |
| 80 For example, a | 80 For example, a |
| 81 <a href="https://github.com/GoogleChrome/chrome-app-samples/tree/master/syncfs-e
ditor">cloud-backed text editor</a> | 81 <a href="https://github.com/GoogleChrome/chrome-app-samples/tree/master/samples/
syncfs-editor">cloud-backed text editor</a> |
| 82 app can automatically sync new text files to a user's Google Drive account. | 82 app can automatically sync new text files to a user's Google Drive account. |
| 83 When the user opens the text editor in a new client, | 83 When the user opens the text editor in a new client, |
| 84 Google Drive pushes new text files to that instance of the text editor. | 84 Google Drive pushes new text files to that instance of the text editor. |
| 85 </p> | 85 </p> |
| 86 | 86 |
| 87 <p> | 87 <p> |
| 88 Note: Unlike regular Filesystem API, Chrome's Sync Filesystem API | 88 Note: Unlike regular Filesystem API, Chrome's Sync Filesystem API |
| 89 currently does <b>NOT</b> support directory operations, except for | 89 currently does <b>NOT</b> support directory operations, except for |
| 90 reading directory entries in the root directory. | 90 reading directory entries in the root directory. |
| 91 An attempt to create a directory in Sync Filesystem will result | 91 An attempt to create a directory in Sync Filesystem will result |
| (...skipping 46 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 138 }); | 138 }); |
| 139 } | 139 } |
| 140 </pre> | 140 </pre> |
| 141 | 141 |
| 142 <h3 id="drag">Implementing drag-and-drop</h3> | 142 <h3 id="drag">Implementing drag-and-drop</h3> |
| 143 | 143 |
| 144 <p> | 144 <p> |
| 145 If you need to implement drag-and-drop selection, | 145 If you need to implement drag-and-drop selection, |
| 146 the drag-and-drop file controller | 146 the drag-and-drop file controller |
| 147 (<code>dnd.js</code>) in the | 147 (<code>dnd.js</code>) in the |
| 148 <a href="https://github.com/GoogleChrome/chrome-app-samples/tree/master/filesyst
em-access">filesystem-access</a> | 148 <a href="https://github.com/GoogleChrome/chrome-app-samples/tree/master/samples/
filesystem-access">filesystem-access</a> |
| 149 sample is a good starting point. | 149 sample is a good starting point. |
| 150 The controller creates a file entry | 150 The controller creates a file entry |
| 151 from a <code>DataTransferItem</code> | 151 from a <code>DataTransferItem</code> |
| 152 via drag-and-drop. | 152 via drag-and-drop. |
| 153 In this example, | 153 In this example, |
| 154 the <code>fileEntry</code> is set | 154 the <code>fileEntry</code> is set |
| 155 to the first dropped item. | 155 to the first dropped item. |
| 156 </p> | 156 </p> |
| 157 | 157 |
| 158 <pre> | 158 <pre> |
| 159 var dnd = new DnDFileController('body', function(data) { | 159 var dnd = new DnDFileController('body', function(data) { |
| 160 var fileEntry = data.items[0].webkitGetAsEntry(); | 160 var fileEntry = data.items[0].webkitGetAsEntry(); |
| 161 displayPath(fileEntry); | 161 displayPath(fileEntry); |
| 162 }); | 162 }); |
| 163 </pre> | 163 </pre> |
| 164 | 164 |
| 165 <h3 id="read">Reading a file</h3> | 165 <h3 id="read">Reading a file</h3> |
| 166 | 166 |
| 167 <p> | 167 <p> |
| 168 The following code opens the file (read-only) and | 168 The following code opens the file (read-only) and |
| 169 reads it as text using a <code>FileReader</code> object. | 169 reads it as text using a <code>FileReader</code> object. |
| 170 If the file doesn't exist, an error is thrown. | 170 If the file doesn't exist, an error is thrown. |
| 171 </p> | 171 </p> |
| 172 | 172 |
| 173 <pre> | 173 <pre> |
| 174 var chosenFileEntry = null; | 174 var chosenFileEntry = null; |
| 175 | 175 |
| 176 chooseFileButton.addEventListener('click', function(e) { | 176 chooseFileButton.addEventListener('click', function(e) { |
| 177 chrome.fileSystem.chooseEntry({type: 'openFile'}, function(readOnlyEntry) { | 177 chrome.fileSystem.chooseEntry({type: 'openFile'}, function(readOnlyEntry) { |
| 178 | 178 |
| 179 readOnlyEntry.file(function(file) { | 179 readOnlyEntry.file(function(file) { |
| 180 var reader = new FileReader(); | 180 var reader = new FileReader(); |
| 181 | 181 |
| 182 reader.onerror = errorHandler; | 182 reader.onerror = errorHandler; |
| 183 reader.onloadend = function(e) { | 183 reader.onloadend = function(e) { |
| 184 console.log(e.target.result); | 184 console.log(e.target.result); |
| 185 }; | 185 }; |
| 186 | 186 |
| 187 reader.readAsText(file); | 187 reader.readAsText(file); |
| 188 }); | 188 }); |
| (...skipping 226 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 415 You can also look at the user's sync backend service storage (in Google Drive). | 415 You can also look at the user's sync backend service storage (in Google Drive). |
| 416 Synced files are saved in a hidden Google Drive folder, | 416 Synced files are saved in a hidden Google Drive folder, |
| 417 <strong>Chrome Syncable FileSystem</strong>. The folder won't be shown in | 417 <strong>Chrome Syncable FileSystem</strong>. The folder won't be shown in |
| 418 your 'My Drive' list but can be accessed by searching the folder name | 418 your 'My Drive' list but can be accessed by searching the folder name |
| 419 in the search box. (Note that the remote folder layout is | 419 in the search box. (Note that the remote folder layout is |
| 420 <strong>not</strong> guaranteed to remain backwards compatible between | 420 <strong>not</strong> guaranteed to remain backwards compatible between |
| 421 releases.) | 421 releases.) |
| 422 </p> | 422 </p> |
| 423 | 423 |
| 424 <p class="backtotop"><a href="#top">Back to top</a></p> | 424 <p class="backtotop"><a href="#top">Back to top</a></p> |
| OLD | NEW |