Using Google File Collector on Mobile Sites

Question

We allow our users to download PDF files using Google Drive. The Google File Collector on the desktop works well on the desktop, but on our mobile mobile site we still get the standard file collector, and the user interface is not perfect. It is clearly optimized for desktop computers.

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

Using the https://apis.google.com/js/api.js library and google file collector 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 customize the popup style after loading to optimize 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;
}

JS

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");
}

,