Golygon

Source code and sample available at: https://github.com/prabgupt/youtube_video_upload_plugin

Usage: Please note that sample is available for RoR3 but it can be easily converted for any underlying platform. Refer README in git repo above to know how to run it in RoR3. To see how to tweak code to use it for any other platform, keep reading the post.

Purpose of this Utility: It will upload end user’s video directly to youtube and is easily integratable within your website.

Few Advantage:

• No need to have storage on server machine as you can now dump/use all videos directly to/from youtube.
• In case you have youtube channel, can directly organize video uploaded through your site to youtube channel.
• NO need for end user to login to youtube first to upload video through your site.

Flow to upload video on YouTube

1. Website requests  token and upload URL from youtube for every new video request. This is needed to avoid having end user logging into his/her YouTube account.
2. Post your video to URL received in step#1 with parameter ‘nexturl’. ‘nexturl’ is callback url to be called by YouTube with status and video_id once upload operation is completed with failure or success. You need to send token received in step#1 too along with.
3. Youtube invokes ‘nexturl’ with status and video_id, if upload is successful. Process/store this video_id as this will be key from now onwards based on which you can perform operations on this video directly in YouTube.

Source code contains of following things that you need to know:

youtubeUtilAPIs.py- Python script that uses Google Data Python client library.  This script contains few methods performing certain operation on youtube.

Usage: py [-t <comma separated title and description>] [-u <video_id>] [-s <video_id>] [-d <video_id>]

-t => to get token and url. Input required is comma separated video title and video description

-u => to get youtube URL for that video. Input required is video_id

-s => to get upload status of the video. Input required is video_id

-d => to delete video from youtube. Input required is video_id

Prerequisite:

• • Please refer Getting Started guide. In nutshell, you need to install Python and then google Data Library as specified in the link.
  • Replace following senstive data inside python script; like developer key, password, etc. with that of yours. You will need to sign in for YouTube developer key. Once signed in, register you product and get values for below attributes. ‘source’ and ‘client_id’   will be the name of the product you registered before.

yt_service.developer_key = ‘xxxxxxx’

yt_service.client_id = ‘xxxxxxx’

yt_service.email = ‘xxxxxxx’

yt_service.password = ‘xxxxxxxx’

yt_service.source = ‘xxxxxxxxxx’

• Since above utility contains some sensitive data, hence for security reasons you would need to introduce a server side handler that will execute above script on client request and can send the required details back to client. In our case, we have introduced method ‘uploadToken’ inside multimedia controller which execute python script and returns back token and url needed to upload video on youtube.

 def uploadToken
    cmd = Rails.root.to_s + '/public/scripts/youtubeUtilAPIs.py'
    title = "Test Video"
    description = "Test Video description"
    resp = `#{cmd} -t "#{title},#{description}"`
    resp = resp.split('::')
    response = (resp.length == 2) ? {:uploadUrl => resp[0], :token => resp[1]} : ""
    respond_to do |format|
      format.js {render :js => response.to_json}
    end
  end

• Below is the HTML code you’ll plug into your website to let end user select the video and upload it to youtube. Code just contains a form to have end use select the video and has action, token value blank at render time. If you have already noticed, there is async ajax request present at end of code which fetches upload URL and token from server at time page is loading and populate it inside form once ajax request gets completed.

<div id="upload_video">
    <div class="field">
     <form action='' id="youtube_video_upload" method="post" enctype="multipart/form-data">
        <input name="file" type="file" class="multimedia_file"/>
        <div class="errMsg" style="display:none;color:red">
          You need to specify a file.
        </div>
        <div class="errMsg2" style="display:none;color:red">
          Video cannot be uploaded this time. Please try again after sometime.
        </div>
        <input class= "token" name="token" type="hidden" value=""/>
        <input value="Upload Video File" class="upload_button" type="submit" />
      </form>
    </div><br/>
</div>
<script>
  $(document).ready(function(){
    $(' #youtube_video_upload .multimedia_file').click(function(){
      $(this).siblings('.errMsg').css("display", "none");
      $(this).children('.errMsg2').css("display", "none");
    });
    $('#youtube_video_upload').submit(function(){
      if ($(this).children('.multimedia_file').val() == null || $(this).children('.multimedia_file').val() == ""){
        $(this).children('.errMsg').css("display", "");
        return false;
      }else if ($(this).children('.token').val() == null || $(this).children('.token').val() == ""){
        $(this).children('.errMsg2').css("display", "");
        return false;
      }
      $('#youtube_video_upload').children('.upload_button').attr('disabled', 'true');
    });
    $('#video_link').click(function(){
      $("#add_link").css("display", "none");
      $("#upload_video").css("display","");
    });
    $('#youtube_link').click(function(){
      $("#upload_video").css("display","none");
      $("#add_link").css("display", "");
      $('.errMsg').css("display", "none");
      $('.errMsg2').css("display", "none");
    });
    
   // asyn ajax request to fetch upload URL and token from youtube
    $.get('<%= url_for(:action => "uploadToken", :controller => "multimedias", :only_path => false)%>',function(data){
        if(data != ""){
          $('#youtube_video_upload').attr('action', data.uploadUrl + '?nexturl=<%= url_for(:action => "new", :controller => "multimedias", :only_path => false)%>');
          $('#youtube_video_upload').children('.token').val(data.token);
          $('#youtube_video_upload').children('.errMsg2').css("display", "none");
        }else{
          
        }
      }, "json");
  });
</script>