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

Comment puis-je permettre à mes utilisateurs d'utiliser les formulaires Google pour télécharger des fichiers sur mon formulaire et les enregistrer sur mon lecteur Google?

je cherche un exemple complet: il doit indiquer quel code à ajouter à L'exemple Google Form HTML source. Comment utiliser Googleapps Script pour télécharger le fichier de l'utilisateur vers Mon compte GoogleDrive?

35
demandé sur Mogsdad 2014-01-09 11:05:06

2 réponses

mise à jour: les formulaires Google peuvent maintenant télécharger des fichiers. Cette réponse a été affichée avant que Google Forms ait la capacité de télécharger des fichiers.

cette solution n'utilise pas les formulaires Google. Ceci est un exemple d'utilisation D'une application web Script Apps, qui est très différente d'un formulaire Google. Une application Web est essentiellement un site Web, mais vous ne pouvez pas obtenir un nom de domaine pour elle. Ce n'est pas une modification d'un Formulaire de Google, qui ne peut être fait pour télécharger un fichier.

NOTE : j'ai eu un exemple de à la fois le service D'assurance-chômage et le service HTML, mais j'ai supprimé l'exemple de service D'assurance-chômage, parce que le service D'assurance-chômage est déprécié.

NOTE : le seul réglage du bac à sable disponible est maintenant IFRAME . I vous voulez utiliser un attribut onsubmit dans la balise de début du formulaire: <form onsubmit="myFunctionName()"> , il peut causer la forme de disparaître de l'écran après la soumission du formulaire.

si vous utilisiez le mode natif, il se peut que votre application de téléchargement de fichier ne fonctionne plus. Avec le mode natif, une soumission de formulaire n'invoquerait pas le comportement par défaut de la page disparaissant de l'écran. Si vous utilisiez le mode natif, et que votre formulaire de téléchargement de fichier ne fonctionne plus, alors vous pourriez utiliser un bouton de type "soumettre". Je suppose que vous utilisez peut-être aussi le "google".script.exécutez " L'API côté client pour envoyer des données au serveur. Si vous voulez que la page disparaisse à partir de l'écran après la soumission d'un formulaire, vous pouvez le faire d'une autre manière. Mais il se peut que vous vous en fichiez, ou même que vous préfériez que la page reste à l'écran. Selon ce que vous voulez, vous aurez besoin de configurer les paramètres et le code d'une certaine façon.

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


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

cet exemple affiche un formulaire de téléchargement avec le Service HTML de Googleapps Script.

Ce Que Vous Avez Besoin De

  • Compte Google
  • Google Le lecteur
  • Google Apps Script - également appelé Google Script

Google Apps Script

il y a plusieurs façons de se retrouver dans L'éditeur de code de Script Googleapps.

  • chargez le Script Apps directement à partir de l'adresse web: https://script.google.com
  • ouvrez D'abord une feuille Google, puis ouvrez le Script Apps
  • allez sur votre lecteur Google, puis ouvrez le Script Apps: https://drive.google.com/drive/#my-drive
  • allez sur votre lecteur Google, puis cliquez sur un fichier de projet de Script Apps
  • Open Apps Script from Google Docs
  • etc

je mentionne ceci parce que si vous n'êtes pas conscient de toutes les possibilités, cela pourrait être un peu confus. Google Apps Script peut être intégré dans un site Google, Feuilles, Docs ou formulaires, ou utilisé comme une application autonome.

Apps Script Overview

cet exemple est une application" autonome " avec un Service HTML.

service HTML-créer une application web en utilisant HTML, CSS et Javascript

Google Apps Script n'a que deux types de fichiers à l'intérieur d'un Project :

  • Script
  • HTML

les fichiers 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-coller le code suivant
  • Sauver
  • créer la première Version nommée
  • Publier
  • Jeu de l' Autorisations

    et vous pouvez commencer à l'utiliser.

commencer par:

  • Créer un nouveau Projet Vide dans Apps Script
  • copier-coller dans ce code:

Uploader un fichier HTML de Service:

du 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 a seulement deux boutons et un élément <div> , de sorte que vous ne verrez pas beaucoup sur l'écran. Si le script .gs est réussi, true est retourné, et une fonction onSuccess s'exécute. La fonction onSuccess (updateOutput) injecte du HTML interne dans l'élément div avec le message, "le fichier a été UPLOADED!"

  • Enregistrer le fichier, donnez un nom au projet
  • en utilisant le menu: File , Manage Version puis Enregistrer la première Version
  • Publish , Deploy As Web App puis mettre à jour

lorsque vous lancez le Script la première fois, il vous demandera des permissions car il sauvegarde des fichiers sur votre disque dur. Après que vous accordez des permissions que la première fois, le Script Apps s'arrête, et ne la course complète. Donc, vous devez exécuter de nouveau. Le script ne demandera plus de permissions après la première fois.

le fichier de Script Apps apparaîtra sur votre GoogleDrive. Dans GoogleDrive, vous pouvez définir les permissions pour qui peut accéder au script et l'utiliser. Le script est exécuté en fournissant simplement le lien de l'utilisateur. Utilisez le lien tout comme vous chargeriez une page web.

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

téléchargement de fichiers avec le Service HTML

NOTES au sujet du service d'assurance-chômage déprécié:

il y a une différence entre le service D'UI, et la méthode D'Ui getUi() de la classe de tableur (ou autre classe) le service D'UI de Script Apps a été déprécié le Décembre. 11, 2014. Il continuera de fonctionner pendant un certain temps, mais nous vous encourageons à utiliser le Service HTML.

Google Documents - INTERFACE de Service

même si le service D'assurance-chômage est déprécié, Il ya une getUi() méthode de la classe de tableur pour ajouter menus personnalisés , qui est pas déprécié:

feuille de calcul de Classe - Obtenir de l'INTERFACE utilisateur de la méthode

je mentionne ceci parce qu'il pourrait être déroutant parce qu'ils utilisent tous les deux la terminologie UI .

la méthode D'assurance-chômage renvoie un type de déclaration Ui .

vous pouvez ajouter du HTML à un service D'UI, mais vous ne pouvez pas utiliser une étiquette <button> , <input> ou <script> dans le HTML avec le service D'UI.

voici un lien vers un fichier D'application web de Script D'applications partagées avec un formulaire d'entrée:

Fichier Partagé - Formulaire De Contact

60
répondu Sandy Good 2017-12-28 17:38:19

depuis octobre 2016, Google a ajouté un type de question de téléchargement de fichier dans les formulaires Google natifs, pas de Script Googleapps nécessaire. voir documentation .

2
répondu jarvis 2017-11-18 17:34:45