9

Nov '15 - still looking for a solution.

I'm using the Google Picker API https://developers.google.com/picker/docs/#hiworld to (obviously!) have the user pick a file from their Drive account (select a file for downloading from Drive - not to upload a new file to Drive). This is on a responsive website, not an "app" (native or otherwise).

It works fine on a desktop and tablet, but on a phone the Picker is just too big.

In https://developers.google.com/picker/docs/reference#Picker it says:

PickerBuilder.setSize() Set the preferred dialog size. The dialog will be auto-centered. It has a minimum size of (566,350) and a maximum size of (1051,650).

So it seems it is not designed to work on a phone? Am I missing something, or is there a workaround, or an alternative? It seems very odd that Google would exclude phone users from using the Picker when other services like Dropbox work straight out of the box.

5
  • You're probably better off writing your own.
    – pinoyyid
    Commented Aug 10, 2015 at 12:31
  • thanks @pinoyyid - are you saying that you know for sure that there is no mobile solution? And, without shooting the messenger, do you why Google would choose not to support phones?
    – KevInSol
    Commented Aug 10, 2015 at 13:59
  • 1
    Experience has taught me to rely as little as possible on closed source libraries that don't offer support contracts. You are at the whim of the developer, in this case Google, who's priorities are rarely the same as yours or mine. The picker is a complex library because it tries to deal with many different use cases (eg. picking from GDrive as well as picking from your local drives). You'll probably find that your use case is relatively simple and can fairly easily be built by hand. I see you've tried here already groups.google.com/forum/#!forum/google-picker-api ;-(
    – pinoyyid
    Commented Aug 10, 2015 at 18:17
  • There's commercial options out there that might solve your issue and support other cloud storage. filepicker.com
    – Squiggs.
    Commented Nov 9, 2015 at 11:48
  • Although it may seem that this question is obsolete because the v3 API can invoke the Android system picker, that's not true. The system picker outputs a content: URI rather than the fileId that the rest of the Drive API uses, and there seems to be no way to retrieve the folder path rather than just the simple name. It also doesn't give sufficient permission to create a sharing link to the file the user just picked, so my app has to require read/write access to your whole Drive (https://www.googleapis.com/auth/drive) in order to do that!
    – Pr0methean
    Commented Aug 20, 2019 at 1:31

1 Answer 1

1

I had a similar problem and managed to solve it by using this css:

@media screen and (max-width: 991px) {
 .picker.modal-dialog {
    max-width: 355px !important;
 }
 .picker.modal-dialog-content.picker-dialog-content{
     max-width: 355px !important;
 }
}

You should be able to adjust the width and media query to suit your needs or do more media quires to make it look nicer in other devices.

I also set the option in the JS to the minimum PickerBuilder.setSize(566,350).

4
  • Please do not post the same answer on multiple questions.
    – elixenide
    Commented Nov 27, 2015 at 5:16
  • Thanks Mark, I tried that on my main site CSS file but no change. Where did you put that class?
    – KevInSol
    Commented Mar 7, 2016 at 17:25
  • Sorry It was a while ago now since I did this and my memory is a bit foggy on it now. Reviewing the css is just in a style sheet required in the head tag. If I remember correctly the classes in the markup were getting generated by the Google Picker itself. However, I did base integration of the picker on this gist.github.com/Daniel15/5994054 - so may make it diferent for yours. If you have any more questions please let me know. Commented Mar 9, 2016 at 10:00
  • I just noticed this has actually stopped working on our setup. I am guessing Google has changed it somehow. I managed did a quick fix albeit a bit hacky that gets it to work. I am not sure why this works over the old one but it does for me. I just added this style tag in body above where the picker modal loads. <style> @media screen and (max-width: 991px) { .picker.modal-dialog { max-width: 355px !important; } .picker.modal-dialog-content.picker-dialog-content{ max-width: 355px !important; } }</style> I am not happy with this solution. if I think of something else I'll let you know. Commented Mar 9, 2016 at 10:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.