Using google drive file picker on mobile sites

Question

We allow our users to upload pdf files via google drive. The google drive file picker works well on desktop but on our mobile responsive site we still get the standard file picker and the user experience is not ideal. It's obviously optimized for desktops.

Is there a better way to do this for responsive mobile sites?

Using the https://apis.google.com/js/api.js library and the google file picker https://developers.google.com/picker/

$(function($){ $(document).ready(function () {  pdfPicker = new GoogleFilePicker({
    apiKey: 'XXXXXXXXX',
    clientId: 'XXXXXXX',
    scope: ['https://www.googleapis.com/auth/drive.readonly'],
    viewId: 'pdfs',
    onLoad: function () {
    },
    onSuccess: function (data) {
      var element = $('#resume_url');
      element.val(data.downloadUrl + '&token=' + data.token);
      element.change();
    },
    onCancel: function () {
    },
    load: true
  });


$('#btn_pdfPicker_gdrive').on('click', function(event){
  $('#resume').empty();
  pdfPicker.createPicker();
  //Close modal so we can see the google drive picker.
  $("div[data-vet-upload-resume]").modal('hide');
});


<a href="javascript:void(0)" id="btn_pdfPicker_gdrive" class="btn btn-block">
    <di>
        Upload with<br>Google Drive
    </div>
</a>


<input type="text" name="data[Resume][resume_url]" id="resume_url" style="display:block;position:absolute;top:0;left:-9999px;" />

Answer 1

We adjust the popup style after load to optimise it.

CSS

.google_picker_popup{
  height: 100% !important;
  width: 100% !important;

}

.google_picker_container{
  height: 80% !important;
  width: 80% !important;
  max-height: 1024px;
  min-width:250px;
  max-width: 1039px;
  top:0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  margin: auto;
}

and add the classes in the JS right after building the picker

function createPicker() {
    //the rest of your function here
      build();
      picker.setVisible(true);
    //adjust picker size
    $(".picker.shr-q-shr-r-shr-td.picker-dialog-content").addClass("google_picker_popup");
    $(".picker.shr-q-shr-r.picker-dialog").addClass("google_picker_container");
}

And that's the outcome

Hope that helps