Проблема
Загрузка файлов в дополнениях Gmail. Короче говоря - не совсем так. Надстройки Gmail используют класс CardService
для создания пользовательского интерфейса, и у него нет типа ввода file
и никаких функций перетаскивания. Но есть обходной путь.
Шаг 1. Создайте виджет триггера
Затем убедитесь, что ваш Card
содержит CardSection
с ImageButton
, *Виджет 1016 * или KeyValue
, для которого установлено действие OpenLink
. При использовании метода setUrl(url)
для настройки URL-адреса для открытия по щелчку виджета используйте URL-адрес текущего проекта (при развертывании как WebApp и Add-on), к которому можно получить динамический доступ с помощью вызова ScriptApp.getService().getUrl()
.
Шаг 2. Создание формы отправки файла
В проекте дополнения создайте HTML-файл, который будет обрабатывать загрузку файла. Вы можете использовать пример один или создать свою собственную реализацию. в примере файла для обработки переданного файла используется FileReader
веб-API (обратите внимание, что для обмена данными между клиентом и сервером в скрипте Служб Google требуется запретить обработчик событий submit
и вызывать функцию на стороне сервера только через goolge.script.run
API).
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<form>
<input name="file" type="file" />
<button id="submit" type="submit">Save file</button>
</form>
<script>
var form = document.forms[0];
form.addEventListener('submit', (event) => {
event.preventDefault();
var file = form.elements[0].files[0];
var reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.onload = () => {
var buffer = reader.result;
var data = Array.from(new Int8Array(buffer));
google.script.run.withSuccessHandler((server) => {
top.window.close();
}).saveFile(data,file.name,file.type);
};
});
</script>
</body>
</html>
Шаг 3. Настройка doGet ()
В своем коде WebApp добавьте требуемую функцию doGet()
, которая будет отображатьФорма загрузки файла, которую мы создали на шаге 2. Она может быть такой же простой, как пара строк кода (просто убедитесь, что html-файл проанализирован с помощью HtmlService
):
function doGet() {
var html = HtmlService.createHtmlOutputFromFile('file name from step 2');
return html;
}
Шаг4. Обработайте загрузку файла
В своем коде WebApp добавьте обработчик, который будет получать данные файла (в этом примере предполагается, что вы читаете его как байт [], см. Шаг 2).
function saveFile(upload,name,mime) {
var blob = Utilities.newBlob(upload,mime,name);
var file = DriveApp.createFile(blob);
Logger.log(file.getUrl()) //test upload;
//handle file as needed;
return;
}
Шаг 5. Развертывание как WebApp
Наконец, вам нужно будет развернуть надстройку как WebApp (или в комплекте с одним), так и надстройкой. Предполагая, что вы уже настроили манифест для надстройки, перейдите в меню «Публикация», выберите «Развернуть как веб-приложение», создайте развертывание и разрешите доступ любому.
Примечания
- Этот метод не позволит вам легко обновить пользовательский интерфейс, чтобы показать, какие файлы были загружены, но вы можете добавить
withSuccessHandler()
вызов к google.script.run
, который при успешной обработке на стороне сервераЗагруженный файл закрывает окно с формой, сохраняя информацию о состоянии в кеш / свойства пользователя. Затем, если вы установите для OpenLink
OnClose
свойство RELOAD_ADD_ON
(см. Шаг 1), вы сможете условно обновить пользовательский интерфейс, чтобы уведомить пользователя об успешной загрузке. - ОБНОВЛЕНИЕ : после комментария Танаике я переработал процесс загрузки, чтобы лучше обрабатывать файлы: изменил двоичный строковый файл, считанный на
ArrayBuffer
, преобразованный в Int8Array
и загруженный как экземпляр Array
. - Текущая проблема - загрузка файлов
.g*
(несмотря на правильную передачу). Обновит ответ, когда будет решена.
Ссылки
OpenLink
класс ссылка ; FileReader
Web API ссылка на MDN; newBlob()
метод ссылка (Utilities
класс); - Клиент-серверсвязь в GAS guide ;
- Создание и обслуживание HTML в GAS guide ;
- Веб-приложения guide ;