Google Drive API Picker acting weird

1.3k Views Asked by At

I'm working on a React application which need to access Google Drive API. My basic settings are correct (api key, client id, application id, etc...)

I can open the oauth Dialog and sign in (I can get the Oauth token), then I run a function which open the picker.

Here's my problem : I made a first version with a only HTML basic page and the picker was working great even if I had these errors (which seems to be recurrent)

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://docs.google.com') does not match the recipient window's origin ('myURL').

Invalid 'X-Frame-Options' header encountered when loading ...

POST https://docs.google.com/picker/logImpressions 400

But now in my React app, the picker is open and I can click on all Files BUT clicking on "Save", "Cancel" don't trigger anything. Same thing if I try to use filter options or if I try to close the picker. Do you have any idea of what can cause this ?

My code : React

<ButtonCustom onClick={()=>loadGoogleDrive(this.state.channel,this.onSuccess)}>Importer depuis Gdrive</ButtonCustom>

and the loadGoogleDrive function :

    var developerKey = 'here goes my api key';

    // The Client ID obtained from the Google API Console. Replace with your own Client ID.
    var clientId = 'here goes my client id';
    
    // Replace with your own project number from console.developers.google.com.
    // See "Project number" under "IAM & Admin" > "Settings"
    var appId = 'here goes my app id';
    console.log(developerKey,clientId,appId)
    // Scope to use to access user's Drive items.
    var scope = ['https://www.googleapis.com/auth/drive.readonly'];
    
    var pickerApiLoaded = false;
    var oauthToken;
    
    // Use the Google API Loader script to load the google.picker script.
    function loadPicker() {
        if(oauthToken){
            gapi.load('picker', {'callback': onPickerApiLoad});
    
        }
        else{
            gapi.load('auth', {'callback': onAuthApiLoad});
    
        }
       
    }
    
    function onAuthApiLoad() {
        gapi.auth.authorize(
            {
                'client_id': clientId,
                'scope': scope,
                'immediate': false
            },
            handleAuthResult);
    }
    
    function onPickerApiLoad() {
        pickerApiLoaded = true;
        createPicker();
    }
    
    function handleAuthResult(authResult) {
        gapi.load('picker', {'callback': onPickerApiLoad});
        if (authResult && !authResult.error) {
            oauthToken = authResult.access_token;
            createPicker();
        }
    }
    
    // Create and render a Picker object for searching images.
    function createPicker() {
        if (pickerApiLoaded && oauthToken) {
            var view = new window.google.picker.View(window.google.picker.ViewId.DOCS);
            view.setMimeTypes("image/png,image/jpeg,image/jpg,application/json,application/vnd.google-apps.document");
            // MimeTypes a ajouter/modifier selon les besoins
            var picker = new window.google.picker.PickerBuilder()
                //   .enableFeature(google.picker.Feature.NAV_HIDDEN) Permet de cacher le bouton UPLOAD
                .enableFeature(window.google.picker.Feature.MULTISELECT_ENABLED)
                .setAppId(appId)
                .setOAuthToken(oauthToken)
                .addView(view)
                
                //.addView(new google.picker.DocsUploadView())
                .setDeveloperKey(developerKey)
                .setCallback(pickerCallback)
                .build();
            picker.setVisible(true);
        }
    }
    
    
    
    // A simple callback implementation.
    function pickerCallback(data) {
        console.log('datas',data)
        if(data.docs){
            importCallback(data.docs,'googledrive',{'oauthToken' : oauthToken});
        }
        
            

    } 

    loadPicker();
    
    
    
}

Here's a picture from the bug, i can click on the pictures but not on anything else Sorry for the blur effect I'm not allowed to share the pictures.

Thanks and if you need any more informations i'll be glad to help (and sorry for my bad english)

UPDATE

It appears there were conflicts between plugins (we dont know which one because we are using a lot of them). One of my coworker fixed this by putting all the GDrive api code on a new independent popup.

0

There are 0 best solutions below