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

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

Question

Comment puis-je autoriser mes utilisateurs à utiliser Google Forms pour télécharger certains fichiers sur mon formulaire et les enregistrer sur mon Google Drive ?

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

Était-ce utile?

La solution

Mise à jour:Google Forms peut désormais télécharger des fichiers.Cette réponse a été publiée avant que Google Forms ait la possibilité de télécharger des fichiers.

Cette solution n'utilise pas Google Forms.Ceci est un exemple d'utilisation d'une application Web Apps Script, qui est très différente d'un formulaire Google.Une application Web est essentiellement un site Web, mais vous ne pouvez pas obtenir de nom de domaine pour celle-ci.Il ne s'agit pas d'une modification d'un formulaire Google, ce qui n'est pas possible pour télécharger un fichier.

NOTE:J'avais un exemple de les deux le service UI et le service HTML, mais nous avons supprimé l'exemple du service UI, car le service UI est obsolète.

NOTE:Le seul paramètre sandbox disponible est maintenant IFRAME.Je veux utiliser un onsubmit attribut dans la balise de formulaire de début : <form onsubmit="myFunctionName()">, le formulaire peut disparaître de l'écran après sa soumission.

Si vous utilisiez le mode NATIVE, votre application Web de téléchargement de fichiers ne fonctionne peut-être plus.Avec le mode NATIVE, la soumission d'un formulaire n'invoquerait pas le comportement par défaut de la page disparaissant de l'écran.Si vous utilisiez le mode NATIVE et que votre formulaire de téléchargement de fichiers ne fonctionne plus, alors vous utilisez peut-être un bouton de type « soumettre ».Je suppose que vous utilisez peut-être également 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 procéder d'une autre manière.Mais vous ne vous en soucierez peut-être pas, ou même préférerez que la page reste à l'écran.En fonction de ce que vous souhaitez, vous devrez configurer les paramètres et coder d'une certaine manière.

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

Un formulaire personnalisé permettant de télécharger des fichiers depuis le lecteur de l'ordinateur d'un utilisateur vers votre Google Drive peut être créé avec le service HTML Apps Script.Cet exemple nécessite l'écriture d'un programme, mais j'ai fourni ici tout le code de base.

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

De quoi as-tu besoin

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

Script d'applications Google

Il existe différentes manières d'accéder à l'éditeur de code Google Apps Script.

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

Je mentionne cela parce que si vous n’êtes pas conscient de toutes les possibilités, cela pourrait être un peu déroutant.Google Apps Script peut être intégré à un site Google, Sheets, Docs ou Forms, ou utilisé comme une application autonome.

Présentation du script d'applications

Cet exemple est une application « autonome » avec le service HTML.

Service HTML - Créez une application Web en utilisant HTML, CSS et Javascript

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

  • Scénario
  • HTML

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

  • Copiez et collez le code suivant
  • Sauvegarde le
  • Créer la première version nommée
  • Publiez-le

  • Définir les autorisations

    et vous pouvez commencer à l'utiliser.

Commence par:

  • Créer un nouveau projet vide dans Apps Script
  • Copiez et collez ce code :

Téléchargez 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 <div> élément, vous ne verrez donc pas grand-chose à l’écran.Si la .gs le script réussit, true est renvoyé et un onSuccess la fonction s'exécute.La fonction onSuccess (updateOutput) injecte du HTML interne dans le div élément avec le message « Le fichier a été téléchargé ! »

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

Lorsque vous exécutez le script pour la première fois, il vous demandera des autorisations car il enregistre les fichiers sur votre lecteur.Une fois que vous avez accordé des autorisations pour la première fois, Apps Script s'arrête et son exécution ne se termine pas.Vous devez donc l'exécuter à nouveau.Le script ne demandera plus d'autorisations après la première fois.

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

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

Téléchargement de fichiers avec le service HTML

REMARQUES sur le service d'interface utilisateur obsolète :

Il existe une différence entre le service UI et l'interface utilisateur getUi() méthode de la classe Spreadsheet (ou autre classe) Le service d'interface utilisateur Apps Script est obsolète depuis le 1er décembre.11, 2014.Il continuera à fonctionner pendant un certain temps, mais nous vous encourageons à utiliser le service HTML.

Documentation Google - Service d'interface utilisateur

Même si le service d'interface utilisateur est obsolète, il y a un getUi() méthode de la classe de feuille de calcul à ajouter menus personnalisés, lequel est PAS obsolète :

Classe de feuille de calcul – Obtenir la méthode de l'interface utilisateur

Je mentionne cela car cela pourrait prêter à confusion car ils utilisent tous les deux la terminologie Interface utilisateur.

La méthode UI renvoie un Ui type de retour.

Vous pouvez ajouter du HTML à un service d'interface utilisateur, mais vous ne pouvez pas utiliser de <button>, <input> ou <script> balise dans le HTML avec le service UI.

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

Fichier partagé - Formulaire de contact

Autres conseils

En octobre 2016, Google a ajouté un type de question de téléchargement de fichier dans les formulaires Google Native, aucun script Google Apps requis. Voir la documentation .

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top