0

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?

  • Is this the full code you're using? This seems incomplete. Among other things, you are not declaring any function (`function` keyword being missing), there's no script tag, no HTML, etc. Can you provide all the code necessary to understand and reproduce this? If I use the source code you referenced, I can display the picker without problems. – Iamblichus Nov 16 '22 at 08:43
  • I have added this code in stack blitz https://stackblitz.com/edit/angular-ivy-fizrci?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.module.ts Can you please check it? – Sriram Sundar Nov 16 '22 at 11:45
  • Can you provide a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example), not involving unrelated sections of code nor external frameworks (e.g. Angular)? – Iamblichus Nov 17 '22 at 08:25

0 Answers0