Chrome Apps, Web Store and The New ChromeOS File API

Two days ago, I gave a talk at “Silicon Valley Chrome Meetup”. This cool event was sponsored by box.net and I presented a session on Chrome web store upload process and the new chromeOS File API. The goal of this talk was to highlight some of the new ChromeOS file APIs and to give a high level overview on the Chrome web store and the app upload process. One question I got about the store was ‘WHY?’ and for there are three good answers:

1. Discovery
2. Distribution
3. Revenue (95% goes to the developer)

On top of that, on the revenue side, you get a peace of mind because Google handle the payments for you. Of course, there is an option to handle the payment on your own – if/when you wish to do it.

Another subject I’ve tried to clear was around ‘A Web App? what is it?’ It’s not easy definition, and you can see lots of examples out there to good/great/awful web apps. So just to give few directions:

• Goal-orientated
• Beautiful
• Rich Experience
• FAST

Last but not least, was the new file browser API that let developers write some nice java script code that will enable ChromeBooks’ users to upload their files to the cloud. In Google I/O Chrome keynote you could have seen a nice demo of it that let users upload photos to Picasa.

I hope that soon other interesting companies will take advantage of this API and we will see them integrating it with their clouds.

This little JS code will do the file upload for you:

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);
},
…

and all you need to declare is few lines of JSON of manifest file.

File API – Manifest Example

Declare the “fileBrowserHandler” permission in the extension manifest.

{
"name": "Upload to flickr",
...
"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" }
}


Advertisement