AppScript: как создать форму загрузки? - PullRequest
0 голосов
/ 06 ноября 2019

Я разрабатываю надстройку для Gmail с использованием AppScript. Моя цель - создать нечто похожее на изображение ниже. Есть подсказки?

upload image

1 Ответ

4 голосов
/ 06 ноября 2019

Проблема

Загрузка файлов в дополнениях 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 (или в комплекте с одним), так и надстройкой. Предполагая, что вы уже настроили манифест для надстройки, перейдите в меню «Публикация», выберите «Развернуть как веб-приложение», создайте развертывание и разрешите доступ любому.

Примечания

  1. Этот метод не позволит вам легко обновить пользовательский интерфейс, чтобы показать, какие файлы были загружены, но вы можете добавить withSuccessHandler() вызов к google.script.run, который при успешной обработке на стороне сервераЗагруженный файл закрывает окно с формой, сохраняя информацию о состоянии в кеш / свойства пользователя. Затем, если вы установите для OpenLink OnClose свойство RELOAD_ADD_ON (см. Шаг 1), вы сможете условно обновить пользовательский интерфейс, чтобы уведомить пользователя об успешной загрузке.
  2. ОБНОВЛЕНИЕ : после комментария Танаике я переработал процесс загрузки, чтобы лучше обрабатывать файлы: изменил двоичный строковый файл, считанный на ArrayBuffer, преобразованный в Int8Array и загруженный как экземпляр Array.
  3. Текущая проблема - загрузка файлов .g* (несмотря на правильную передачу). Обновит ответ, когда будет решена.

Ссылки

  1. OpenLink класс ссылка ;
  2. FileReader Web API ссылка на MDN;
  3. newBlob() метод ссылка (Utilities класс);
  4. Клиент-серверсвязь в GAS guide ;
  5. Создание и обслуживание HTML в GAS guide ;
  6. Веб-приложения guide ;
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...