Kompletny przykład przesyłania plików w Formularzach Google

Question

Kompletny przykład przesyłania plików w Formularzach Google

Jak umożliwić widzom korzystanie z Formularzy Google w celu przesłania niektórych plików do formularza i zapisania ich na Dysku Google?

Szukam kompletnego przykładu: musi powiedzieć, jaki kod Dodać do przykładowego źródła HTML formularza Google. Jak użyć Google Apps Script, aby przesłać plik przeglądarki na moje konto Google Drive?

35

file-upload google-apps-script google-form

Author: Mogsdad, 2014-01-09

Source

2 answers

Od października 2016 r. Google dodało pytanie typu przesyłania plików w natywnych Formularzach Google, nie jest potrzebny skrypt Google Apps. patrz dokumentacja .

2

Author: jarvis,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-11-18 17:34:45

score 60 · Accepted Answer

Aktualizacja: Formularze Google mogą teraz przesyłać pliki. Ta odpowiedź została opublikowana przed Google Forms miał możliwość przesyłania plików.

To rozwiązanie nie korzysta z Formularzy Google. Jest to przykład użycia aplikacji webowej Apps Script, która jest zupełnie inna niż formularz Google. Aplikacja internetowa to w zasadzie strona internetowa, ale nie można uzyskać dla niej nazwy domeny. Nie jest to modyfikacja formularza Google, której nie można zrobić, aby przesłać plik.

Uwaga : miałem przykład zarówno usługa UI, jak i usługa HTML, ale usunęły przykład usługi UI, ponieważ usługa UI jest przestarzała.

Uwaga: jedyne dostępne ustawienie piaskownicy to teraz IFRAME. Jeśli chcesz użyć atrybutu onsubmit w znaczniku formularza początkowego: <form onsubmit="myFunctionName()">, może to spowodować zniknięcie formularza z ekranu po przesłaniu formularza.

Jeśli używasz trybu natywnego, aplikacja internetowa do przesyłania plików może już nie działać. W trybie natywnym złożenie formularza nie wywołuje domyślnego zachowania strony znikającej z ekranu. Jeśli używasz trybu natywnego, a formularz przesyłania plików nie działa, być może używasz przycisku typu "wyślij". Zgaduję, że możesz również korzystać z " google.scenariusz.Uruchom " interfejs API po stronie klienta, aby wysłać dane do serwera. Jeśli chcesz, aby strona zniknęła z ekranu po przesłaniu formularza, możesz to zrobić w inny sposób. Ale może cię to nie obchodzi, a nawet wolisz, aby strona pozostała na ekranie. W zależności od tego, co chcesz, musisz skonfigurować ustawienia i kod w określony sposób.

Jeśli używasz przycisku "Wyślij" i chcesz go nadal używać, możesz spróbować dodać event.preventDefault(); do kodu w funkcji obsługi zdarzenia wyślij. Możesz też użyć interfejsu API google.script.run Po stronie klienta.

Niestandardowy formularz do przesyłania plików z dysku użytkownika na Dysk Google można utworzyć za pomocą usługi Apps Script HTML. Ten przykład wymaga napisania programu, ale podałem tu cały podstawowy kod.

Ten przykład pokazuje formularz przesłania za pomocą usługi Google Apps Script HTML.

Czego Potrzebujesz

Konto Google
Dysk Google
Google Apps Script - zwany także skryptem Google

Google Apps Script

Istnieją różne sposoby, aby skończyć w edytorze kodu skryptu Google Apps.

załaduj skrypt aplikacji bezpośrednio z adresu www: https://script.google.com
Najpierw otwórz arkusz Google, a następnie otwórz skrypt aplikacji
przejdź do Dysku Google, a następnie otwórz skrypt aplikacji: https://drive.google.com/drive/#my-drive
przejdź do Dysku Google, a następnie kliknij plik projektu skryptu aplikacji
Open Apps Script from Google Docs
etc

Wspominam o tym, ponieważ jeśli nie jesteś świadomy wszystkich możliwości, może to być trochę mylące. Skrypt Google Apps może być osadzony w witrynie Google, arkuszach, dokumentach lub formularzach lub używany jako samodzielna aplikacja.

Przegląd Skryptów Aplikacji

Ten przykład to "samodzielna" aplikacja z usługą HTML.

Usługa HTML-tworzenie aplikacji WWW przy użyciu HTML, CSS i Javascript

Google Apps Script ma tylko dwa typy plików wewnątrz Project:

skrypt
HTML

Pliki skryptów mają rozszerzenie .gs. Kod {[8] } jest kodem po stronie serwera napisany w JavaScript i połączenie własnego API Google.

skopiuj i wklej poniższy kod
Zapisz To
Utwórz pierwszą nazwaną wersję
opublikuj to
Ustaw uprawnienia

I możesz zacząć go używać.

Zacznij od:

skopiuj i wklej ten kod:

Prześlij plik HTML Serwis:

Code.gs file (Created by Default)

//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;
}

Tworzenie pliku 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>

To jest pełny przykład pracy. Ma tylko dwa przyciski i jeden element <div>, więc nie zobaczysz zbyt wiele na ekranie. Jeśli skrypt .gs zakończy się sukcesem, zwracana jest prawda i uruchomiona zostanie funkcja onSuccess. Funkcja onSuccess (updateOutput) wstrzykuje wewnętrzny HTML do elementu div z komunikatem: "plik został UPLOADED!"

Zapisz plik, nadaj projektowi nazwę
Korzystanie z menu: File, Manage Version Następnie zapisz pierwszą wersję
Publish, Deploy As Web App następnie zaktualizuj

Gdy uruchomisz skrypt po raz pierwszy, poprosi o uprawnienia, ponieważ zapisuje pliki na dysku. Po przyznaniu uprawnień po raz pierwszy skrypt aplikacji zostanie zatrzymany i nie zostanie uruchomiony. Więc musisz to powtórzyć. Skrypt nie zapyta ponownie o uprawnienia po pierwszym czas.

Plik skryptu aplikacji pojawi się na Twoim Dysku Google. Na Dysku Google możesz ustawić uprawnienia dla tego, kto może uzyskać dostęp do skryptu i korzystać z niego. Skrypt jest uruchamiany poprzez podanie linku do użytkownika. Użyj linku tak, jak chcesz załadować stronę internetową.

Inny przykład użycia usługi HTML można zobaczyć pod tym linkiem tutaj na StackOverflow:

Przesyłanie plików za pomocą usługi HTML

Uwagi o przestarzałej usłudze UI:

Istnieje różnica między usługą UI, a metodą Ui getUi() klasy arkusza kalkulacyjnego (lub innej klasy) usługa Apps Script Ui została wycofana w grudniu. 11, 2014. Będzie działać przez pewien czas, ale zachęcamy do korzystania z usługi HTML.

Dokumentacja Google-usługa UI

Mimo, że usługa UIna przestarzałe, istnieje metoda {[18] } klasy arkusza kalkulacyjnego do dodawania niestandardowych menu , która jest nie "deprecated": {]}

Klasa arkusza kalkulacyjnego-metoda Get UI

Wspominam o tym, ponieważ może to być mylące, ponieważ obaj używają terminologii UI .

Metoda UI zwraca typ zwracany Ui.

Możesz dodać HTML do usługi UI, ale nie możesz użyć <button>, <input> lub <script> tag w HTML z usługą UI.

Oto link do udostępnionego pliku aplikacji skrypt Web App z wejściem forma:

Udostępniony Plik-Formularz Kontaktowy