Next week, on June 15, we are going to see a new animal in town. It’s a laptop that works perfectly for the web. It got one of the best/fast browsers out there and its security model is baked really deep. One of the cool things in ChromeOS is that it gives developers a new API to play with. I worked with it in the past few weeks and I must say, it’s great (=Simple and powerful).
Let’s see how we can use this powerful API to upload files from USB and/or our ChromeBook.
The ChromeOS (=ChromeBook) file browser comes up when the user either presses Ctrl+M or connects an external storage device, such as an SD card, USB key, external drive, or digital camera. Besides showing the files on external devices, the file browser can also display files that the user has previously saved to the system.
When the user selects one or more files, the file browser adds buttons representing the valid handlers for those files. For example, in the following screenshot, selecting a file with a “.jpg” suffix results in an “Upload to Picasa” button that the user can click. Few things to keep in mind:
- You should declare the “fileBrowserHandler” permission in the extension manifest
- You should use the “file_browser_handlers” field to register the extension as a handler of at least one file type.
- Last but not least, you should also provide a 16×16 icon to be displayed on the button. For example let’s take Flickr:
{
"name": "Flickr Uploader",
...
"file_browser_handlers": [
{
"id": "upload",
"default_title": "Save to Flickr", // What the button will display
"file_filters": [
"filesystem:*.jpg",
"filesystem:*.jpeg",
"filesystem:*.png"
]
}
],
"permissions" : [
"fileBrowserHandler"
],
"icons": { "16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png" }
}
To use this API, you must implement a function that handles the onExecute event of chrome.fileBrowserHandler. Your function will be called whenever the user clicks the button that represents your file browser handler. In your function, use the HTML5 FileSystem API to get access to the file contents.
Here is our Flickr example inside the background.html:
chrome.fileBrowserHandler.onExecute.addListener(function(id, details) {
if (id == 'upload') {
var fileEntries = details.entries;
for (var i = 0, entry; entry = fileEntries[i]; ++i) {
entry.file(function(file) {
// send file somewhere
});
}
}
});
Your event handler is passed two arguments:
id – The “id” value from the manifest file. If your extension implements multiple handlers, you can check the id value to see which handler has been triggered.
details – An object describing the event. You can get the file or files that the user has selected from the entries field of this object, which is an array of FileSystem Entry objects.
Is that easy or what? Please let me know if you have any comments/questions.
Here is another little javascript code that will do the work if you want to let the user to choose a file from your extension popup.html file:
...
uploadFile: function(file) {
var pro1 = document.querySelector('#pro1');
var progressBar = pro1.querySelector('progress');
var formData = new FormData();
formData.append('file', file);
var xhr = new XMLHttpRequest();
xhr.open('POST', this.uploadServer, true);
xhr.onload = function(e) {
if (this.status == 200) {
console.log(this.response);
alert("The image is safe in Flickr " + this.response);
}
};
xhr.onerror = function(e) {
console.log(this, this.status, this.responseText,
this.getAllResponseHeaders())
};
xhr.send(formData);
}
...
Resources
Want to learn more on Chrome Extensions? Here is a great starting point
Share only with good friends:
All these web applications contain some very cool features that make them useful even (in the rare event) when you don’t have internet connection. Let’s say, you are 30,000 feet up the air (and not on a Virgin Atlantic plane) or 250 feet under the ground and there is no signal. Here are some apps that will make the business users (very) happy:
Ido Green 