web-dev-qa-db-fra.com

Exemple complet de téléchargement de fichier Google Forms

Comment autoriser mes utilisateurs à utiliser Google Forms pour importer des fichiers dans mon formulaire et les enregistrer sur Google Drive?

Je cherche un exemple complet: il doit indiquer le code à ajouter à la source HTML exemple Google Form. Comment utiliser Google Apps Script pour télécharger le fichier du téléspectateur sur mon compte Google Drive?

file-uploadgoogle-apps-scriptgoogle-form
36
Tem Pora

Mise à jour: Google Forms peut désormais télécharger des fichiers. Cette réponse a été postée avant que Google Forms puisse importer des fichiers.

Cette solution n'utilise pas Google Forms. Ceci est un exemple d'utilisation d'une application Web Script Script, qui est très différente d'un formulaire Google. Une application Web est essentiellement un site Web, mais vous ne pouvez pas lui attribuer un nom de domaine. Ce n'est pas une modification d'un formulaire Google, ce qui ne peut pas être fait pour télécharger un fichier.

[~ # ~] note [~ # ~] : J'ai eu un exemple de les deux le service d'interface utilisateur et Service HTML, mais avez supprimé l'exemple de service d'interface utilisateur, car ce service est obsolète.

[~ # ~] note [~ # ~] : le seul paramètre de sandbox disponible est maintenant IFRAME. Si vous souhaitez utiliser un attribut onsubmit dans la balise de formulaire de début: <form onsubmit="myFunctionName()">, le formulaire risque de disparaître de l'écran après la soumission du formulaire.

Si vous utilisiez le mode NATIVE, votre application Web de téléchargement de fichier ne fonctionnerait peut-être plus. En mode NATIVE, une soumission de formulaire n'invoque pas le comportement par défaut de la page qui disparaît de l'écran. Si vous utilisiez le mode NATIVE et que votre formulaire de téléchargement de fichier ne fonctionne plus, vous utilisez peut-être un bouton de type "soumettre". J'imagine que vous pouvez également utiliser l'API côté client "google.script.run" pour envoyer des données au serveur. Si vous souhaitez que la page disparaisse de l'écran après la soumission d'un formulaire, vous pouvez le faire d'une autre manière. Mais vous ne vous en souciez peut-être pas, ou même préférez que la page reste à l'écran. Selon ce que vous voulez, vous devrez configurer les paramètres et coder d'une certaine manière.

Si vous utilisez un bouton de type "submit" et souhaitez continuer à l'utiliser, vous pouvez essayer d'ajouter event.preventDefault(); à votre code dans la fonction du gestionnaire d'événements submit. Ou vous devrez utiliser l'API côté client google.script.run.

Un formulaire personnalisé pour le téléchargement de fichiers d'un lecteur d'ordinateur utilisateur sur votre Google Drive peut être créé à l'aide du service HTML de script Apps. Cet exemple nécessite l'écriture d'un programme, mais j'ai fourni tout le code de base ici.

Cet exemple montre un formulaire de téléchargement avec le service HTML de script Google Apps.

De quoi as-tu besoin

  • Compte google
  • Google Drive
  • Google Apps Script - également appelé Google Script

Script Google Apps

L’éditeur de code Google Apps Script peut être utilisé de différentes manières.

  • Charger le script d'application directement à partir de l'adresse Web: https://script.google.com
  • Ouvrez d'abord une feuille Google, puis ouvrez le script Apps.
  • Accédez à Google Drive, puis au script Open Apps: https://drive.google.com/drive/#my-drive
  • Accédez à votre Google Drive, puis cliquez sur un fichier de projet de script Apps.
  • Ouvrir un script d'application à partir de Google Documents
  • etc

Je mentionne cela parce que si vous n'êtes pas au courant de toutes les possibilités, cela pourrait être un peu déroutant. Le script Google Apps peut être intégré à un site, des feuilles, des documents ou des formulaires de Google, ou utilisé comme une application autonome.

Présentation du script Apps

Cet exemple est une application "autonome" avec service HTML.

Service HTML - Créer une application Web à l'aide de HTML, CSS et Javascript

Le script Google Apps ne contient que deux types de fichiers dans un Project:

  • Scénario
  • HTML

Les fichiers de script ont une extension .gs. Le code .gs Est un code côté serveur écrit en JavaScript et une combinaison de la propre API de Google.

  • Copier et coller le code suivant
  • Sauvegarde le
  • Créer la première version nommée
  • Le publier

  • Définir les autorisations

    et vous pouvez commencer à l'utiliser.

Commence par:

  • Créer un nouveau projet vierge dans le script d'application
  • Copier et coller dans ce code:

Télécharger un fichier avec le service HTML:

Code.gs fichier (créé par défaut)

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

Créez un fichier 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>

Ceci est un exemple de travail complet. Il n'a que deux boutons et un élément <div>, Vous ne verrez donc pas grand chose à l'écran. Si le script .gs Réussit, la valeur true est renvoyée et une fonction onSuccess est exécutée. La fonction onSuccess (updateOutput) injecte du code HTML interne dans l'élément div avec le message "Le fichier a été téléchargé".

  • Enregistrez le fichier, donnez un nom au projet
  • En utilisant le menu: File, Manage Version Puis enregistrez la première version
  • Publish, Deploy As Web App puis mise à jour

Lorsque vous exécutez le script pour la première fois, il vous demandera des autorisations, car il enregistre des fichiers sur votre lecteur. Une fois que vous avez accordé des autorisations pour la première fois, le script Apps s’arrête et ne s’achève pas. Donc, vous devez l'exécuter à nouveau. Le script ne demandera plus d'autorisations après la première fois.

Le fichier de script des applications apparaîtra dans votre Google Drive. Dans Google Drive, vous pouvez définir des autorisations pour déterminer qui peut accéder au script et l'utiliser. Le script est exécuté en fournissant simplement le lien à l'utilisateur. Utilisez le lien comme si vous chargiez une page Web.

Un autre exemple d'utilisation du service HTML peut être vu à ce lien ici sur StackOverflow:

Téléchargement de fichier avec service HTML

REMARQUES sur le service UI déconseillé:

Il y a une différence entre le service d'interface utilisateur et la méthode Ui getUi() de la classe Spreadsheet (Ou autre classe). Le service d'interface utilisateur Script a été obsolète le 11 décembre 2014. Il continuera à fonctionner pendant période, mais vous êtes encouragé à utiliser le service HTML.

Documentation Google - Service d'interface utilisateur

Même si le service d'interface utilisateur est est obsolète, il existe une méthode getUi() de la classe de la feuille de calcul. d'ajouter des menus personnalisés , ce qui correspond à [~ # ~] et non [~ # ~] obsolète:

Classe de feuille de calcul - Méthode Get UI

Je mentionne cela parce que cela pourrait être déroutant, car ils utilisent tous les deux la terminologie [~ # ~] ui [~ # ~] .

La méthode d'interface utilisateur retourne un type de retour Ui.

Vous pouvez ajouter du HTML à un service d'interface utilisateur, mais vous ne pouvez pas utiliser de balise <button>, <input> Ou <script> Dans le code HTML associé au service d'interface utilisateur.

Voici un lien vers un fichier Apps Script Web App partagé avec un formulaire de saisie:

Fichier partagé - Formulaire de contact

62
Alan Wells

Depuis octobre 2016, Google a ajouté un type de question de téléchargement de fichier dans les formulaires Google natifs. Aucun script Google Apps n'est requis. Voir documentation .

2
jarvis