| OLD | NEW |
| 1 <!-- BEGIN AUTHORED CONTENT --> | 1 |
| 2 <p id="classSummary"> | 2 <p id="classSummary"> |
| 3 Use the <code>chrome.fileBrowserHandler</code> module to | 3 Use the <code>chrome.fileBrowserHandler</code> module to |
| 4 extend the Chrome OS file browser. | 4 extend the Chrome OS file browser. |
| 5 For example, you can use this API | 5 For example, you can use this API |
| 6 to enable users to upload files to your website. | 6 to enable users to upload files to your website. |
| 7 </p> | 7 </p> |
| 8 |
| 8 <p class="caution"> | 9 <p class="caution"> |
| 9 <b>Important:</b> | 10 <b>Important:</b> |
| 10 This API works <b>only on Chrome OS</b>. | 11 This API works <b>only on Chrome OS</b>. |
| 11 </p> | 12 </p> |
| 13 |
| 12 <p> | 14 <p> |
| 13 The Chrome OS file browser comes up when | 15 The Chrome OS file browser comes up when |
| 14 the user either presses Ctrl+M | 16 the user either presses Ctrl+M |
| 15 or connects an external storage device, | 17 or connects an external storage device, |
| 16 such as an SD card, USB key, external drive, or digital camera. | 18 such as an SD card, USB key, external drive, or digital camera. |
| 17 Besides showing the files on external devices, | 19 Besides showing the files on external devices, |
| 18 the file browser can also display files | 20 the file browser can also display files |
| 19 that the user has previously saved to the system. | 21 that the user has previously saved to the system. |
| 20 </p> | 22 </p> |
| 23 |
| 21 <p> | 24 <p> |
| 22 When the user selects one or more files, | 25 When the user selects one or more files, |
| 23 the file browser adds buttons | 26 the file browser adds buttons |
| 24 representing the valid handlers for those files. | 27 representing the valid handlers for those files. |
| 25 For example, in the following screenshot, | 28 For example, in the following screenshot, |
| 26 selecting a file with a ".jpg" suffix | 29 selecting a file with a ".jpg" suffix |
| 27 results in an "Upload to Picasa" button that the user can click. | 30 results in an "Upload to Picasa" button that the user can click. |
| 28 </p> | 31 </p> |
| 32 |
| 29 <p> | 33 <p> |
| 30 <img src="{{static}}/images/filebrowserhandler.png" | 34 <img src="{{static}}/images/filebrowserhandler.png" |
| 31 width="640" height="400" alt="file browser screenshot" /> | 35 width="640" height="400" alt="file browser screenshot" /> |
| 32 </p> | 36 </p> |
| 37 |
| 38 |
| 33 <h2 id="manifest">Manifest</h2> | 39 <h2 id="manifest">Manifest</h2> |
| 40 |
| 34 <p> | 41 <p> |
| 35 You must declare the "fileBrowserHandler" permission | 42 You must declare the "fileBrowserHandler" permission |
| 36 in the <a href="manifest.html">extension manifest</a>, | 43 in the <a href="manifest.html">extension manifest</a>, |
| 37 and you must use the "file_browser_handlers" field | 44 and you must use the "file_browser_handlers" field |
| 38 to register the extension as a handler of at least one file type. | 45 to register the extension as a handler of at least one file type. |
| 39 You should also provide a 16x16 icon | 46 You should also provide a 16x16 icon |
| 40 to be displayed on the button. | 47 to be displayed on the button. |
| 41 For example: | 48 For example: |
| 42 </p> | 49 </p> |
| 50 |
| 43 <pre> | 51 <pre> |
| 44 { | 52 { |
| 45 "name": "My extension", | 53 "name": "My extension", |
| 46 ... | 54 ... |
| 47 <b>"file_browser_handlers"</b>: [ | 55 <b>"file_browser_handlers"</b>: [ |
| 48 { | 56 { |
| 49 <b>"id"</b>: "upload", | 57 <b>"id"</b>: "upload", |
| 50 <b>"default_title"</b>: "Save to Gallery", <em>// What the button will dis
play</em> | 58 <b>"default_title"</b>: "Save to Gallery", <em>// What the button will dis
play</em> |
| 51 <b>"file_filters"</b>: [ | 59 <b>"file_filters"</b>: [ |
| 52 "filesystem:*.jpg", <em>// To match all files, use "filesystem:*.*"</em> | 60 "filesystem:*.jpg", <em>// To match all files, use "filesystem:*.*"</em> |
| 53 "filesystem:*.jpeg", | 61 "filesystem:*.jpeg", |
| 54 "filesystem:*.png" | 62 "filesystem:*.png" |
| 55 ] | 63 ] |
| 56 } | 64 } |
| 57 ]</b>, | 65 ]</b>, |
| 58 "permissions" : [ | 66 "permissions" : [ |
| 59 <b>"fileBrowserHandler"</b> | 67 <b>"fileBrowserHandler"</b> |
| 60 ], | 68 ], |
| 61 "icons": { <b>"16"</b>: "icon16.png", | 69 "icons": { <b>"16"</b>: "icon16.png", |
| 62 "48": "icon48.png", | 70 "48": "icon48.png", |
| 63 "128": "icon128.png" }, | 71 "128": "icon128.png" }, |
| 64 ... | 72 ... |
| 65 }</pre> | 73 }</pre> |
| 74 |
| 66 <p class="note"> | 75 <p class="note"> |
| 67 <b>Note:</b> | 76 <b>Note:</b> |
| 68 You can specify locale-specific strings for the value of "default_title". | 77 You can specify locale-specific strings for the value of "default_title". |
| 69 See <a href="i18n.html">Internationalization (i18n)</a> for details. | 78 See <a href="i18n.html">Internationalization (i18n)</a> for details. |
| 70 </p> | 79 </p> |
| 80 |
| 71 <h2 id="code">Implementing a file browser handler</h2> | 81 <h2 id="code">Implementing a file browser handler</h2> |
| 82 |
| 72 <p> | 83 <p> |
| 73 To use this API, | 84 To use this API, |
| 74 you must implement a function that handles the <code>onExecute</code> event | 85 you must implement a function that handles the <code>onExecute</code> event |
| 75 of <code>chrome.fileBrowserHandler</code>. | 86 of <code>chrome.fileBrowserHandler</code>. |
| 76 Your function will be called whenever the user clicks the button | 87 Your function will be called whenever the user clicks the button |
| 77 that represents your file browser handler. | 88 that represents your file browser handler. |
| 78 In your function, use the HTML5 | 89 In your function, use the HTML5 |
| 79 <a href="http://www.html5rocks.com/tutorials/file/filesystem/">FileSystem API</a
> | 90 <a href="http://www.html5rocks.com/tutorials/file/filesystem/">FileSystem API</a
> |
| 80 to get access to the file contents. | 91 to get access to the file contents. |
| 81 Here is an example: | 92 Here is an example: |
| 82 </p> | 93 </p> |
| 94 |
| 83 <pre> | 95 <pre> |
| 84 <em>//In background.html:</em> | 96 <em>//In background.html:</em> |
| 85 chrome.fileBrowserHandler.onExecute.addListener(function(id, details) { | 97 chrome.fileBrowserHandler.onExecute.addListener(function(id, details) { |
| 86 if (id == 'upload') { | 98 if (id == 'upload') { |
| 87 var fileEntries = details.entries; | 99 var fileEntries = details.entries; |
| 88 for (var i = 0, entry; entry = fileEntries[i]; ++i) { | 100 for (var i = 0, entry; entry = fileEntries[i]; ++i) { |
| 89 entry.file(function(file) { | 101 entry.file(function(file) { |
| 90 <em>// send file somewhere</em> | 102 <em>// send file somewhere</em> |
| 91 }); | 103 }); |
| 92 } | 104 } |
| 93 } | 105 } |
| 94 }); | 106 }); |
| 95 </pre> | 107 </pre> |
| 108 |
| 96 <p> | 109 <p> |
| 97 Your event handler is passed two arguments: | 110 Your event handler is passed two arguments: |
| 98 </p> | 111 </p> |
| 112 |
| 99 <dl> | 113 <dl> |
| 100 <dt> id </dt> | 114 <dt> id </dt> |
| 101 <dd> The "id" value from the manifest file. | 115 <dd> The "id" value from the manifest file. |
| 102 If your extension implements multiple handlers, | 116 If your extension implements multiple handlers, |
| 103 you can check the <code>id</code> value | 117 you can check the <code>id</code> value |
| 104 to see which handler has been triggered. | 118 to see which handler has been triggered. |
| 105 </dd> | 119 </dd> |
| 106 <dt> details </dt> | 120 <dt> details </dt> |
| 107 <dd> An object describing the event. | 121 <dd> An object describing the event. |
| 108 You can get the file or files that the user has selected | 122 You can get the file or files that the user has selected |
| 109 from the <code>entries</code> field of this object, | 123 from the <code>entries</code> field of this object, |
| 110 which is an array of | 124 which is an array of |
| 111 FileSystem <code>Entry</code> objects. | 125 FileSystem <code>Entry</code> objects. |
| 112 </dd> | 126 </dd> |
| 113 </p> | 127 </p> |
| 128 |
| 129 |
| 114 <!-- | 130 <!-- |
| 115 <h2 id="manifest_details">Manifest details</h2> | 131 <h2 id="manifest_details">Manifest details</h2> |
| 132 |
| 116 <p class="authornote"> | 133 <p class="authornote"> |
| 117 {PENDING: give details about "id" and "default_title". | 134 {PENDING: give details about "id" and "default_title". |
| 118 It should be unique within your extension -- don't worry about other extensions. | 135 It should be unique within your extension -- don't worry about other extensions. |
| 119 "default_title" implies that you can change the title, | 136 "default_title" implies that you can change the title, |
| 120 but you can't aside from internationalizing it. | 137 but you can't aside from internationalizing it. |
| 121 </p> | 138 </p> |
| 139 |
| 122 <p class="authornote"> | 140 <p class="authornote"> |
| 123 {PENDING: give details about the file_filters entry. | 141 {PENDING: give details about the file_filters entry. |
| 124 File filters are currently case-sensitive, but we plan to change that. | 142 File filters are currently case-sensitive, but we plan to change that. |
| 125 Mention <code>filesystem:*.*</code>. | 143 Mention <code>filesystem:*.*</code>. |
| 126 </p> | 144 </p> |
| 127 --> | 145 --> |
| 146 |
| 128 <!-- | 147 <!-- |
| 129 <h2 id="examples">Examples</h2> | 148 <h2 id="examples">Examples</h2> |
| 149 |
| 130 <p> | 150 <p> |
| 131 For examples of using this API, see ... | 151 For examples of using this API, see ... |
| 132 For other examples and for help in viewing the source code, see | 152 For other examples and for help in viewing the source code, see |
| 133 <a href="samples.html">Samples</a>. | 153 <a href="samples.html">Samples</a>. |
| 134 </p> | 154 </p> |
| 135 --> | 155 --> |
| 136 <!-- END AUTHORED CONTENT --> | 156 |
| 157 |
| OLD | NEW |