Как изменить доступность файла Google Диска при вставке файла с помощью Javascript Google Picker API
Я пытаюсь использовать Google Drive Picker API для загрузки новых изображений или вставки изображений в мою CMS.
работает. Я могу получить URL изображения. Но проблема в том, что доступ к файлу, загруженному на Google Диск, по умолчанию является закрытым (только я, как владелец, могу просматривать его при входе в учетную запись Google). Но эти изображения доступны для просмотра любому пользователю в браузере, когда я вручную изменяю настройку доступности файла на Публичную или Всем, кто ссылается на сайт Google Диска.
Моя точка зрения здесь: как изменить доступность файла Google Drive при вставке файла с помощью Google Picker javascript API (изменить / установить доступность для Public или любого, у кого есть ссылка). Ниже мой текущий код.
<script>
//<![CDATA[
(function() {
/**
* Initialise a Google Driver file picker
*/
var FilePicker = window.FilePicker = function(options) {
// Config
this.apiKey = options.apiKey;
this.clientId = options.clientId;
// Elements
this.buttonEl = options.buttonEl;
// Events
this.onSelect = options.onSelect;
this.buttonEl.addEventListener('click', this.open.bind(this));
// Disable the button until the API loads, as it won't work properly until then.
this.buttonEl.disabled = true;
// Load the drive API
gapi.client.setApiKey(this.apiKey);
gapi.client.load('drive', 'v2', this._driveApiLoaded.bind(this));
google.load('picker', '1', {
callback: this._pickerApiLoaded.bind(this)
});
}
FilePicker.prototype = {
/**
* Open the file picker.
*/
open: function() {
// Check if the user has already authenticated
var token = gapi.auth.getToken();
if (token) {
this._showPicker();
} else {
// The user has not yet authenticated with Google
// We need to do the authentication before displaying the Drive picker.
this._doAuth(false, function() {
this._showPicker();
}.bind(this));
}
},
/**
* Show the file picker once authentication has been done.
* @private
*/
_showPicker: function() {
var accessToken = gapi.auth.getToken().access_token;
var view = new google.picker.DocsView();
var uploadView = new google.picker.DocsUploadView();
var viewss = new google.picker.View(google.picker.ViewId.DOCS);
viewss.setMimeTypes('image/png,image/jpeg,image/gif,image/jpg');
view.setIncludeFolders(true);
this.picker = new google.picker.PickerBuilder()
.addView(google.picker.ViewId.DOCS_IMAGES)
.addView(viewss)
.addView(uploadView)
.setAppId(this.clientId)
.setDeveloperKey(this.apiKey)
.setOAuthToken(accessToken)
.setCallback(this._pickerCallback.bind(this))
.build()
.setVisible(true);
},
/**
* Called when a file has been selected in the Google Drive file picker.
* @private
*/
_pickerCallback: function(data) {
if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
var fruits, fLen, i;
fruits = data[google.picker.Response.DOCUMENTS];
fLen = fruits.length;
for (i = 0; i < fLen; i++) {
var file = fruits[i];
var id = file[google.picker.Document.ID];
var request = gapi.client.drive.files.get({
fileId: id
});
request.execute(this._fileGetCallback.bind(this));
}
}
},
/**
* Called when file details have been retrieved from Google Drive.
* @private
*/
_fileGetCallback: function(file) {
if (this.onSelect) {
this.onSelect(file);
}
},
/**
* Called when the Google Drive file picker API has finished loading.
* @private
*/
_pickerApiLoaded: function() {
this.buttonEl.disabled = false;
},
/**
* Called when the Google Drive API has finished loading.
* @private
*/
_driveApiLoaded: function() {
this._doAuth(true);
},
/**
* Authenticate with Google Drive via the Google JavaScript API.
* @private
*/
_doAuth: function(immediate, callback) {
gapi.auth.authorize({
client_id: this.clientId,
scope: 'https://www.googleapis.com/auth/drive',
immediate: immediate
}, callback);
}
};
}());
//]]>
</script>
<script>
function initPicker() {
var picker = new FilePicker({
apiKey: 'HAHAblaBlaWTFashjahsgtP6BwWPf3Liukk',
clientId: '978946248407-WTFhahaBlaBla4q0f5c.apps.googleusercontent.com',
buttonEl: document.getElementById('pick_image'),
onSelect: function(file) {
console.log(JSON.stringify(file));
console.log(file);
console.log(file.title);
console.log(file.webContentLink);
$('#post-editor').append('<a href="'+file.webContentLink+'" class="center_img"><img src="'+file.webContentLink+'"/></a>');
}
});
}
</script>
<script src='https://www.google.com/jsapi?key=HAHAblaBlaWTFashjahsgtP6BwWPf3Liukk'></script>
<script src='https://apis.google.com/js/client.js?onload=initPicker'></script>
<button id='pick_image'>CLICK HERE INSERT OR UPLOAD IMAGE</button>
<!-- Image HTML will append to #post-editor below -->
<div id='post-editor' contenteditable='true' style='width:100%; height:200px'></div>
1 ответ
Ну, я думаю, вам нужно установить права доступа к файлу. То, что вам нужно установить, это role и type,
Вот пример кода из документации.
function insertPermission(fileId, value, type, role) {
var body = {
'value': value,
'type': type,
'role': role
};
var request = gapi.client.drive.permissions.insert({
'fileId': fileId,
'resource': body
});
request.execute(function(resp) { });
}
Для получения дополнительной информации, проверьте эти связанные вопросы SO: