YouTube Uploader now using Gears, and what people missed in Gears 0.4
While we posted about the Gears 0.4 features a lot of the press only really talked about the Geolocation piece.
I think that is important, and posted on that too, but Brad’s piece discussed the full gamut including the Blob API, resummable HTTP, and Desktop API improvements to allow controlled file system access. The example that Brad built was the upload movie tool which ties this all together.
Check out the source code and you will see the parts and pieces in action:
Geolocation
JAVASCRIPT:
-
-
MovieTool.prototype.getLocation = function(callback) {
-
var geolocation = google.gears.factory.create(‘beta.geolocation’);
-
if (!geolocation.getPermission(‘Upload Movie Tool’, ‘’,
-
‘This sample can use your ‘
-
+ ‘geographic coordinates in order to tag ‘
-
+ ‘uploaded videos with your location’)) {
-
document.getElementById(‘location’).innerHTML = ‘Permission denied’;
-
callback();
-
return;
-
}
-
-
var self = this;
-
geolocation.getCurrentPosition(
-
function(p) {
-
var addr = p.gearsAddress;
-
var address = addr.city + ‘, ‘ + addr.region + ‘, ‘ + addr.country;
-
var latitude = p.latitude;
-
var longitude = p.longitude;
-
self.geoAddress_ = address + ‘ (’ + latitude + ‘, ‘ + longitude + ‘)’;
-
document.getElementById(‘location’).innerHTML = self.geoAddress_;
-
callback();
-
},
-
-
function(err) {
-
var msg = ‘Error retrieving your location: ‘ + err.message;
-
document.getElementById(‘location’).innerHTML = msg;
-
callback();
-
},
-
-
{
-
enableHighAccuracy: true,
-
gearsRequestAddress: true,
-
gearsLocationProviderUrls: [‘http://www.google.com/loc/json’]
-
}
-
);
-
}
-
HTTPRequest
JAVASCRIPT:
-
-
var req = google.gears.factory.create(‘beta.httprequest’);
-
req.open(‘GET’, ‘/list’);
-
var self = this;
-
req.onreadystatechange = function() {
-
if (req.readyState == 4) {
-
if (req.status == 200) {
-
var loadingMsg = document.getElementById(‘loadingFilesMsg’);
-
loadingMsg.parentNode.removeChild(loadingMsg);
-
self.movieList_ = eval(req.responseText);
-
for (var i = 0; i <self.movieList_.length; i++) {
-
var entry = self.movieList_[i];
-
// associative entry for fast lookup based on filename
-
self.movieList_[‘_’ + entry.filename] = entry;
-
var status = ‘Uploaded’
-
var percent = ‘100%’;
-
-
// was this movie partially uploaded during an earlier browser
-
// session?
-
if (entry.uploaded == false && entry.blob == null) {
-
status = ‘Partially uploaded; re-select file to continue uploading’;
-
percent = Math.round((entry.bytesUploaded / entry.length) * 100) + ‘%’;
-
}
-
-
// is this movie too large?
-
if (entry.uploaded == false && entry.length> self.MAX_FILE_SIZE) {
-
status = ‘File too large’;
-
percent = ‘N/A’;
-
}
-
-
self.drawRow(entry.filename, entry.geoAddress, status, percent);
-
}
-
}
-
-
callback();
-
}
-
}
-
-
req.send();
-
}
-
-
….
-
-
// sending a piece
-
req.open(‘POST’, uploadURL);
-
-
req.setRequestHeader(‘Content-Disposition’,
-
‘attachment; filename="’ + fileName + ‘"’);
-
req.setRequestHeader(‘Content-Type’, ‘application/octet-stream’);
-
req.setRequestHeader(‘Content-Range’, ‘bytes ‘ + byteRange);
-
-
Desktop API
JAVASCRIPT:
-
-
MovieTool.prototype.selectFiles = function() {
-
var desktop = google.gears.factory.create(‘beta.desktop’);
-
var self = this;
-
desktop.openFiles(
-
function(files) {
-
for (var i = 0; i <files.length; i++) {
-
var entry = {filename: files[i].name, uploaded: false,
-
length: files[i].blob.length,
-
blob: files[i].blob, bytesUploaded: 0,
-
geoAddress: self.geoAddress_, uploadRetries: 0};
-
if (self.movieList_[‘_’ + entry.filename]) {
-
// was previously uploaded at an earlier browser session
-
var oldEntry = self.movieList_[‘_’ + entry.filename];
-
if (!oldEntry.uploaded) { // partial upload
-
oldEntry.length = entry.length;
-
oldEntry.blob = entry.blob;
-
var percent = Math.round((oldEntry.bytesUploaded / oldEntry.length) * 100);
-
self.updateStatus(oldEntry.filename, ‘Not uploaded’, percent + ‘%’);
-
} else {
-
self.updateStatus(oldEntry.filename, ‘Uploaded’, ‘100%’);
-
}
-
} else { // new file
-
// associative entry for fast lookup based on filename
-
self.movieList_[‘_’ + entry.filename] = entry;
-
self.movieList_.push(entry);
-
-
var status = ‘Not uploaded’;
-
var percent = ‘0%’;
-
// is this movie too large?
-
if (entry.length> self.MAX_FILE_SIZE) {
-
status = ‘File too large’;
-
percent = ‘N/A’;
-
}
-
-
self.drawRow(files[i].name, self.geoAddress_, status, percent);
-
}
-
}
-
-
document.getElementById(‘movieUpload’).disabled = false;
-
document.getElementById(‘clearMovies’).disabled = false;
-
},
-
-
{ filter: [‘video/quicktime’, ‘.wmv’, ‘video/avi’] }
-
);
-
}
-
It turns out that YouTube has implemented a multifile upload using Gears which puts this into practice. As someone who uses YouTube a lot to upload files this is very welcome indeed, and I can’t wait to see more sites use it now the building blocks are there in a different way (can always use Flash / other controls in the past).
