I am trying to use Youtube DataAPI to upload videos to our YouTube site. I used the examples provided in the documentation for browser-based downloads , and I can get a basic example to work with. The problem is that I cannot translate this into a method that I can use with jQuery.
In my code, I already set the metadata values for the video and got the token value to load from the data API. However, when I try to execute jQuery to download, 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 launching jQuery calls with $("form").submit , but I'm not sure what should be the right action, 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 is the jQuery that I use to make the call (the data is the JSON returned by the previous jQuery call from my server, which contains the URL, token, and value indicating 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); } });
Finally, getting the downloaded video is half the problem; When YouTube accepts / rejects a video, it should redirect the browser to the nexturl parameter and add parameters to indicate the status. How do I handle this if I submit it via jQuery?