How can I use YouTube API and jQuery to upload video to YouTube?

Question

I am trying to use the Youtube DataAPI to upload a video to our site's YouTube account. I have been using the examples provided in the documentation for Browser-based uploading and I am able to get the basic example to work. The problem is I can't seem to translate this into a method that I can use with jQuery.

In my code, I have already set my metadata values for the video and received a token value for the upload from the Data API. However, when I try to execute the jQuery to do the upload, but uploads.gdata.youtube.com gives me the following (courtesy of Fiddler):

HTTP/1.1 404 Not Found
Server: Upload Server Built on Nov 11 2010 15:36:58 (1289518618)
Date: Mon, 22 Nov 2010 01:44:58 GMT
Pragma: no-cache
Expires: Fri, 01 Jan 1990 00:00:00 GMT
Cache-Control: no-cache, no-store, must-revalidate
Content-Length: 0
Content-Type: text/html

Here is the form. The action is currently set to '#' because I am kicking off the JQuery calls using $("form").submit, but I am not sure what the proper action should be since I want to do everything through AJAX:

<form action="#" method="post" name="video_upload" enctype="multipart/form-data">           

<div class="field-group">
    <label style="margin-top:0px" for="video_name">video title</label>
    <input type="text" value="" class="required" tabindex="1" name="video_name" id="video_name">
    <div id="video_name_status"></div>
</div>
<div class="field-group">
    <label for="video_description">description</label>                       
    <textarea class="required" tabindex="2" name="video_description" rows="5" cols="40" id="video_description"></textarea>
    <div id="video_description_status"></div>

</div>                  
<div class="field-group">
    <label for="video_path">video file</label>
    <input  type="file" value="" class="required" tabindex="3" name="video_path" id="video_path">
    <div id="video_status"></div>
</div>

<div id="form-button-group">
    <input type="submit" value="Upload Video" name="submit" id="signup-button">                     
</div>


<div class="youtube-disclaimer">
By clicking 'Upload Video' you certify that you own all rights to the content or that you are authorized by the owner to 
make the content publicly available on YouTube, and that it otherwise complies with the YouTube Terms of Service located 
at <a href="http://www.youtube.com/t/terms">http://www.youtube.com/t/terms</a>.
</div>
</form>

Here it the jQuery that I am using to execute the call (data is the JSON returned by a previous jQuery call from my server that holds the youtube post URL, token, and a value to indicate success):

if (data.success == true){

                 $.ajax({
                       async : false,
                       type: "POST",
                       url: data.postUrl + "?nexturl=www.mysite.local",                        
                       data: ({file : $('#video_path'),
                               token : data.tokenValue,
                               alt : 'json-in-script'}),
                       contentType : 'multipart/form-data',
                       processData: false,
                       datatype: 'jsonp',
                       jsonpCallback: 'processVideoResponse',
                       success: function(data){
                            alert("success alert" + data);

                       },
                       error: function(data){
                           alert("error" + data);
                       }
                   });

Lastly, getting the video uploaded is half of the problem; once YouTube accepts/rejects the video, it is supposed to redirect the browser to the nexturl parameter and append params to indicate status. How do I handle that if I send this via jQuery?

Answer 1

Maybe I am wrong, but uploading a file via AJAX is not possible (security concern); but maybe YouTube API does provide something and I don't know?!. Workaround:

• create an iframe (this is where you'll launch the upload) itself; id='upload_iframe'
• create the upload file that will do the upload work (php, asp.net, whatsoever...); upload.php
• create a form (id='my_form'), set multipart/form-data, set target='upload_iframe' and set action='upload.php'

in the php file you can also trigger status of the upload, e.g. upload failed (alert("")), redirec after success (top.location.href='sucess.php') or anything like that.

hope it helps

fine tuning: additionally you can have the upload filed-button modified by adding a listener to check whether the field has a value. if yes, you can trigger the upload by firing $('#my_form').submit(); (requires jquery)

you can read this: http://code.google.com/apis/youtube/2.0/developers_guide_protocol_browser_based_uploading.html#Browser_based_uploading