Ajouter un upload de documents sur un Google Forms

Il n’est pas possible comme vous le savez d’ajouter un upload de documents. Mais il est possible de contourner le pb. Le principe est d’envoyer un mail qui renvoie sur une page HTML qui effectue l’upload dans une partie de votre Google drive dans un répertoire différent pour chaque personne. Je vous livre mon code.

1 Ajoutez une page qui va faire l’upload dans une partie du drive

  1. Créez un répertoire’ PJ’. Obtenez l’identifiant unique
  2. Dans le répertoire ajoutez une Google Sheets vierge.
  3. Vous cliquer sur le menu ‘Outils’ puis ‘Editeur de scripts’
  4. Vous ajouter une feuille HTML (voir l’exemple de code ci-dessous)
  5. Vous ajouter une feuille de script (voir l’exemple de code ci-dessous)
  6. Vous publiez vos scripts, vous autorisez le script a écrire sur votre drive
  7. Vous recupérez le lien du script
  8. C’est fini pour cette partie

Le code de la page HTML

<!DOCTYPE html>
<html>
<head>

<script src= »https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js »></script>

</head>
<body>

<h1>SUPER EVENT 2016</h1>
<h2>zone de téléchargemet du groupe <span id= »groupeName »></span></h2>
Envoyez nous les documents suivants avant le 1 octobre 2016 :
<ul>
<li>Doc 1)</li>
<li>Doc 2</li>
</ul>
<form id= »myForm »>
<input type= »hidden » id= »myName » name= »myName » placeholder= » »>
<input type= »file » name= »myFile »>
<input type= »submit » value= »Envoyer le fichier »
onclick= »this.value=’Merci de patienter..’;
google.script.run.withSuccessHandler(fileUploaded)
.uploadFiles(this.parentNode);
return false; »>
</form>
<button type= »button » id= »btnNew » style= »display:none; » onclick= »
document.getElementById(‘myForm’).reset();
initForm();
document.getElementById(‘myForm’).style.display = ‘block’; »>Envoyer un autre fichier</button>
<div id= »output »></div>

<script>
function fileUploaded(status) {
document.getElementById(‘btnNew’).style.display = ‘block’;
document.getElementById(‘myForm’).style.display = ‘none’;
document.getElementById(‘output’).innerHTML = status;
}

$(document).ready(function() {
initForm();
});

function initForm(){
google.script.url.getLocation(function(location) {

document.getElementById(‘myName’).value = location.hash;
document.getElementById(‘btnNew’).style.display = ‘none’;
document.getElementById(‘output’).innerHTML = «  »;
document.getElementById(‘groupeName’).innerHTML = location.hash;});

}
</script>

<style>
input { display:block; margin: 20px; }
</style>

</body>
</html>

Code JS

function doGet(e) {

var app = UiApp.createApplication();
// var lbl = app.createTextArea();
// lbl.setWidth(‘100%’);
// lbl.setHeight(‘100%’);
// var txt = e.queryString;
// lbl.setText(txt);
// app.add(lbl);
// return app;
return HtmlService.createHtmlOutputFromFile(‘Form.html’);
}

function uploadFiles(form) {

try {

var DriveFolder = DriveApp.getFolderById(« AAAAAAA0988737373 »); //c’est l’identifiant répertoire PJ

var folder, folders = DriveFolder.getFoldersByName(form.myName);
if (folders.hasNext()) {

folder = folders.next();

} else {

folder = DriveFolder.createFolder(form.myName); //On crée le répertoire s’il n’existe pas

}

var blob = form.myFile;
var file = folder.createFile(blob);
file.setDescription(« Uploaded by  » + form.myName);
return « Fichier bien envoyé »; // + file.getUrl();
}

catch (error) {

return error.toString();

}

}

function getUrlParameter(sParam) {

var sPageURL = decodeURIComponent(ScriptApp.getService().getUrl());
var search = sPageURL.split(‘?’);
var sURLVariables = search[1].split(‘&’),
sParameterName,
i;

Logger.log(search);

for (i = 0; i < sURLVariables.length; i++) {

sParameterName = sURLVariables[i].split(‘=’);

if (sParameterName[0] === sParam) {

return sParameterName[1] === undefined ? true : sParameterName[1];

}

}

};

2. Ajouter un envoi de mail a votre formulaire

  1. Ouvrez la feuille de réponses.
  2. Vous cliquer sur le menu ‘Outils’ puis ‘Editeur de scripts’
  3. Collez les scripts
  4. Ajoutez un trigger de déclenchement à la validation du formulaire qui point vers la fonction ‘onFormSubmit’
  5. Terminé

Exemple de code JS

function onFormSubmit(e) {

var timestamp = e.values[0];
var email = e.values[8]; //L’email se trouve dans ma colonne 9
var name = e.values[1];
var creator = e.values[2];
var url = ‘https://script.google.com/macros/s/AKfycbxylaXjL6ktpN-j_tzhYiWS6Um0KkOxBQ2PG-0XT1g/dev#’+ name

var subject = « Confirmation … »;
var body = ‘Bonjour ‘+ creator
+'<br/>Merci d\’avoir rempli notre formulaire d\’inscription. Envoyez nous les documents suivants avant le 1 octobre 2016 :’
+'<ul>’
+'<li>Doc 1</li>’
+'<li>Doc 2</li>’
+'<li>Doc 3 </li>’
+'</ul>’
+'<br/>’
+'<center><a href= »‘+ url +' »>cliquez ici pour envoyer les fichiers</a></center>’
+'<br/>’;

MailApp.sendEmail({

to: email,
subject: subject,
htmlBody: body,
replyTo: ‘contact@fivefallsmusic.fr’,
bcc:’contact@fivefallsmusic.fr’,
name: ‘contact@fivefallsmusic.fr’});

}

Posted on 30 septembre 2016 in Technique

Share the Story

Leave a reply

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Back to Top