Youtube-Api Button wont show after ajax call

Question

I am trying to setup a youtube upload for one of my own projects. I am using the sample code from google that can be found here: https://developers.google.com/youtube/v3/code_samples/javascript#upload-a-video

The script to upload videos works perfectly fine. My only problem is the following:

I would like to offer multiple areas for the upload or multiple uploads in other words.

There is the general file that contains the sign-in button and the video upload itself. This file will be loaded into a DIV-container via Ajax. Loading the file works fine as well. The only problem is, that the sign-in button wont show up if the file was being loaded via ajax.

It seems to me that i would have to initialize the api again but even after searching the web for hours i could not fint anything. All i know is, that the following code is loaded by the api automatically:

googleApiClientReady = function() {
    gapi.auth.init(function() {
        window.setTimeout(checkAuth, 1);
    });
}

So i think i need to figure out a way, how to load that function again once the ajax-call is finished. I just can not figure out how. Every time i try to call this function the browser gives me a gapi.client error message.

Does anybody have experience with the youtube api? What am i doing wrong here? Thanks

Answer 1

The answer would be in this line:

UploadVideo.prototype.handleUploadClicked = function() {
  $('#button').attr('disabled', true);
  this.uploadFile($('#file').get(0).files[0]);
};

If this function is called after uploading and getting the video data, it will disable the upload button. Just remove that line and you'll be able to upload multiple videos.

Hope this helps.