Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(282)

Side by Side Diff: chrome/common/extensions/docs/server2/templates/intros/fileBrowserHandler.html

Issue 10832042: Extensions Docs Server: Doc conversion script (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src
Patch Set: everything but svn stuff Created 8 years, 4 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
OLDNEW
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 -->
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698