在移動網站上使用谷歌驅動器文件選擇器

我們允許我們的用戶通過谷歌驅動器上傳PDF文件。谷歌驅動器文件選擇器在桌面上運行良好，但在我們的移動響應網站上，我們仍然獲得標準文件選擇器，用戶體驗不理想。它顯然是針對桌面進行了優化的。在移動網站上使用谷歌驅動器文件選擇器

有沒有更好的方式爲響應式移動網站做到這一點？

使用https://apis.google.com/js/api.js庫和谷歌文件選擇器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;" />

來源

2015-10-01 jfountain

你指的是什麼'標準文件選擇器'？什麼移動平臺？一段代碼會有幫助。 – seanpj

添加代碼示例 – jfountain

我們加載後調整彈出框的形式進行優化。

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

，建設機械手

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

之後添加的JS類而這結果

希望幫助

來源

2017-12-05 21:53:59 Kareem

在移動網站上使用谷歌驅動器文件選擇器

回答

相關問題