Полный пример загрузки файла Google Forms

Question

Как мне разрешить моим зрителям использовать Google Forms для загрузки некоторых файлов в мою форму и сохранения их на моем Google Диске?

Я ищу полный пример:В нем должно быть указано, какой код добавить в пример HTML-источника Google Form.Как использовать скрипт Google Apps для загрузки файла программы просмотра в мою учетную запись Google Drive?

Answer 1

Обновление:Google Forms теперь может загружать файлы.Этот ответ был опубликован до того, как в Google Forms появилась возможность загружать файлы.

Это решение не использует Google Forms.Это пример использования веб-приложения Apps Script, которое сильно отличается от формы Google.Веб-приложение - это, по сути, веб-сайт, но вы не можете получить для него доменное имя.Это не модификация формы Google, которую невозможно выполнить для загрузки файла.

записка:У меня действительно был пример оба служба пользовательского интерфейса и HTML-служба, но удалили пример службы пользовательского интерфейса, поскольку служба пользовательского интерфейса устарела.

записка:Сейчас доступна только настройка песочницы IFRAME.Я, вы хотите использовать onsubmit атрибут в начальном теге формы: <form onsubmit="myFunctionName()">, это может привести к исчезновению формы с экрана после отправки формы.

Если вы использовали обычный режим, ваше веб-приложение для загрузки файлов, возможно, больше не работает.В обычном режиме отправка формы не вызывала бы поведение страницы, исчезающей с экрана по умолчанию.Если вы использовали обычный режим, и ваша форма загрузки файла больше не работает, возможно, вы используете кнопку типа "отправить".Я предполагаю, что вы также можете использовать клиентский API "google.script.run" для отправки данных на сервер.Если вы хотите, чтобы страница исчезла с экрана после отправки формы, вы могли бы сделать это другим способом.Но вам может быть все равно, или вы даже предпочитаете, чтобы страница оставалась на экране.В зависимости от того, чего вы хотите, вам нужно будет настроить параметры и код определенным образом.

Если вы используете кнопку типа "отправить" и хотите продолжать ее использовать, вы можете попробовать добавить event.preventDefault(); к вашему коду в функции отправки обработчика событий.Или вам нужно будет использовать google.script.run API на стороне клиента.

---

Пользовательскую форму для загрузки файлов с диска компьютера пользователя на ваш Google диск можно создать с помощью HTML-сервиса Apps Script.Этот пример требует написания программы, но я привел здесь весь базовый код.

В этом примере показана форма загрузки с помощью HTML-сервиса Google Apps Script.

что вам нужно

• Аккаунт Google
• Google Диск
• Google Apps Script - также называемый Google Script

Скрипт Google Apps

Существуют различные способы попасть в редактор кода скриптов Google Apps.

• Загружайте скрипт приложения непосредственно с веб-адреса: https://script.google.com
• Сначала откройте Google Sheet, затем откройте Apps Script
• Перейдите на свой Google диск, затем откройте Apps Script: https://drive.google.com/drive/#my-drive
• Перейдите на свой Google диск, затем нажмите на файл проекта Apps Script
• Откройте скрипт приложения из Google Docs
• и т.д.

Я упоминаю об этом, потому что, если вы не осведомлены обо всех возможностях, это может немного сбить с толку.Скрипт Google Apps может быть встроен в сайт Google, таблицы, документы или формы или использоваться как отдельное приложение.

Обзор скриптов приложений

Этот пример представляет собой "автономное" приложение с HTML-сервисом.

HTML-сервис - Создайте веб-приложение с использованием HTML, CSS и Javascript

Скрипт Google Apps содержит только два типа файлов внутри Project:

• Скрипт
• HTML

Файлы скриптов содержат .gs расширение.То .gs код - это серверный код, написанный на JavaScript, и комбинация собственного API Google.

• Скопируйте и вставьте следующий код
• Сохрани это
• Создайте первую именованную версию
• Опубликуйте это

• Установите разрешения

  и вы можете начать им пользоваться.

Начните с:

• Создайте новый пустой проект в Apps Script
• Скопируйте и вставьте в этот код:

Загрузить файл с помощью HTML-сервиса:

Code.gs файл (создается по умолчанию)

//For this to work, you need a folder in your Google drive named:
// 'For Web Hosting'
// or change the hard coded folder name to the name of the folder
// you want the file written to

function doGet(e) {
  return HtmlService.createTemplateFromFile('Form')
    .evaluate() // evaluate MUST come before setting the Sandbox mode
    .setTitle('Name To Appear in Browser Tab')
    .setSandboxMode();//Defaults to IFRAME which is now the only mode available
}

function processForm(theForm) {
  var fileBlob = theForm.picToLoad;

  Logger.log("fileBlob Name: " + fileBlob.getName())
  Logger.log("fileBlob type: " + fileBlob.getContentType())
  Logger.log('fileBlob: ' + fileBlob);

  var fldrSssn = DriveApp.getFolderById(Your Folder ID);
    fldrSssn.createFile(fileBlob);

  return true;
}

Создайте html-файл:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h1 id="main-heading">Main Heading</h1>
    <br/>
    <div id="formDiv">

      <form id="myForm">

        <input name="picToLoad" type="file" /><br/>
        <input type="button" value="Submit" onclick="picUploadJs(this.parentNode)" />

      </form>
    </div>


  <div id="status" style="display: none">
  <!-- div will be filled with innerHTML after form submission. -->
  Uploading. Please wait...
</div>

</body>
<script>

function picUploadJs(frmData) {

  document.getElementById('status').style.display = 'inline';

  google.script.run
    .withSuccessHandler(updateOutput)
    .processForm(frmData)
};
  // Javascript function called by "submit" button handler,
  // to show results.

  function updateOutput() {

    var outputDiv = document.getElementById('status');
    outputDiv.innerHTML = "The File was UPLOADED!";
  }

</script>
</html>

Это полноценный рабочий пример.На нем всего две кнопки и одна <div> элемент, так что вы мало что увидите на экране.Если .gs сценарий выполнен успешно, возвращено значение true, и onSuccess функция запускается.Функция onSuccess (updateOutput) вводит внутренний HTML-код в div элемент с сообщением "Файл был ЗАГРУЖЕН!"

• Сохраните файл, дайте проекту название
• Использование меню: File, Manage Version затем сохраните первую версию
• Publish, Deploy As Web App затем обновите

Когда вы запустите скрипт в первый раз, он запросит разрешения, поскольку он сохраняет файлы на ваш диск.После того, как вы предоставите разрешения в первый раз, скрипт приложений остановится и не завершит запуск.Итак, вам нужно запустить его снова.Скрипт больше не будет запрашивать разрешения после первого раза.

Файл скрипта приложений отобразится на вашем Google Диске.На Google Диске вы можете установить разрешения для тех, кто может получить доступ к скрипту и использовать его.Скрипт запускается простым предоставлением ссылки пользователю.Используйте ссылку так же, как вы загружали бы веб-страницу.

Другой пример использования HTML-сервиса можно увидеть по этой ссылке здесь, на StackOverflow:

Загрузка файлов с помощью HTML-сервиса

ПРИМЕЧАНИЯ об устаревшем сервисе пользовательского интерфейса:

Существует разница между сервисом пользовательского интерфейса и пользовательским интерфейсом getUi() метод класса Spreadsheet (или другого класса) Служба пользовательского интерфейса Apps Script была признана устаревшей в декабре.11, 2014.Он будет продолжать работать в течение некоторого периода времени, но вам рекомендуется использовать HTML-сервис.

Документация Google - сервис пользовательского интерфейса

Даже несмотря на то, что служба пользовательского интерфейса является устарел, есть getUi() метод класса электронной таблицы для добавления пользовательские меню, который является НЕ осуждаемый:

Класс электронной таблицы - Получить метод пользовательского интерфейса

Я упоминаю об этом, потому что это может сбить с толку, потому что они оба используют одну и ту же терминологию пользовательский интерфейс.

Метод пользовательского интерфейса возвращает Ui возвращаемый тип.

Вы можете добавить HTML в службу пользовательского интерфейса, но вы не можете использовать <button>, <input> или <script> тег в HTML с помощью сервиса пользовательского интерфейса.

Вот ссылка на файл веб-приложения shared Apps Script с формой ввода:

Общий файл - Контактная форма

Answer 2

По состоянию на октябрь 2016 года Google добавил тип загрузки файла в нативных формах Google Forms, не требуется скрипт Google Apps. См. Документация .