从 php 或 html 表单将文件上传到 Google Team Drive
Upload file to Google Team Drive from php or html form
我正在考虑使用带有上传按钮的 php 或 html 表单将文件上传到 Google Team Drive。
我想知道是否有人成功使用了 Google 选择器 API?如果是这样,请您分享您的解决方案。
This is the info I'm referencing on Google API
感谢您的帮助!
经过数小时的反复试验,我成功了。
我的代码贴在下面。
请记住在 OAuth 设置中设置您的 URLs
这些是我使用 MAMP 的:
http://localhost:8888
http://localhost:8888/printing-forms/custom-stationery
TEAM DRIVE ID 可在 Team Drive URL
中找到
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google File Upload for Custom Stationary Orders</title>
<script type="text/javascript">
// The Browser API key obtained from the Google API Console.
// Replace with your own Browser API key, or your own key.
var developerKey = '[your API key]';
// The Client ID obtained from the Google API Console. Replace with your own Client ID.
var clientId = "[your Client ID]"
// Replace with your own project number from console.developers.google.com.
// See "Project number" under "IAM & Admin" > "Settings"
var appId = "[your project number]";
// Scope to use to access user's Drive items.
var scope = ['https://www.googleapis.com/auth/drive.file'];
var pickerApiLoaded = false;
var oauthToken;
// Use the Google API Loader script to load the google.picker script.
function loadPicker() {
gapi.load('auth', {'callback': onAuthApiLoad});
gapi.load('picker', {'callback': onPickerApiLoad});
}
function onAuthApiLoad() {
window.gapi.auth.authorize(
{
'client_id': clientId,
'scope': scope,
'immediate': false
},
handleAuthResult);
}
function onPickerApiLoad() {
pickerApiLoaded = true;
createPicker();
}
function handleAuthResult(authResult) {
if (authResult && !authResult.error) {
oauthToken = authResult.access_token;
createPicker();
}
}
// Create and render a Picker object for searching images.
function createPicker() {
if (pickerApiLoaded && oauthToken) {
// var view = new google.picker.View(google.picker.ViewId.DOCS);
// view.setMimeTypes("pdf");
var picker = new google.picker.PickerBuilder()
.enableFeature(google.picker.Feature.SUPPORT_TEAM_DRIVES)
// Hide list of files on the Drive
.enableFeature(google.picker.Feature.MINE_ONLY)
// Hide the Upload option for Personal Drive
// .enableFeature (google.picker.Feature.NAV_HIDDEN)
.addView(new google.picker.DocsUploadView()
// Custom Stationary Folder
.setParent('[Team Drive ID from URL]'))
.addView(new google.picker.DocsView(google.picker.ViewId.DOCS)
.setEnableTeamDrives(true)
.setSelectFolderEnabled(false)
// Upload files to Custom Stationary Folder
.setParent('[Team Drive ID from URL]'))
// Select more than one file
// .enableFeature(google.picker.Feature.MULTISELECT_ENABLED)
.setAppId(appId)
.setOAuthToken(oauthToken)
// Displays Personal Drive folder
// .addView(view)
.setDeveloperKey(developerKey)
.setCallback(pickerCallback)
.build();
picker.setVisible(true);
}
}
// A simple callback implementation.
function pickerCallback(data) {
if (data.action == google.picker.Action.PICKED) {
var fileId = data.docs[0].name;
// Show the ID of the Google Drive folder
document.getElementById('result').innerHTML = fileId + ' has been successfully uploaded';
// location.reload();
// alert('The user selected: ' + fileId);
}
}
</script>
</head>
<body>
<div id="result"></div>
<div id="continue"><a href="http://localhost:8888/printing-forms/custom-stationery/">Back to the Order Form</a></div>
<!-- The Google API Loader script. -->
<script type="text/javascript" src="https://apis.google.com/js/api.js?onload=loadPicker"></script>
</body>
</html>
我正在考虑使用带有上传按钮的 php 或 html 表单将文件上传到 Google Team Drive。
我想知道是否有人成功使用了 Google 选择器 API?如果是这样,请您分享您的解决方案。
This is the info I'm referencing on Google API
感谢您的帮助!
经过数小时的反复试验,我成功了。
我的代码贴在下面。
请记住在 OAuth 设置中设置您的 URLs
这些是我使用 MAMP 的:
http://localhost:8888
http://localhost:8888/printing-forms/custom-stationery
TEAM DRIVE ID 可在 Team Drive URL
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google File Upload for Custom Stationary Orders</title>
<script type="text/javascript">
// The Browser API key obtained from the Google API Console.
// Replace with your own Browser API key, or your own key.
var developerKey = '[your API key]';
// The Client ID obtained from the Google API Console. Replace with your own Client ID.
var clientId = "[your Client ID]"
// Replace with your own project number from console.developers.google.com.
// See "Project number" under "IAM & Admin" > "Settings"
var appId = "[your project number]";
// Scope to use to access user's Drive items.
var scope = ['https://www.googleapis.com/auth/drive.file'];
var pickerApiLoaded = false;
var oauthToken;
// Use the Google API Loader script to load the google.picker script.
function loadPicker() {
gapi.load('auth', {'callback': onAuthApiLoad});
gapi.load('picker', {'callback': onPickerApiLoad});
}
function onAuthApiLoad() {
window.gapi.auth.authorize(
{
'client_id': clientId,
'scope': scope,
'immediate': false
},
handleAuthResult);
}
function onPickerApiLoad() {
pickerApiLoaded = true;
createPicker();
}
function handleAuthResult(authResult) {
if (authResult && !authResult.error) {
oauthToken = authResult.access_token;
createPicker();
}
}
// Create and render a Picker object for searching images.
function createPicker() {
if (pickerApiLoaded && oauthToken) {
// var view = new google.picker.View(google.picker.ViewId.DOCS);
// view.setMimeTypes("pdf");
var picker = new google.picker.PickerBuilder()
.enableFeature(google.picker.Feature.SUPPORT_TEAM_DRIVES)
// Hide list of files on the Drive
.enableFeature(google.picker.Feature.MINE_ONLY)
// Hide the Upload option for Personal Drive
// .enableFeature (google.picker.Feature.NAV_HIDDEN)
.addView(new google.picker.DocsUploadView()
// Custom Stationary Folder
.setParent('[Team Drive ID from URL]'))
.addView(new google.picker.DocsView(google.picker.ViewId.DOCS)
.setEnableTeamDrives(true)
.setSelectFolderEnabled(false)
// Upload files to Custom Stationary Folder
.setParent('[Team Drive ID from URL]'))
// Select more than one file
// .enableFeature(google.picker.Feature.MULTISELECT_ENABLED)
.setAppId(appId)
.setOAuthToken(oauthToken)
// Displays Personal Drive folder
// .addView(view)
.setDeveloperKey(developerKey)
.setCallback(pickerCallback)
.build();
picker.setVisible(true);
}
}
// A simple callback implementation.
function pickerCallback(data) {
if (data.action == google.picker.Action.PICKED) {
var fileId = data.docs[0].name;
// Show the ID of the Google Drive folder
document.getElementById('result').innerHTML = fileId + ' has been successfully uploaded';
// location.reload();
// alert('The user selected: ' + fileId);
}
}
</script>
</head>
<body>
<div id="result"></div>
<div id="continue"><a href="http://localhost:8888/printing-forms/custom-stationery/">Back to the Order Form</a></div>
<!-- The Google API Loader script. -->
<script type="text/javascript" src="https://apis.google.com/js/api.js?onload=loadPicker"></script>
</body>
</html>