Google Drive Picker (JavaScript) not mobile friendly / responsive

Question

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.

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
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
There's commercial options out there that might solve your issue and support other cloud storage. filepicker.com — Squiggs.
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

Mark Brewster Mark Brewster · Accepted Answer · 2015-11-26T16:58:39

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).

Google Drive Picker (JavaScript) not mobile friendly / responsive

1 Answers