3

シングルページアプリから Youtube API に対して CORS を使用しようとしています。ポイントは、ページ全体のリロードを避けることです ( http://gdata-samples.googlecode.com/svn/trunk/gdata/youtube_upload_cors.htmlが行っているように)。一般に、これを行うには次の 2 つの方法があります。

  • 非表示の iframe を使用する

また

  • FormData での XMLHttpRequest の使用

後者は最も洗練されていますが、一部の劣ったブラウザーではサポートされていません。私は、これらのブラウザーを無視できる幸運な立場にいます。

今、私は次のコードを書きました：

    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);

これは機能しますが (進捗イベントを問題なく発行しながら、ファイル全体をアップロードするように)、最終的にはエラーになります。何が間違っているのかわかりませんが、ページ全体を更新する代わりに、この戦略を使用したサンプルを見てみたいです. 特に、応答とそこにある id を処理することに非常に興味があります。

このようなものが機能していますか？

4

1 に答える 1

2

Direct Uploading API v2と FormData + XHR2を使用することで可能です。何かのようなもの：

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);
于 2013-01-15T16:01:43.080 に答える