YouTube API Browser-Based Upload with Ajax for Pro

Question

I am trying to use the YouTube API to perform a browser-based upload, but also use Ajax for the purpose of showing a progress bar.

I started off here: https://developers.google.com/youtube/2.0/developers_guide_protocol_browser_based_uploading

It works 100% if I just use the basic HTML form post.

    <form id="frmYouTube" enctype="multipart/form-data" method="post" action="https://uploads.gdata.youtube.com/action/FormDataUpload/YOUTUBE_URL_HERE?nexturl=https%3a%2f%2fdomain%2fpageafter%2fVideoUploadDone%3fid2%3dLOCAL_ID">
    <table>
        <tr>
            <td><input type="file" name="file" /></td>
        </tr>
        <tr>
            <td>
                <input type="hidden" name="token" value="YOUTUBE_TOKEN_HERE" />
                <input type="submit" value="Upload" />
            </td>
        </tr>
    </table>
    </form>

However if I try to add some Javascript I run into a problem. I'm also including MooTools and the Request.File class from http://mootools.net/forge/p/form_upload.

Here is a simplified version of the code:

var yt = $('frmYouTube');

var ytDone = function () {

     // Code to display: 'Video upload complete. Return to <a href="/Acount">your account</a>.';
};

var ytProgress = function (event, xhr) {

    var loaded = event.loaded, total = event.total;

    // Code to display: 'Uploading... ' + (parseInt(loaded / total * 100, 10)) + '%';
};

yt.addEvents({ 'submit': function (ev) {

    ev.stop();

    var rf = new Request.File({
        url: yt.get('action'),
        onProgress: ytProgress,
        onFailure: function (xhr) {

            ytError('Upload Failed (1).');
        },
        onCancel: function () {
            ytError('Upload Canceled.');
        },
        onException: function () {
            ytError('Upload Failed (2).');
        },
        onSuccess: ytDone
    });

    yt.getElements('input').each(function (field) {

        if (field.files) {

            rf.append(field.get('name'), field.files[0]);
        } else {

            rf.append(field.get('name'), field.get('value'));
        }
    });

    rf.send();
}
});
</script>

At this point the file gets uploaded successfully, and YouTube returns a 302 redirect to my "nexturl," but because of cross-origin rules the redirect is not followed and I can not access the location header using Javascript.

I've seen a few solutions that involved iframes, but that won't work if you want a progress bar. Has anyone come up with a work-around to do browser based uploads to YouTube and show a progress bar.

Answer 1

The browser based upload method doesn't support CORS. The issue was reported here. CORS is supported in V3 but you don't have a browser based upload method there. Just some kind of oauth stuff . Basically you need to ask the user to sign up for youtube and then come back to your site/app, give you permission and upload the video on his youtube account and then upload the video. There is no way you can allow browser client to upload videos on your youtube account using the V3 api.

Answer 2

The YouTube Data APIs do support CORS. Make sure your client ID is set set up to allow cross origin from your site. To do that go to https://code.google.com/apis/console/

Also please not that we just launched a new api so try out a video upload at https://developers.google.com/youtube/v3/docs/videos/insert

One thing you can also try the YouTube Upload Widget. It will handle uploads for you and allows you to listen to events to know the progress of the upload. https://developers.google.com/youtube/youtube_upload_widget