Youtube API Upload example

by saiwong

HTML

<script src="https://apis.google.com/js/client.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<button id="authorize-button" class="btn">Authorize</button>

<div class="well upload-container">
    <form id="uploadForm" class="form-horizontal" method="post"
      enctype="multipart/form-data">
      <div class="control-group">
        <label class="control-label" for="inputTitle">Title</label>
        <div class="controls">
            <input type="text" id="inputTitle" placeholder="Title of Video" />
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="inputDescription">Description</label>
        <div class="controls">
            <input type="text" id="inputDescription" placeholder="Description of Video" />
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="inputCategory">Category</label>
        <div class="controls">
            <input type="text" id="inputCategory" placeholder="Example: People" />
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="inputKeywords">Keywords</label>
        <div class="controls">
            <input type="text" id="inputKeywords" placeholder="Example: cat,funny" />
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="file">Video File</label>
        <div class="controls">
            <div class="fileupload fileupload-new" data-provides="fileupload">
                <div class="input-append">
                    <div class="uneditable-input span3"><i class="icon-file fileupload-exists"></i> <span class="fileupload-preview"></span></div><span class="btn btn-file"><span class="fileupload-new">Select file</span><span...

CSS

/*!
 * Bootstrap v2.3.1-j6
 *
 * Copyright 2012 Twitter, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world by @mdo and @fat, extended by @ArnoldDaniels.
 */
.clearfix{*zoom:1;}.clearfix:before,.clearfix:after{display:table;content:"";line-height:0;}
.clearfix:after{clear:both;}
.hide-text{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0;}
.input-block-level{display:block;width:100%;min-height:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.btn-file{overflow:hidden;position:relative;vertical-align:middle;}.btn-file>input{position:absolute;top:0;right:0;margin:0;opacity:0;filter:alpha(opacity=0);transform:translate(-300px, 0) scale(4);font-size:23px;direction:ltr;cursor:pointer;}
.fileupload{margin-bottom:9px;}.fileupload .uneditable-input{display:inline-block;margin-bottom:0px;vertical-align:middle;cursor:text;}
.fileupload .thumbnail{overflow:hidden;display:inline-block;margin-bottom:5px;vertical-align:middle;text-align:center;}.fileupload .thumbnail>img{display:inline-block;vertical-align:middle;max-height:100%;}
.fileupload .btn{vertical-align:middle;}
.fileupload-exists .fileupload-new,.fileupload-new .fileupload-exists{display:none;}
.fileupload-inline .fileupload-controls{display:inline;}
.fileupload-new .input-append .btn-file{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;}
.thumbnail-borderless .thumbnail{border:none;padding:0;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
.fileupload-new.thumbnail-borderless .thumbnail{border:1px solid #ddd;}
.control-group.warning .fileupload .uneditable-input{color:#a47e3c;border-color:#a47e3c;}
.control-group.warning .fileupload .fileupload-preview{color:#a47e3c;}
.control-group.warning .fileupload...

JavaScript

jQuery(function($){
    var logContainer = $('.logContainer'),
        logEl = $('#log'),
        logger = function(level, msg){
            var now = new Date().toTimeString().substr(0,8),
                formattedMsg = now + '    ' + $.makeArray(msg).join(' ');
            
            logEl.append(
                $('<p />')
                .addClass('text-' + level)
                .text(formattedMsg)
            )
            .scrollTop(0xfffffe);
            
            logContainer.removeClass('empty');
        },
        clearLog = function(){
            logEl.children().remove();
            logContainer.addClass('empty');
        },
        log = function(){ logger('', arguments); };

    log.info = function(){ logger('info', arguments); };
    log.warning = function(){ logger('warning', arguments); };
    log.error = function(){ logger('error', arguments); };
    log.clear = clearLog;
    
    $('#clearLog').on('click', clearLog);
    window.log = log;
});

function xmlToString(xmlData) {
    var xmlString;
    //IE
    if (window.ActiveXObject){
        xmlString = xmlData.xml;
    }
    // code for Mozilla, Firefox, Opera, etc.
    else{
        xmlString = (new XMLSerializer()).serializeToString(xmlData);
    }
    return xmlString;
}   

jQuery(function($){
    var tokens = {
            clientId: '454461017337.apps.googleusercontent.com',
            apiKey: 'AIzaSyBSjgwSpUJX1AC-Xa_GobX7tUivADSDYjA',
            scopes: 'https://gdata.youtube.com'
        },
        uploadEl = $('.upload-container'),
        
        loadClient = function(){
            gapi.client.setApiKey(tokens.apiKey);
            
            window.setTimeout(getAuth,1);
        },
        
        getAuth = function(authorizeApp){
            if ( authorizeApp === true ) {
                log('Authorizing App');
            }
            else {
                log('Checking Auth');
            }
            
            gapi.auth.authorize({
                client_id:...