Question

I’m trying to use CORS against the Youtube API from a single page app. The point is to avoid a full page reload (like http://gdata-samples.googlecode.com/svn/trunk/gdata/youtube_upload_cors.html is doing). There are generally two ways this can be done:

• Using a hidden iframe

or

• using XMLHttpRequest with FormData

The latter is most elegant, but not supported in some inferior browsers. I’m in the lucky position that I may ignore those browsers.

Now I wrote the following code:

    var fd = new FormData();
    fd.append('token', token);
    fd.append('file', element.files[0]);
    var xhr = new XMLHttpRequest();
    xhr.upload.addEventListener("progress", uploadProgress, false);
    xhr.addEventListener("load", uploadComplete, false);
    xhr.addEventListener("error", uploadError, false);
    xhr.addEventListener("abort", uploadAbort, false);
    xhr.open("POST", $scope.uploadData.uploadUrl + '?nexturl=' + $location.absUrl());
    xhr.send(fd);

This works (as in, it uploads the whole file, whilst emitting progress events happily), but at the end it errors out. I’m not sure what I’m doing wrong, but I’d really love to see a sample using this strategy instead of the full page refresh. Especially dealing with the response and the id in there I am very curious about.

Have you got something like this working?

Answer 1

It’s possible by using Direct Uploading API v2 and FormData + XHR2. Something like:

var DEV_KEY = '<here application key: you can find at https://code.google.com/apis/youtube/dashboard/gwt/index.html>';
var ACCESS_TOKEN = '<here oAuth2 token>';
var TOKEN_TYPE = 'Bearer ';

// Helper method to set up all the required headers for making authorized calls to the YouTube API.
function generateYouTubeApiHeaders() {
    return {
      Authorization: TOKEN_TYPE + ACCESS_TOKEN,
      'GData-Version': 2,
      'X-GData-Key': 'key=' + DEV_KEY,
      'X-GData-Client': 'App',
      'Slug': Math.random().toString()
    };
} 
// Helper method to set up XML request for the video.
function generateXmlRequest(title, description, category, keywords) {
    return '<?xml version="1.0"?> <entry xmlns="http://www.w3.org/2005/Atom" xmlns:media="http://search.yahoo.com/mrss/" xmlns:yt="http://gdata.youtube.com/schemas/2007"> <media:group> <media:title type="plain">' + title + '</media:title> <media:description type="plain">' + description + '</media:description> <media:category scheme="http://gdata.youtube.com/schemas/2007/categories.cat">' + category + '</media:category> <media:keywords>' + keywords + '</media:keywords></media:group> </entry>';
}

// Create XHR and add event listeners
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", uploadProgress, false);
xhr.addEventListener("load", uploadComplete, false);
xhr.addEventListener("error", uploadError, false);
xhr.addEventListener("abort", uploadAbort, false);

// Specify POST target
xhr.open("POST", 'https://uploads.gdata.youtube.com/feeds/api/users/default/uploads');

// Prepare form data
var fd = new FormData();

// The order of attachments is absolutely important
fd.append('xmlrequest', generateXmlRequest('Test', 'Video', 'Autos', 'dsdfsdf, sdsdf'));
fd.append('video', document.forms.uploadNewVideoForm.file.files[0]);

// Add authentication headers
var headers = generateYouTubeApiHeaders();
for(var header in headers) {
    xhr.setRequestHeader(header, headers[header]);
}

// Send request
xhr.send(fd);