8

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 completed");
                    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.

5
  • 1
    You find the problem? If so, share your complete code because that's exactly what I'm trying to do.
    – offset
    Jul 17, 2013 at 8:34
  • I get error: "Uncaught ReferenceError: gapi is not defined." why?
    – offset
    Jul 17, 2013 at 8:40
  • I ended up using the v2 API. If I find a solution using v3 I will post it. 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
    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. Jul 24, 2013 at 10:45

2 Answers 2

5
+50

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

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

badRequest  mediaBodyRequired   The request does not include the video content.

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

4
  • Kat, thanks for your reply. I know the error is because the request doesn't include the video content, but the reason of this is that the API doesn't specify how to make insert API calls using javascipt. An example would solve all my problems. Jul 23, 2013 at 17:44
  • Well, here's an example of getting a playlist... looking at it might help you... stackoverflow.com/a/12939702/996364 I'm looking for an 'insert' example but all I've found so far is a java example in the second link in my answer and a python example developers.google.com/youtube/v3/guides/uploading_a_video which uses oauth
    – Kat Cox
    Jul 24, 2013 at 13:40
  • Yes..I inspired my code on those examples but still no luck at all..Thanks for your help. Jul 25, 2013 at 14:01
  • 1
    Regarding your question why not using the YouTube upload widget. Although it states in their intro that you can upload a file, reading on in the revision history, the option to upload a file to YouTube via the YouTube Upload Widget apparently is removed Feb 22, 2014 at 16:27
1

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.com/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.org/TR/FileAPI/#dfn-file
var invocation = new XMLHttpRequest();
invocation.setRequestHeader('Authorization', 'Bearer ' + token);
invocation.open('POST', "https://www.googleapis.com/upload/youtube/v3/videos?part=snippet", true);
invocation.send(videoFile);
1
  • Stephen, your blog post is great, but it doesn't show the final http request ("The result is a successful upload and the request looks very much like the one generated by the ruby gem.")... :(
    – l33t
    Jun 8, 2014 at 21:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.