it-swarm.com.ru

Пример загрузки файла в Google Forms

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

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

36
Tem Pora

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

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

[~ # ~] примечание [~ # ~] : у меня был пример оба Служба пользовательского интерфейса и Служба HTML, но удалили пример Службы пользовательского интерфейса, потому что Служба пользовательского интерфейса устарела.

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

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

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


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

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

Что вам нужно

  • Учетная запись Google
  • Гугл Диск
  • Google Apps Script - также называется Google Script

Google Apps Script

В редакторе кода скрипта Google Apps можно по-разному попасть.

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

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

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

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

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

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

  • Скрипт
  • HTML

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

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

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

Начать с:

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

Загрузите файл с помощью сервиса 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-сервиса

ЗАМЕЧАНИЯ об устаревшем UI Service:

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

Google Documentation - UI Service

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

Spreadsheet Class - метод Get UI

Я упоминаю об этом, потому что это может сбить с толку, потому что они оба используют терминологию [~ # ~] ui [~ # ~] .

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

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

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

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

62
Alan Wells

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

2
jarvis