Google drive picker API "this.qi is not a function"

87 Views Asked by At

I am trying to load the google drive picker API in my project. This source code is taken from Google Picker Code Sample This is my source code.

gapiLoaded() {
   window['gapi'].load('client:picker', this.intializePicker);
 }

 async intializePicker() {
   await window['gapi'].client.load('https://www.googleapis.com/discovery/v1/apis/drive/v3/rest');
 }

 gisLoaded() {
   this.tokenClient = window['google'].accounts.oauth2.initTokenClient({
     client_id: MY_Client_Id,
     scope: 'https://www.googleapis.com/auth/drive.readonly',
     callback: '', // defined later
   });
   this.gisInited = true;
 }

 handleAuthClick() {
   this.tokenClient.callback = async (response) => {
     if (response.error !== undefined) {
       throw (response);
     }
     this.accessToken = response.access_token;
     this.createPicker();
   };

   if (this.accessToken === null) {
     this.tokenClient.requestAccessToken({prompt: 'consent'});
   } else {
     this.tokenClient.requestAccessToken({prompt: ''});
   }
 }

 createPicker() {
   var view = window['google'].picker.View(window['google'].picker.ViewId.DOCS);
   var picker =  window['google'].picker.PickerBuilder()
       .enableFeature(window['google'].picker.Feature.NAV_HIDDEN)
       .enableFeature(window['google'].picker.Feature.MULTISELECT_ENABLED)
       .setDeveloperKey('MY_APP_KEY')
       .setAppId('MY_PROJECT_ID')
       .setOAuthToken(this.accessToken)
       .addView(view)
       .addView( window['google'].picker.DocsUploadView())
       .setCallback(this.pickerCallback)
       .build();
   picker.setVisible(true);
 }


 async pickerCallback(data) {
   if (data.action === window['google'].picker.Action.PICKED) {
     let text = `Picker response: \n${JSON.stringify(data, null, 2)}\n`;
     const document = data[window['google'].picker.Response.DOCUMENTS][0];
     const fileId = document[window['google'].picker.Document.ID];
     console.log(fileId);
     const res = await window['gapi'].client.drive.files.get({
         'fileId': fileId,
         'fields': '*',
     });
     text += `Drive API response for first document: \n${JSON.stringify(res.result, null, 2)}\n`;      
     console.log(text)
   }
 }

When I run this code, I am getting this error "this.Qi is not a function". The error arise at Picker builder function. How to resolve this?

0

There are 0 best solutions below