softmonkeyjapan / angular-google-picker Goto Github PK

It would be nice if you can somehow change the settings of the views maybe inside the controller or something.
Imagine that you have more than one picker on a site. So what you want to do is the change the "DocsUploadView.setParent(string)" on each picker

"Note that clicking on Pick files button may fail the first time because your browser may block the popup"

This can be avoided by pre-loading the required javascript files "auth" + "picker" instead of triggering them on bind-click. By firing them on bind-click the event-chain is lost and Google does not trust this to be a user-invoked-action.

Solution:
move api-load out of click chain

gapi.load('auth');
gapi.load('picker');

element.bind('click', function(e) {
   instanciate(); // will now call onApiAuthLoad without having to load files that breaks event-chain
});

I've tried using angular-google-picker on modal, but it didn't seems to work.
The picker went behind the modal and I can't choose files.

How to make this work on modal?

P.S. I'm also using angular-ui bootstrap

I've tried to implement the callback functionality as shown in the readme, but the function never fires. I never get output to the console or any errors. Here's my code.

In the view...

<a href="javascript:;" lk-google-picker picker-files="googleFiles" after-select="afterSelectCallback(googleFiles)" class="apply-file google-drive">Google Drive</a>

And in my controller...

    $scope.googleFiles = [];
    $scope.afterSelectCallback = function(files){
        console.log(files);
    };

Hi,

So we are using your angular google picker to to try to download a file from google drive and pass it to our node js backend, currently we only have the url or embedUrl, i was curious if you new how to be able to generate a download or direct url that we could then pass to our nodejs backend.

Regards,
John

Hi

After many attempts, I haven't be able to add label to view linked to custom folder.
I have something like this:

angular.module('myApp', ['lk-google-picker'])
.config(['lkGoogleSettingsProvider', function (lkGoogleSettingsProvider) {
  lkGoogleSettingsProvider.views([
    'DocsView().setParent("XXXXXXXXXXXXXXX").setIncludeFolders(true)'
  ]);
}])

I tried to use ViewGroup. I manage to add label toViewGroup, but I can't link created label, with custom directory.

Have you ever create view linked to custom directory and define label for it? If you managed to do that, could you share the script?

It is posible to implement the parameter inmediate: false as a parameter like scope, where we could define true or false?
Best regards

Minor thing but might be annoying. Tried to create a PR, but don't have permissions apparently.

The variable data is not defined. Google returns a plain array now, so we are good to go with docs.

diff --git a/README.md b/README.md
index 12df294..b617cfc 100644
--- a/README.md
+++ b/README.md
@@ -59,7 +59,7 @@ Download [https://github.com/softmonkeyjapan/angular-google-picker/archive/0.2.2
      }

      $scope.onPicked = function (docs) {
-       angular.forEach(data.docs, function (file, index) {
+       angular.forEach(docs, function (file, index) {
          $scope.files.push(file);
        });
      }

Is there a way to avoid opening the popup for the google auth? I'd rather it redirect and back again on the same page.

My app functions offline, so I only load Drive on user request (click). But angular picker directive is part of my page so it loads before they can click the button. What I found in my console log was some crashing of picker because gapi is null if I'm offline.

I looked at the code and I only see one place where gapi is used at load time:

Around line 142:
gapi.load('auth');
gapi.load('picker');

These seem unnecessary to me since they are also loaded in the instantiate() function. Instantiate is bound to click. So those modules will load at the appropriate time.

Recommend that the two early calls be removed unless there's a good reason to keep them. I remove them and everything functions the same for me.

At the very least I recommend refactor by calling instantiate instead of doing the same thing in two places. Also in instantiate() check gapi before invoking load.

Hi I'm getting an error in console using chrome when I select a file from drive.
Cannot read property 'push' of undefined.

on this line:
scope.pickerFiles.push(file);

Hi there! Thank you very much for this picker :)

I would like to suggest you to pass the 'data' object instead of just 'data.docs' in the picker callback, so you can also do something when the user closes the picker (checking 'data.action').
I needed 'pickerCallback' instead of 'pickerFiles' and the mentioned functionality, so I forked your repo some weeks ago. If you want a PR with something just tell me: https://github.com/frankdiox/angular-google-picker/commits/master

I also modified README.md with the new examples.
Thanks again!

Can u add increase z-index for google picker.
Cause i use for modal which z-index is higher than google picker.
I solved it by adding increasing z-index in google-picker.js.
but it is not the right way.. cause when i run bower update it will effect the googlepicker.js
Thanks

When i upload a file , it gets uploaded on my drive but when i get the object in onPicked() function i dont get the file size. How can i get file size during upload? I get file size as sizeBytes when i pick a file

I want to fetch only documents and presentations from google drive, so when i try to rewrite views, i got the following error lkGoogleSettingsProvider.views is not a function, Will you please help me to fix this?

var googlepickerController = angular.module('googlepickerControllers', ['lk-google-picker'])

googlepickerController.config(['lkGoogleSettingsProvider', function(lkGoogleSettingsProvider) {
    // Configure the API credentials here
    lkGoogleSettingsProvider.configure({
        apiKey   : '*****************************',
        clientId : '*************************************************',
        views    : ['DocsView()'],
    });
}])

This is the error i'm getting in console, when i loggin to gmail account

After I open the google drive picker and select a file the modal freezes. I can't cancel it or close it and every time I click cancel I get the error in my console removeAttribute is not a function. It works perfectly fine in Chrome and IE.

When the user Cancels a selection in the Google Picker dialog, the Cancel action is not being passed back to the after-select callback function. From a quick look at the directive source, it appears that the callback is only being called from the directive when the action === 'picked':

if (data.action == google.picker.Action.PICKED) {
  gapi.client.load('drive', 'v2', function () {
    scope.afterSelect(data);
    scope.$apply();
  });
}

Should the callback function also be called when the action is 'cancel'?

Also, why load the drive API here? What does it provide? It doesn't appear to be interpreting the returned data.

1. That’s an error.

Error: origin_mismatch

Application: Angular Google Drive Picker Demo

You can email the developer of this application at: [email protected]

Request Details
proxy=oauth2relay672633426
immediate=false
scope=https://www.googleapis.com/auth/drive
origin=https://softmonkeyjapan.github.io
response_type=token
redirect_uri=postmessage
state=848035323|0.1860715458
client_id=20787361493-372fi66o31k7t4t2ha3nvj5j36blm417.apps.googleusercontent.com
include_granted_scopes=true
That’s all we know.

The picker is running fine when I login with my email since I already filled "Authorized JavaScript origins" with a link like the following:
https://n-pzh4f6xxxxxxvdpjinpsahxzdhphhc5ak4iq-script.googleusercontent.com
but when logging in with another gmail account, I'm getting origin mismatch error, should I add another origin in "Authorized JavaScript origins"
What is the setting that should I add in order to work with all emails account.
and Thanks in advance.

Hi,
I wondered if it was possible to get thumbnails (especially for photos/videos) from Drive in the array of documents? Am I missing parameters?

Thanks a lot for your work,

Jonathan

This package looks great and i'm gonna use it either way, but it'd be cool if it were on npm.

In order to select an item from your online storage, please sign in.

Hi,

You got an error on your demo page (https://softmonkeyjapan.github.io/angular-google-picker/) when clicking on pick file:

When i tried to upload files it's return an error "Server Rejected".

Also getting two errors in console.

1. Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://docs.google.com') does not match the recipient window's origin ('http://localhost:13080').(anonymous function) @ cb=gapi.loaded_0:77

2. Invalid 'X-Frame-Options' header encountered when loading 'https://docs.google.com/picker?protocol=gadgets&origin=http%3A%2F%2Flocalho…%3Atrue%7D))&rpctoken=tic259j42wgf&rpcService=c36g0mksuysk&thirdParty=true': 'ALLOW-FROM http://localhost:13080' is not a recognized directive. The header will be ignored.

Give me a solution for that.

Many thanks,
Bhavik Mulia

Hi,

can you please let me know how i upload a whole folder like drive?

I have one requirement for upload a multiple folders?

Thanks,

The lk-google-picker directive causes an error when added to an HTML element with another directive that is creating an isolate scope. (See https://docs.angularjs.org/error/$compile/multidir). Using the directive on an that also contains tooltip directives from the angular-ui project. HTML source code is:

<a class="list-group-item" id="mnuGooglePicker" lk-google-picker after-select="afterSelectCallback" ng-disabled="isUploading" ng-show="!pageIsReadOnly" tooltip="Get Images from Google Drive" tooltip-popup-delay="750" tooltip-placement="right" tooltip-append-to-body="true">
    <i class="fa fa-fw fa-google"></i>&nbsp;Google Drive
</a>

Is it possible to use this directive in conjunction with other directives that may be creating their own isolate scope?

Hi,

Great library! Exactly what I needed and simple to use. I managed to get it working, however there are some errors in Google Chrome, also on your demo website. Can you take a look at it?

Greetings,
Karens

When we try to upload a file, the file upload shows the progress in the progress bar and when it completes, it closes the file upload dialog and throws the following error :

Refused to get unsafe header "X-HTTP-Status-Code-Override"
t.getResponseHeader @ 2423154982-picker_modularized_i18n_opc.js:329t.Rja @ 2423154982-picker_modularized_i18n_opc.js:1231t.Sja @ 2423154982-picker_modularized_i18n_opc.js:1231UV.R_ @ 2423154982-picker_modularized_i18n_opc.js:1232t.Mla @ 2423154982-picker_modularized_i18n_opc.js:1228t.NF @ 2423154982-picker_modularized_i18n_opc.js:192t.dispatchEvent @ 2423154982-picker_modularized_i18n_opc.js:190t.dra @ 2423154982-picker_modularized_i18n_opc.js:326t.K3 @ 2423154982-picker_modularized_i18n_opc.js:325b @ 2423154982-picker_modularized_i18n_opc.js:367t.fra @ 2423154982-picker_modularized_i18n_opc.js:325
2423154982-picker_modularized_i18n_opc.js:329

Refused to get unsafe header "X-HTTP-Status-Code-Override"