在移动网站上使用谷歌驱动器文件选择器

Question

我们允许用户通过Google驱动器上传pdf文件。谷歌驱动器文件选择器在桌面上运行良好，但在我们的移动响应式网站上，我们仍然获得标准文件选择器，用户体验并不理想。它显然针对台式机进行了优化。

为响应式移动网站提供更好的方法吗？

使用https://apis.google.com/js/api.js库和Google文件选择器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

我们在加载后调整弹出样式以优化它。

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

这就是结果

希望有所帮助