cypher2012 cypher2012 - 7 months ago 33
Javascript Question

How to send YouTube video meta data via AJAX

I'm currently working on a function to upload videos to my channel via AJAX. I've so far managed to successfully sort the authorisation and a "video" is being created on my channel, but that's where it ends. None of the data seems to be getting through. I'm not sure how to properly send the meta data and if the actual video data itself is being sent properly.

Here is the YouTube reference: https://developers.google.com/youtube/v3/docs/videos/insert

One other strange thing, with the request set to be asynchronous, I get no response and the load function doesn't run. With asynchronous set to false, I get a response from YouTube.

function UploadVideo()
{
formData = new FormData();

video = {
snippet : {
title : "Test Video",
description : "This is a test video",
categoryId : "22",
tags : "test"
}
};

file = document.getElementById("test_video").files[0];

ajax = new XMLHttpRequest();

formData.append("file", file);
formData.append("snippet", JSON.stringify(video));

ajax.open("POST", "https://www.googleapis.com/upload/youtube/v3/videos?part=snippet", true);
ajax.setRequestHeader("Content-type", "application/octet-stream");
ajax.setRequestHeader("Authorization", '<?php echo $authorization_header; ?>');

ajax.onload = function() {
if (ajax.status == 200) {
alert(ajax.responseText);
document.getElementById("video_response").innerHTML = ajax.responseText;
}
};
ajax.send(formData);
}

Answer

Well, I didn't figure it out exactly, but found a tidy solution.

  • Post video data and capture the id from the response
  • Then update the video with required information

    function UpdateVideoInfo(video_id){
        var resource = {
                'snippet':{
                    'title' : 'test title',
                    'description' : 'test description',
                    'categoryId' : 22
                },
                'status' : {
                    'privacyStatus' : 'private'
                },
                'id': video_id
            };
    
        post_string = JSON.stringify(resource);
    
        var ajax = new XMLHttpRequest();
        ajax.open('PUT', 'https://www.googleapis.com/youtube/v3/videos?part=snippet,status', true);
        ajax.setRequestHeader("Authorization", '<?php echo $authorization_header; ?>');
        ajax.setRequestHeader("Content-type", "application/json; charset=UTF-8");
        ajax.send(post_string);
    
        ajax.onload = function() {
            if (ajax.status == 200) {
                alert(ajax.responseText);
            }
        };
    }
    
    function UploadVideo(){
        var file = document.getElementById("test_video").files[0];    
    
        var ajax = new XMLHttpRequest();
    
        ajax.open("POST", "https://www.googleapis.com/upload/youtube/v3/videos?part=snippet", true);
        ajax.setRequestHeader("Content-type", "application/octet-stream");
        ajax.setRequestHeader("Authorization", '<?php echo $authorization_header; ?>');
    
        ajax.onload = function() {
            if (ajax.status == 200) {
                var response_body = JSON.parse(ajax.responseText);
    
                document.getElementById("video_response").innerHTML = response_body;
    
                UpdateVideoInfo(response_body['id']);
            }
        };
        ajax.send(file);           
    
        return false;
    }