Come fare a..‎ > ‎

Google Drive, moduli per l'upload, o il download di file

di Maria Silvana Radice

Form for upload or download files in Google Drive









Modulo per l'upload di file

Creare un form per l'upload di file in Google Drive, usando uno script



Davvero in tanti mi hanno chiesto se esistesse il modo di creare un form per permettere agli utenti di inviare dei file.
I moduli classici di Google Drive non prevedono questa funzione e non e` facile trovare una soluzione adeguata. Io stessa ho faticato a trovarla e ho dovuto verificare diverse proposte di vari sviluppatori prima di giungere a quella giusta e perfettamente funzionante.
Come sempre ho applicato le mie piccole correzioni personali, ma se volete visitare la pagina dello sviluppatore del codice, potete trovarla qui: Fonte

Il metodo si basa su uno script creato con "Google Apps scripts" ed è un po'  laborioso, ma non difficile. Seguitemi bene....


AVVERTENZA: per ottenere la copia dello script, dovete avere un account Google aperto e attivo.
Il modulo utilizza Javascript, quindi chi ha disabilitato javascript nel suo browser non potrà visualizzarlo. Il consiglio e` quello di mettere un avviso per gli utenti in questo senso.







Il risultato che otterrete sara` simile a questo....




Per ottenerlo, dovete creare una copia dello script, cliccando sul seguente link:

https://script.google.com/d/1VBS5Y9CoeH4ET43xvttp30P-_w6mraBo8onXowWQ72lSGP9cloPszPXK/edit?newcopy=true

La copia, una volta creata, verra` allegata in automatico ai vostri file di Google Drive. Se credete, potete gia` rinominarla.

Ripeto: per ottenere il file, dovete avere un account Google attivo e aperto.

Fatto questo, create una nuova cartella in Google Drive e metteteci il file ottenuto. Nella stessa cartella, poi, create un foglio di lavoro (spreadsheet) e una cartella per archiviare i file arrivati. Per la condivisione leggete: Google Drive - come condividere i contenuti.

I dati inviati dagli utenti ,tramite il modulo, verranno inseriti e posizionati in automatico nel foglio di lavoro.

NOTA: Per la corretta visualizzazione della data, controllate le impostazioni andando in file->impostazioni foglio di lavoro.
Potete anche decidere il formato della data e se volete visualizzare anche l'ora di invio. Per fare questo, evidenziate tutta la prima colonna e poi cliccate su "123" nella barra degli strumenti. Mettete la spunta sull'opzione che desiderate, oppure cliccate su "Altri formati" per impostazioni più avanzate.





Bene, proseguiamo....
Aprite il file con lo script, cliccandoci sopra 2 volte. Se non l'avete già, vi verrà chiesto di creare la connessione con l'applicazione per la gestione degli script Google Apps. Fatelo.

Il modulo e` composto da tre codici:


In tutti i file ci sono parametri modificabili.


Cominciamo con il file Code.gs
....e con questa parte di codice:

// Set the spreadsheet key here.
var submissionSSId = 'XXXXXXXXXXXX';
// Set the folder key here.
var folderId = "XXXXXXXXXXXX";

Al posto delle X segnate in rosso, dovete inserire l'ID del foglio di lavoro (submissionSSId) e della cartella (folderId).

L'ID del foglio di lavoro si ottiene cliccando sul file corrispettivo e poi su "Ottieni link". Oppure dall'indirizzo che appare nel browser dopo aver aperto il foglio. L'ID e` simile a quello che vedete in rosso qui sotto:

Es: https://drive.google.com/open?id=8fTiIRBYl2mNXTONSUraf__xULb9TNkPa4HgCDZVynoU

L'ID della cartella si ottiene allo stesso modo.

Es: https://drive.google.com/open?id=0P7s_2yPmBgKuRxRnNIE7SSA1d80

Sempre nel file js, in questa parte di codice....

  var template = HtmlService.createTemplateFromFile('Form.html');
  template.action = ScriptApp.getService().getUrl();
  return template.evaluate().setTitle('La chiave nel pozzo');

....al posto di "La chiave nel pozzo", mettete il titolo che apparira` nel browser se farete aprire il modulo in una scheda sua, anziche` incorporarlo nella pagina del vostro sito.


Il secondo file e` il file Form.html.
Questi i parametri da modificare....

   function fileUploaded(status) {
    var newHTML = '<div class="form-success">Il tuo file e` stato inviato!</div>';
    document.getElementById('form-div').innerHTML = newHTML;
    }
 
</script>

<!--Form Header text-->
<div id="container">

  <div>
  <h1>La chiave nel pozzo</h1>
  <h2>Modulo invio</h2>
  </div>

  <div id="form-div">
  <form>

    <label>Nome</label>
    <input name="name" type="text"/>

    <label>Email</label>
    <input name="email" type="text"/>
 
    <label>Descrizione</label>    
    <input name="assignmentName" type="text"/></td>
     
    <hr>
    <p>Il file non deve superare i 10 MB.</p>
    <hr>
 
    <p>Carica il tuo file:</p>
    <input class="upload" name="Assignment" rules="required" type="file" />

Le voci in rosso, corrispondono al testo che apparira` nel modulo e che l'utente leggera`.
Personalizzatelo secondo le vostre esigenze.
Se non volete il titolo, cancellate tutto il div che lo contiene.
Se volete cancellare delle voci, potete farlo, togliendo tutta la parte relativa..

Es:
<label>Email</label>
<input name="email" type="text"/>

Nel foglio di lavoro, i dati mancanti risulteranno come "non definiti". Se avete un po' di esperienza di javascript, potete anche cancellare, nel codice js, l'input di invio al foglio di lavoro delle voci eliminate dal form e/o aggiungerne di diverse.

La scritta "Il file non deve superare i 10 MB" non e` obbligatoria e non e` una limitazione dello script. Potete non metterla e scrivere tutt'altro. E` solo uno spazio per eventuali indicazioni. Ferme restando le limitazioni di Google Drive stesso (https://support.google.com/drive/answer/37603?hl=it.)


Arriviamo all'ultimo file: Stylesheet.html.
Questo e` il file che permette di personalizzare la grafica. Facendo un po' di prove, potrete realizzare un form con i colori che preferite.
L'unica indicazione che vi do, riguarda lo sfondo della pagina. Nel codice originale c'e` unicamente la possibilita` di cambiarne il colore. Per mie esigenze personali, ho aggiunto una parte di codice per mettere un'immagine di sfondo....

  body {
    font-family: 'Raleway', sans-serif;
    color: #384047;
    padding: 40px 0 60px;

    background-image: url('URLimmagine');
    background-repeat: no-repeat;
    background-position: center;

La parte in verde e` quella da aggiungere se anche voi volete mettere un'immagine come sfondo.
Naturalmente, al posto di URLimmagine, metterete l'indirizzo della vostra immagine.

Le notifiche:

Nel codice.gs, in fondo, potete impostare le notifiche, sia per voi, che per gli utenti.

Questa e` la parte che comanda l'invio di una notifica a voi stessi, ogni volta che un utente inviera` un file tramite il modulo:

  //var message = "<div> Un utente ha inviato un file. Lo puoi vedere qui:<br><br>https://docs.google.com/spreadsheets/d/XXXXXXXXXXXXXXXXXXXX </div>";
  //MailApp.sendEmail({ to: 'tuaemail', subject: "Oggetto email", htmlBody: message});

Le parti da modificare sono quelle in rosso.
Prima di tutto, per attivare il codice, dovete cancellare il doppio slash iniziale da entrambe le linee di codice.
La prima parte di testo corrisponde al messaggio che riceverete.
Al posto di XXXXXXXXXXXX dovete mettere l'ID del foglio di lavoro, in modo da poterlo raggiungere e visualizzare direttamente dalla email.
Al posto di tuaemail, dovete mettere l'indirizzo email a cui volete ricevere le notifiche.
Al posto di Oggetto email dovete mettere l'oggetto della email.

Questa e` la parte che comanda l'invio di una notifica all'utente ogni volta che invia un file tramite il modulo:

  //var message = "<div> Ciao " + name + ", <br> Grazie per il file che mi hai inviato.<br><br>A presto, Firma <br>indirizzo email, o URL sito web </div>";
  //MailApp.sendEmail({ to: email, subject: "Oggetto email", htmlBody: message});

Come prima, per attivare il codice, dovete togliere il doppio slash iniziale.
Tutto il resto e` testo della email.
Il tag <br> serve ad andare a capo, se e` doppio crea un ulterione spazio di separazione tra le righe di testo.
Cambiate solo le parti in rosso. La voce +name+  non deve essere toccata, perche` verra` sostituita, in automatico, con il nome delll'utente che inviera` il modulo.
Al posto di Firma, potete mettere il vostro nome, come firma.
Al posto di indirizzo email, o URL sito web, potete mettere la vostra email per essere contattati., oppure l'ndirizzo del vostro sito web.
Tutti i campi in rosso, comunque, possono essere cambiati, o cancellati, secondo le vostre esigenze.

Pubblicare il modulo:

Una volta terminato di sistemare tutte le impostazioni come desiderato, cliccate su Pubblica->Distribuisci come applicazione web....




....poi salvate la versione e, alla voce "Chi accede all'applicazione" mettete l'impostazione "Chiunque, inclusi utenti anonimi".




Cliccate su "Implementa" e date l'OK a tutti i permessi che vi verranno richiesti.

Adesso, in alto a sx, cliccate su File->Salva tutto....




....e poi su "Condividi", in alto a dx, per impostare la condivisione del file su "Pubblica sul web", oppure "Chiunque abbia il link".

Ora, cliccate sul file che contiene lo script e su "Apri".
Si aprirà, nuovamente, la schermata con il codice dello script. Cliccate, nuovamente su Pubblica->Distribuisci come applicazione web e copiate l'indirizzo URL che vi verrà fornito e che utilizzerete per creare il link al modulo stesso....




Il lavoro su Drive è finito.

Promemoria:

IMPORTANTE!!
Se, successivamente, effettuerete altre modifiche nello script, vi dovrete ricordare di aggiornare l'applicazione per la nuova versione, altrimenti il link per l'incorporamento riporterà sempre alla versione precedente del modulo, anche se avete salvato i cambiamenti e anche se l'anteprima di prova vi mostra il modulo con i cambiamenti effettuati.




Come caricare il form in Google sites:

Questo modulo e` molto bello anche aperto all'esterno del sito, in una finestra tutta sua, soprattutto se aggiungete un'immagine di sfondo che richiama la grafica del vostro sito, ma, su Google sites, puo` essere caricato direttamente in una pagina del sito.

Dopo aver copiato il link di incorporamento (vedi sopra), accedete alla pagina di Google sites in cui volete mettere il form.
Aprite l'editor e cliccate su Inserisci->Apps script.
Nella finestra che si aprirà, dovete incollare, il link che avete copiato, nello spazio apposito in basso....




....poi, cliccate su "Seleziona".
Nella finestra successiva, scegliete le opzioni che preferite e impostate le dimensioni del gadget.
Ecco fatto :-))

Come visualizzare nel sito i file ricevuti:

Se volete pubblicare l'anteprima dei file ricevuti, leggete: Google Drive, galleria di immagini da cartella

Come caricare lo script in Drive manualmente:

Se doveste trovare difficolta` nella copia automatica del file, potete scaricare il file.txt, con tutti i codici, cliccando qui. (in allegato anche a fondo pagina)
 
Ci sono due strade per caricare lo script:
Potete caricare i codici direttamente dal vostro sito Google, seguendo il percorso: menu`->gestisci sito->Script Google Apps.
Oppure, li potete caricare in Google Drive. Per fare questo, accedete al vostro account in Google Drive e cliccate su Nuovo -> altro -> Google Apps script. Dopo la creazione dello script, sara` possibile implementarlo nel sito seguendo il percorso "Inserisci -> Apps Script" e selezionandolo.

In entrambi i casi, dovrete incollare i tre codici in tre diversi file a cui darete il nome indicato nel testo scaricato. Vale a dire:
  1. Code.gs
  2. Form.html
  3. Stylesheet.html
Per creare un nuovo file, dovete cliccare su File->nuovo....





....e scegliere dal menu` il tipo di file che vi serve.

Modulo per l'upload di file in Google Drive, con campi obbligatori:


E` possibile rendere obbligatoria la compilazione dei campi del modulo, o solo di alcuni.
Il modulo con la variante per i campi obbligatori e` scaricabile da qui:

https://script.google.com/d/1zroHKhSrqG9fY-us5EHyCegqVLDXccD7vIm_Iq9JzLUZehUZnueZRYIW/edit?newcopy=true

Le modifiche che potete effettuare riguardano solo il codice del file Form.html.
Nello specifico, ecco i campi su cui intervenire:

    <label>Nome</label>
    <input name="name" type="text" required />
    
    <label>Email</label>
    <input name="email" type="email" required />
   
    <label>Descrizione</label>    
    <input name="assignmentName" type="text" required />
     
    <hr>
    <p>Il file non deve superare i 10 MB.</p>
    <hr>
 
    <p>Carica il tuo file:</p>
    <input class="upload" name="Assignment" required type="file"/>
    
    <!--Don't edit below this line-->
    
    <input type="submit" class="button" value="Submit" id='submitter'/>

Il comando "required" rende il campo obbligatorio. Se l'utente non lo riempie, il browser mostrera` un avviso. Se non volete che un campo sia obbligatorio, cancellate, semplicemente, il comando.

Modulo per l'upload di file in Google Drive con menù a tendina:

Ecco una variante del modulo con un campo rappresentato da un menù a tendina....







Per la personalizzazione e l'implementazione valgono le indicazioni gia` date.

Nel Form.html trovate questa nuova sezione:

    <label>Scelta</label>
    <select name="select1" required>
    <option value="" >Seleziona un argomento</option>
    <option value="Scelta1">Scelta1</option>
    <option value="Scelta2">Scelta2</option>
    <option value="Scelta3">Scelta3</option>
    <option value="Scelta4">Scelta4</option>
   </select>

I campi modificabili sono quelli in rosso.
Alla voce "option value" trovate due campi con il testo uguale per ogni scelta, questo perche` il primo titolo e` quello della colonna corrispondente nel foglio di lavoro e il secondo titolo e` quello che compare nel modulo. Non e` necessario che siano uguali anche se e` logico.

Modulo per l'upload di file multipli in Google Drive:

Su richiesta di molti, ho realizzato una variante del modulo sopra descritto, per consentire l'upload contemporaneo di 3 file.
Il form ha questo aspetto:






Offro questa variante come ringraziamento ai sostenitori del sito.




Sostieni il sito! (Grazie di cuore )

Clicca qui

Il reindirizzamento partira` in automatico subito dopo la donazione, di cui riceverai regolare ricevuta da parte di Paypal. Se non dovesse funzionare, per un problema di rete, utilizza il modulo di segnalazione, cliccando sul link sottostante e provvedero`      a farti avere il file  personalmente.
Segnalazione per download non riuscito

Nota: trattandosi di una donazione, potete inviare l'importo che credete. Vorrei solo informarvi che Paypal trattiene delle commissioni sulle transazioni pari al 3.4 % + €0.35 EUR. Se donate pochi centesimi, andranno tutti e solo a Paypal. C'e` stato un utente che ha avuto la grande generosita` di donare 0,20 centesimi. Il risultato e` stato questo:

Importo totale:
€ 0,20 EUR
Importo tassa:
- € 0,20 EUR
Importo netto:
€ 0.00 EUR

Grazie a chi comprende il lavoro che sta dietro a queste pagine. Silvana




Se vi serve aiuto per la corretta configurazione di questi moduli, contattatemi tramite il mio sito professionale "Silvanasites".


Modulo per il download di file

È possibile creare un modulo per il download di file utilizzando i moduli classici di Google. Le indicazioni sono contenute nella guida: Google Drive, come creare un modulo






Aiuta il sito! Condividi questa pagina su:
 Facebook   twitter  Google   Linked  in   

Ti e` stato utile questo argomento?










ċ
form x upload.txt
(6k)
Maria Silvana Radice,
09 ago 2016, 23:25