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