Vollständiges Beispiel für das Hochladen einer Google Forms-Datei

StackOverflow https://stackoverflow.com//questions/21013693

Frage

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

Ich suche ein vollständiges Beispiel:Es muss angeben, welcher Code zur Beispiel-HTML-Quelle des Google-Formulars hinzugefügt werden soll.Wie verwende ich Google Apps Script, um die Datei des Betrachters in mein Google Drive-Konto hochzuladen?

War es hilfreich?

Lösung

Aktualisieren:Google Forms kann jetzt Dateien hochladen.Diese Antwort wurde gepostet, bevor Google Forms die Möglichkeit hatte, Dateien hochzuladen.

Diese Lösung verwendet nicht Google Forms.Dies ist ein Beispiel für die Verwendung einer Apps Script-Web-App, die sich stark von einem Google-Formular unterscheidet.Eine Web-App ist im Grunde eine Website, für die Sie jedoch keinen Domänennamen erhalten können.Dies ist keine Änderung eines Google-Formulars, was nicht zum Hochladen einer Datei möglich ist.

NOTIZ:Ich hatte ein Beispiel dafür beide den UI-Dienst und den HTML-Dienst, haben jedoch das UI-Dienst-Beispiel entfernt, da der UI-Dienst veraltet ist.

NOTIZ:Die einzige verfügbare Sandbox-Einstellung ist jetzt IFRAME.Ich möchte ein verwenden onsubmit Attribut im Anfangsformular-Tag: <form onsubmit="myFunctionName()">, kann es dazu führen, dass das Formular nach dem Absenden des Formulars vom Bildschirm verschwindet.

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

Wenn Sie eine Schaltfläche vom Typ „Senden“ verwenden und diese weiterhin verwenden möchten, können Sie versuchen, sie hinzuzufügen event.preventDefault(); zu Ihrem Code in der Submit-Event-Handler-Funktion hinzufügen.Oder Sie müssen das verwenden google.script.run Clientseitige API.

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

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

Was du brauchst

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

Google Apps-Skript

Es gibt verschiedene Möglichkeiten, zum Code-Editor von Google Apps Script zu gelangen.

  • Laden Sie das Apps-Skript direkt von der Webadresse: https://script.google.com
  • Öffnen Sie zuerst ein Google Sheet und dann Apps Script
  • Gehen Sie zu Ihrem Google Drive und öffnen Sie dann Apps Script: https://drive.google.com/drive/#my-drive
  • Gehen Sie zu Ihrem Google Drive und klicken Sie dann auf eine Apps Script-Projektdatei
  • Öffnen Sie Apps Script aus Google Docs
  • usw

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

Übersicht über Apps-Skripte

Dieses Beispiel ist eine „Stand Alone“-App mit HTML-Dienst.

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

Google Apps Script enthält nur zwei Dateitypen in einem Project:

  • Skript
  • HTML

Skriptdateien haben eine .gs Verlängerung.Der .gs Code ist ein in JavaScript geschriebener serverseitiger Code und eine Kombination aus Googles eigener API.

  • 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 Sie 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 dem HTML-Dienst 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 Knöpfe und einen <div> Element, so dass Sie nicht viel auf dem Bildschirm sehen werden.Wenn die .gs Das Skript ist erfolgreich, es wird „true“ zurückgegeben und ein onSuccess Funktion läuft.Die onSuccess-Funktion (updateOutput) fügt inneres HTML in die ein div Element mit der Meldung „Die Datei wurde HOCHGELADEN!“

  • Speichern Sie die Datei und geben Sie dem Projekt einen Namen
  • Verwendung des Menüs: File, Manage Version Speichern Sie dann die erste Version
  • Publish, Deploy As Web App dann Aktualisieren

Wenn Sie das Skript zum ersten Mal ausführen, werden Sie um Berechtigungen gebeten, da es Dateien auf Ihrem Laufwerk speichert.Nachdem Sie das erste Mal Berechtigungen erteilt haben, stoppt das Apps-Skript und kann nicht vollständig ausgeführt werden.Sie müssen es also erneut ausführen.Das Skript fragt nach dem ersten Mal nicht erneut 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 hier auf StackOverflow:

Datei-Upload mit HTML-Dienst

HINWEISE zum veralteten UI-Dienst:

Es gibt einen Unterschied zwischen dem UI-Dienst und der Benutzeroberfläche getUi() Methode der Spreadsheet-Klasse (oder einer anderen Klasse) Der Apps Script UI Service wurde im Dezember veraltet.11. 2014.Es wird noch einige Zeit lang funktionieren, wir empfehlen Ihnen jedoch, den HTML-Dienst zu verwenden.

Google-Dokumentation – UI-Dienst

Auch wenn der UI-Dienst Ist veraltet, es gibt eine getUi() Methode der hinzuzufügenden Tabellenkalkulationsklasse benutzerdefinierte Menüs, welches ist NICHT veraltet:

Tabellenkalkulationsklasse – UI-Methode abrufen

Ich erwähne dies, weil es verwirrend sein könnte, weil beide die Terminologie verwenden Benutzeroberfläche.

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

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

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

Geteilte Datei – Kontaktformular

Andere Tipps

Zum Oktober 2016 hat Google einen Dateityp der Dateiupload in nativen Google-Formularen hinzugefügt, kein Google Apps-Skript erforderlich. Siehe Dokumentation .

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top