wake-up-neo.net

Vollständiges Beispiel für das Hochladen von Google Forms-Dateien

Wie erlaube ich meinen Zuschauern, mit Google Forms einige Dateien in mein Formular hochzuladen und auf meinem Google Drive zu speichern?

Ich suche nach einem vollständigen Beispiel: Es muss angegeben werden, welcher Code zum Beispiel der Google Form-HTML-Quelle hinzugefügt werden soll. Wie kann ich mit Google Apps Script die Viewer-Datei in mein Google Drive-Konto hochladen?

36
Tem Pora

Update: Google Forms kann jetzt Dateien hochladen. Diese Antwort wurde veröffentlicht, bevor Google Forms Dateien hochladen konnte.

Diese Lösung verwendet keine Google Forms. Dies ist ein Beispiel für die Verwendung einer Apps Script-Webanwendung, die sich stark von Google Form unterscheidet. Eine Web-App ist im Grunde eine Website, für die Sie jedoch keinen Domain-Namen erhalten. Dies ist keine Änderung eines Google Forms, mit der keine Datei hochgeladen werden kann.

[~ # ~] Anmerkung [~ # ~] : Ich hatte ein Beispiel für beides den UI-Service und HTML-Service, habe aber das UI-Service-Beispiel entfernt, da der UI-Service veraltet ist.

[~ # ~] note [~ # ~] : Die einzige verfügbare Sandbox-Einstellung ist jetzt IFRAME. Wenn Sie ein onsubmit -Attribut im Anfangsformulartag verwenden möchten: <form onsubmit="myFunctionName()">, wird das Formular möglicherweise nach dem Absenden des Formulars vom Bildschirm ausgeblendet.

Wenn Sie den NATIVE-Modus verwendet haben, funktioniert Ihre Web-App zum Hochladen von Dateien möglicherweise nicht mehr. Im NATIVE-Modus ruft eine Formularübermittlung nicht das Standardverhalten der Seite auf, die vom Bildschirm verschwindet. Wenn Sie den NATIVE-Modus verwendet haben und Ihr Formular zum Hochladen von Dateien nicht mehr funktioniert, verwenden Sie möglicherweise die Schaltfläche "Senden". Möglicherweise verwenden Sie auch die clientseitige API "google.script.run", um Daten an den Server zu senden. Wenn Sie möchten, dass die Seite nach dem Absenden des Formulars vom Bildschirm verschwindet, können Sie dies auf eine andere Weise tun. Aber es ist Ihnen vielleicht egal oder Sie möchten sogar, dass die Seite auf dem Bildschirm bleibt. Je nachdem, was Sie möchten, müssen Sie die Einstellungen konfigurieren und auf bestimmte Weise codieren.

Wenn Sie eine Schaltfläche vom Typ "Submit" verwenden und diese weiterhin verwenden möchten, können Sie versuchen, event.preventDefault(); in der Submit-Ereignishandlerfunktion zu Ihrem Code hinzuzufügen. Oder Sie müssen die clientseitige API google.script.run Verwenden.


Mit dem Apps Script HTML-Dienst kann ein benutzerdefiniertes Formular zum Hochladen von Dateien von einem Computerlaufwerk des Benutzers auf Ihr Google Drive erstellt werden. Für dieses Beispiel muss ein Programm geschrieben werden, aber ich habe hier den gesamten Basiscode angegeben.

Dieses Beispiel zeigt ein Upload-Formular mit Google Apps Script HTML Service.

Was du brauchst

  • Google Benutzerkonto
  • Google Drive
  • Google Apps Script - auch Google Script genannt

Google Apps-Skript

Es gibt verschiedene Möglichkeiten, um im Google Apps Script-Code-Editor zu landen.

  • Laden Sie Apps Script direkt von der Webadresse: https://script.google.com
  • Öffnen Sie zuerst ein Google Sheet und dann Apps Script
  • Wechseln Sie zu Ihrem Google Drive und öffnen Sie Apps Script: https://drive.google.com/drive/#my-drive
  • Wechseln Sie zu Ihrem Google Drive und klicken Sie auf eine Apps Script-Projektdatei
  • Öffnen Sie Apps Script in Google Text & Tabellen
  • etc

Ich erwähne dies, weil es etwas verwirrend sein kann, wenn Sie nicht alle Möglichkeiten kennen. Google Apps Script kann in eine Google-Website, in Blätter, Dokumente oder Formulare eingebettet oder als eigenständige App verwendet werden.

Apps Script Übersicht

In diesem Beispiel handelt es sich um eine eigenständige App mit HTML-Dienst.

HTML-Service - Erstellen Sie eine Web-App mit HTML, CSS und Javascript

In Google Apps Script sind in einem Project nur zwei Dateitypen enthalten:

  • Skript
  • HTML

Skriptdateien haben die Erweiterung .gs. Der Code .gs Ist ein serverseitiger Code, der in JavaScript geschrieben ist und eine Kombination aus Googles eigener API darstellt.

  • Kopieren Sie den folgenden Code und fügen Sie ihn ein
  • Speichern Sie es
  • Erstellen Sie die erste benannte Version
  • Veröffentlichen Sie es
  • Legen Sie die Berechtigungen fest

    und Sie können es verwenden.

Beginnen mit:

  • Erstellen Sie ein neues leeres Projekt in Apps Script
  • Kopieren Sie diesen Code und fügen Sie ihn ein:

Laden Sie eine Datei mit HTML Service hoch:

Code.gs Datei (standardmäßig erstellt)

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

Erstellen Sie eine HTML-Datei:

<!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>

Dies ist ein voll funktionsfähiges Beispiel. Es hat nur zwei Schaltflächen und ein <div> - Element, sodass auf dem Bildschirm nicht viel zu sehen ist. Wenn das Skript .gs Erfolgreich ist, wird true zurückgegeben und eine Funktion onSuccess ausgeführt. Die onSuccess-Funktion (updateOutput) fügt inneren HTML-Code in das div -Element mit der Meldung "The File was UPLOADED!" Ein.

  • Speichern Sie die Datei, geben Sie dem Projekt einen Namen
  • Verwenden Sie das Menü: File, Manage Version Und speichern Sie dann die erste Version
  • Publish, Deploy As Web App dann Aktualisieren

Wenn Sie das Skript zum ersten Mal ausführen, werden Sie nach Berechtigungen gefragt, da Dateien auf Ihrem Laufwerk gespeichert werden. Nachdem Sie beim ersten Mal Berechtigungen erteilt haben, wird das Apps-Skript beendet und die Ausführung wird nicht abgeschlossen. Sie müssen es also erneut ausführen. Das Skript fragt nach dem ersten Mal nicht mehr nach Berechtigungen.

Die Apps Script-Datei wird in Ihrem Google Drive angezeigt. In Google Drive können Sie Berechtigungen festlegen, wer auf das Skript zugreifen und es verwenden darf. Das Skript wird ausgeführt, indem dem Benutzer einfach der Link bereitgestellt wird. Verwenden Sie den Link so, als würden Sie eine Webseite laden.

Ein weiteres Beispiel für die Verwendung des HTML-Dienstes finden Sie unter diesem Link auf StackOverflow:

Dateiupload mit HTML Service

HINWEISE zu veralteten UI-Diensten:

Es gibt einen Unterschied zwischen dem UI-Dienst und der Ui getUi() -Methode der Spreadsheet-Klasse (oder einer anderen Klasse). Der Apps Script-UI-Dienst wurde am 11. Dezember 2014 eingestellt. Er wird für einige weiterhin funktionieren Es wird jedoch empfohlen, den HTML-Dienst zu verwenden.

Google Documentation - UI Service

Obwohl der UI-Dienst ist veraltet ist, gibt es eine getUi() -Methode für die Tabellenkalkulationsklasse Hinzufügen von benutzerdefinierten Menüs , dh [~ # ~] nicht [~ # ~] veraltet:

Tabellenkalkulationsklasse - Benutzeroberflächenmethode abrufen

Ich erwähne dies, weil es verwirrend sein könnte, weil beide die Terminologie [~ # ~] ui [~ # ~] verwenden.

Die UI-Methode gibt den Rückgabetyp Ui zurück.

Sie können einem UI-Service HTML hinzufügen, aber Sie können im HTML mit dem UI-Service kein <button> -, <input> - oder <script> - Tag verwenden.

Hier ist ein Link zu einer freigegebenen Apps Script Web App-Datei mit einem Eingabeformular:

Shared File - Kontaktformular

62
Alan Wells

Seit Oktober 2016 hat Google einen Fragentyp für das Hochladen von Dateien in native Google Forms eingefügt, für den kein Google Apps-Skript erforderlich ist. Siehe Dokumentation .

2
jarvis