Im OK authorized.

I have 2 button's like this on my page:

<input type="file" id="fileToSend"/>
<input type="button" onclick="upload()" value="Upload" id="btnSend"/>

I want to upload the selected file to youtube when I click the "Upload" button. Im calling a function like this:

function upload() {
    var fileStream;
    var video = document.getElementById("fileToSend");
    var file = video.files[0];
    console.log(file);
    console.log("Nombre: " + file.name);
    var r = new FileReader();
    r.onload = function () {
        console.log("fileStream creado");
        fileStream = r.result;
        //console.log("FileStream: " + fileStream);
    };

    console.log("Creando fileStream..");
    r.readAsBinaryString(file);


    gapi.client.load('youtube', 'v3',
        function() {
            var request = gapi.client.youtube.videos.insert({
                part: 'snippet, status',
                resource: {
                    snippet: {
                        title: 'Video Test Title 5',
                        description: 'Video Test Description',
                        tags: ['Tag 1', 'Tag 2'],
                        categoryId: "22"
                    },
                    status: {
                        privacyStatus: "private"
                    }
                }
            }, fileStream);
            request.execute(function (response) {
                console.log("executing..");
                var result = response.result;
                console.log(response);
                if (result) {
                    console.log("execute pleted");
                    document.write(result);
                }
            });
        });
}

The problem is I get al error on the response object, "mediaBodyRequired", It's like I'm not sending the fileStream correctly.

Im OK authorized.

I have 2 button's like this on my page:

<input type="file" id="fileToSend"/>
<input type="button" onclick="upload()" value="Upload" id="btnSend"/>

I want to upload the selected file to youtube when I click the "Upload" button. Im calling a function like this:

function upload() {
    var fileStream;
    var video = document.getElementById("fileToSend");
    var file = video.files[0];
    console.log(file);
    console.log("Nombre: " + file.name);
    var r = new FileReader();
    r.onload = function () {
        console.log("fileStream creado");
        fileStream = r.result;
        //console.log("FileStream: " + fileStream);
    };

    console.log("Creando fileStream..");
    r.readAsBinaryString(file);


    gapi.client.load('youtube', 'v3',
        function() {
            var request = gapi.client.youtube.videos.insert({
                part: 'snippet, status',
                resource: {
                    snippet: {
                        title: 'Video Test Title 5',
                        description: 'Video Test Description',
                        tags: ['Tag 1', 'Tag 2'],
                        categoryId: "22"
                    },
                    status: {
                        privacyStatus: "private"
                    }
                }
            }, fileStream);
            request.execute(function (response) {
                console.log("executing..");
                var result = response.result;
                console.log(response);
                if (result) {
                    console.log("execute pleted");
                    document.write(result);
                }
            });
        });
}

The problem is I get al error on the response object, "mediaBodyRequired", It's like I'm not sending the fileStream correctly.

• javascript
• upload
• youtube-api
• youtube-javascript-api

• 1 You find the problem? If so, share your plete code because that's exactly what I'm trying to do. – offset Commented Jul 17, 2013 at 8:34
• I get error: "Uncaught ReferenceError: gapi is not defined." why? – offset Commented Jul 17, 2013 at 8:40
• I ended up using the v2 API. If I find a solution using v3 I will post it. – Nicolas Saul Commented Jul 19, 2013 at 14:36
• 2 shouldn't the gapi call be done in the onload function of the media ? Else the fileStream is not necessary all loaded and the youtube API does not like that. – dievardump Commented Jul 21, 2013 at 23:58
• Move the gapi.client.load() call to inside the r.onload = function () { block, as dievardump said. It should either work or get you one step closer. – Brock Adams Commented Jul 24, 2013 at 10:45

2 Answers 2

Is there a reason you can't just use the YouTube upload widget?
https://developers.google./youtube/youtube_upload_widget

Anyways, straight from the API reference
https://developers.google./youtube/v3/docs/videos/insert

badRequest  mediaBodyRequired   The request does not include the video content.

Another resource:
https://developers.google./api-client-library/javascript/samples/samples

There are two options for using v3 insert. The request must either:

1. have the media file as the body which precludes sending any other POST parameters, or
2. use multipart form encoding in two parts. One part is the file to upload and the other part is a file-like JSON blob that includes any parameters you want to send.

I never did get this working using the official JavaScript client, but wrote up a pretty detailed explanation of how this can work using regular XmlHttpRequest: http://lithostech./2013/10/upload-google-youtube-api-v3-cors/

Here's an example of the first method where the file itself is the whole request body:

// where videoFile is a http://www.w3/TR/FileAPI/#dfn-file
var invocation = new XMLHttpRequest();
invocation.setRequestHeader('Authorization', 'Bearer ' + token);
invocation.open('POST', "https://www.googleapis./upload/youtube/v3/videos?part=snippet", true);
invocation.send(videoFile);