Загрузка изображения с помощью скрипта Служб Google в таблицу GS - передача значений в и из HTML-сервиса Модальное диалоговое окно - PullRequest
0 голосов
/ 14 июня 2019

Я пытаюсь инициировать загрузку файла с листа Google, беря загруженный файл, добавляя его в папку на Google Диске, а затем возвращая URL-адрес загруженного файла и помещая его в ячейку на листе. В настоящее время я запускаю загрузку файла с помощью флажка. Как только вы установите флажок TRUE, появится диалоговое окно с полем ввода загрузки файла. Это запускается установленной функцией onEdit. Кроме того, информация о строке в листе будет использоваться для названия нового загруженного файла. Эта информация будет введена вручную на листе.

Я попадаю на строку showModalDialog, и диалоговое окно появляется нормально, но я не могу понять, как передать переменные из исходной функции в службу HTML, а затем снова (вместе с файлом) загрузить на диск, задать имя и вернуть URL-адрес на лист.

Вот первая функция в Code.gs , получающая значения из функции onEdit:

function addFile(ss,ui,row,total) { \\Triggered if edited cell is in column 25 & value is TRUE
  Logger.log('add file function');
  var name = ss.getRange(row,1).getDisplayValue();
  var date = ss.getRange(row,3).getDisplayValue();
  var filename = 'Row ' + row + ' - ' + name + ' - ' + date + ' - ' + total;
  var htmlTemp = HtmlService.createTemplateFromFile('Index');
  htmlTemp.fName = filename;
  htmlTemp.position = row;
  var html = htmlTemp.evaluate().setHeight(76).setWidth(415);
  ui.showModalDialog(html, 'Upload');
  Logger.log('end of add file function');
}

А вот что есть в Index.html :

<!DOCTYPE html>
<html>
  <head>
    <base target="_center">
    <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
  </head>
  <body>
  <form>
    Please upload image below.<br /><br />
    <input type="file" name="upload" id="file" accept="image/*,.pdf" />
    <input type="button" value="Submit" class="action" onclick="formData(this.parentNode)" />
    <input type="button" value="Close" onclick="google.script.host.close()" />
  </form>
  <script>
    function formData(obj){
      var newFileName = <? fName ?>;
      var rowNum = <? position ?>;

  google.script.run.withSuccessHandler(closeIt).upload(obj,newFileName,rowNum);
    }
    function closeIt(e){
      console.log(e);
      google.script.host.close();
    };
  </script>
</body>
</html>

А вот функция возврата на Code.gs :

function upload(obj,newFileName,rowNum) {
  Logger.log('upload function');
  var upFile = DriveApp.getFolderById('[folderid]').createFile(obj).setName(newFileName);
  var fileUrl = upFile.getUrl();
  Logger.log(fileUrl);
  var urlCell = SpreadsheetApp.getSheetByName('sheet name').getRange(rowNum,26);
  urlCell.setValue('=HYPERLINK("' + fileUrl + '","View image")');
}

Запустив этот код, диалоговое окно появляется нормально, и я могу выбрать файл для загрузки. Однако нажатие кнопки «Отправить» ничего не делает, и поле остается в силе, пока я не выделю его или не нажму кнопку «Отмена». Журналы доходят только до «конца функции добавления файла» и никогда не доходят до функции upload. Должна ли строка google.script.run.withSuccessHandler закрыть диалоговое окно, или нужно что-то еще, чтобы подтвердить / получить файл и закрыть окно?

Я искал в Интернете и нашел несколько сообщений, связанных с этим, но, похоже, ни одна из них не касается этой конкретной проблемы. Это также в значительной степени откровенный код, который я собрал из этих постов, так что, возможно, там есть что-то, чего нет, и если это так, я приношу свои извинения. Любая помощь будет оценена; спасибо!

[Редактировать: кнопка отправки не открывала отдельную вкладку, потому что я использовал <input type="button"> вместо <button>.]

1 Ответ

0 голосов
/ 18 июня 2019

Согласно документации [1] в разделе «Параметры и возвращаемые значения», если вы собираетесь отправлять объект формы в качестве параметра «это должен быть единственный параметр функции».Таким образом, вы должны отправить параметры внутри формы, используя ввод типов «скрытый» или «текст», затем из code.gs вы можете получить входные данные объекта Form.Еще одна вещь, указанная в документации [1] в разделе «форма», заключается в том, что вам необходимо отключить действие отправки по умолчанию с помощью функции protectFormSubmit.

Другая проблема заключается в том, что правильный способ печати переменных, передаваемых вшаблон использует <?= ?> вместо <? ?>, который работает для выполнения кода, но не для печати переменных.[2]

С вашей функцией addFile все в порядке.Ниже приведен код, который я протестировал в своей среде, и я смог успешно загрузить изображение и распечатать URL-адрес в листе.

Index.html:

<!DOCTYPE html>
<html>
  <head>
    <base target="_center">
    <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
        <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
  </head>
  <body>
  <form id="myForm">
      Please upload image below.<br /><br />
    <input type="hidden" name="fname" id="fname" value="<?= fName ?>"/>
    <input type="hidden" name="position" id="position" value="<?= position ?>"/>
    <input type="file" name="file" id="file" accept="image/jpeg,.pdf" />
    <input type="button" value="Submit" class="action" onclick="formData(this.parentNode)" />
    <input type="button" value="Close" onclick="google.script.host.close()" />
  </form>
  <script>
  //Disable the default submit action  using “func1”
   window.onload=func1;
   function func1() {
      document.getElementById('myForm').addEventListener('submit', function(event) {
            event.preventDefault();
          });  
   }

   function formData(obj){
       google.script.run.withSuccessHandler(closeIt).upload(obj);
   }   

  function closeIt(e){
      console.log(e);
      google.script.host.close();
  };   

    </script>
</body>
</html>

Code.gs (функция загрузки):

function upload(obj) {
  //Retrieve the input data of the Form object.
  var newFileName = obj.fname;
  var rowNum = obj.position;
  var blob = obj.file;

  var upFile = DriveApp.getFolderById('[folderid]').createFile(blob).setName(newFileName);
  var fileUrl = upFile.getUrl();

  var urlCell = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Sheet1').getRange(rowNum,5);
  urlCell.setValue('=HYPERLINK("' + fileUrl + '","View image")');

}

[1] https://developers.google.com/apps-script/guides/html/communication

[2] https://developers.google.com/apps-script/guides/html/templates

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...