JavaScript, HTML, CSS e... !
20 commenti

Caricare file su Google Drive con una Web App

Creare un Uploader per caricare File su Google Drive

Con un'interfaccia web minimale creata con Google Apps Script ed un solo metodo è possibile realizzare un caricatore di file dal proprio computer ad una cartella di Google Drive che abbiamo definito.

Il metodo in questione è getAs(contentType), appartenente alla Classe Blob ovvero un oggetto di scambio di dati per i servizi Apps Script, il quale restituisce i dati convertiti nel tipo di contenuto specificato all'interno di questo oggetto. Il metodo inoltre aggiunge l'estensione appropriata al nome del file sostituendola a quella esistente (del file processato).
In base alle proprie esigenze possono essere utilizzati i seguenti contentType: application/pdf, image/bmp, image/gif, image/jpeg e image/png.

La realizzazione dell'uploader prevede un file di script (main.gs) ed uno HTML (index.html).
Di seguito i relativi codici:

File main.gs:

function doGet() {
  return HtmlService.createHtmlOutputFromFile('index.html');
}

function upload(e) {
  var destination_id = '1Wf-FK7w0Bsbb9qIDx...'; // L'id della cartella di destinazione
  
  // In base alle proprie esigenze possono essere utilizzati i seguenti contentType:
  // application/pdf, image/bmp, image/gif, image/jpeg e image/png.

  var contentType = 'image/jpeg';
  var img = e.imageFile;
  
  var destination = DriveApp.getFolderById(destination_id);
  var img = img.getAs(contentType);
  destination.createFile(img);
}

File index.html:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <form>
      <input type="file" name="imageFile">
      <input type="button" value="ok" onclick="google.script.run.upload(this.parentNode)">
    </form>
  </body>
</html>

Basterà quindi distribuire lo script come applicazione web ed eseguirlo la prima volta per autorizzare l'ambito OAuth richiesto, ossia https://www.googleapis.com/auth/drive per visualizzare, modificare, creare ed eliminare i file di Google Drive. 

Tags

Michele Pisani

Michele Pisani

Sviluppatore Javascript ed esperto in Digital Analytics

L'esperienza nel settore Digital Analytics unita ad anni di sviluppo in Javascript ha trovato la massima espressione in Google Apps Script che mi ha permesso, con estrema facilità e poche righe di codice, di realizzare potenti applicazioni interattive e processi automatizzati integrati con i prodotti della G Suite.

Come contattarmi
scrivi un commento

20 Commenti

  1. martedì 9 aprile 2019 alle ore 11.04 Andrea

    Ciao Michele lo script funziona con file di tipo immagine ma non ho capito come si deve modificare per fare upload di diversi tipi di file (es. pdf e/o altre estensioni come xlsx, ecc.)
    Spero che leggendo il tuo libro potrò migliorare le mie competenze ed evitare banali domande come questa !
    Grazie
    Ciao

    Rispondi a questo commento
    • martedì 9 aprile 2019 alle ore 21.03 Michele PisaniAutore

      Ciao Andrea,
      nel caso specifico per effettuare l'upload di un file in formato pdf è sufficiente modificare il valore della variabile contentType con quello opportuno:

      var contentType = 'application/pdf';

      Il codice proposto nel tutorial può essere migliorato, ad esempio rendendo alcune parti dinamiche come appunto questa del contentType.

      Sono certo che con la lettura del libro, unita a pratica e passione, otterrai dei risultati sorprendenti :)

      Rispondi a questo commento
  2. martedì 16 aprile 2019 alle ore 11.35 Amedeo

    Ovviamente non può essere utilizzato da chiunque .... ma solo dal proprietario dello spazio web...
    Se così fosse si potrebbe invece rendere pubblica una cartella in scrittura (no visualizzazione), per un uploader che possa far caricare soltanto dei file?
    Ho comprato il tuo libro molto interessante.

    Rispondi a questo commento
    • martedì 16 aprile 2019 alle ore 21.52 Michele PisaniAutore

      Ciao Amedeo,
      grazie per aver acquistato il libro :) spero che troverai al suo interno spunti interessanti.

      Relativamente al tuo quesito, se rendi pubblica la cartella di destinazione e distribuisci lo script in modo che possa essere accessibile da chiunque (ad esempio compresi utenti anonimi) anche altri utenti (compresi nel caso specifico chi non ha necessariamente effettuato l'accesso al proprio account Google) possono caricare file nella cartella indicata tramite l'uploader.

      Rispondi a questo commento
  3. domenica 3 maggio 2020 alle ore 18.57 Antonio

    Non so se sbaglio io qualcosa ma mi pare che ora (maggio 2020) lo script funzioni correttamente solo con file immagini o txt ma non con pdf neanche cambiando il contentType.
    Puoi aiutarmi?

    Rispondi a questo commento
    • domenica 3 maggio 2020 alle ore 22.24 Michele PisaniAutore

      Ciao Antonio,
      ho appena provato a caricare un file pdf modificando il codice nella sola parte del contentType, ovvero var contentType = 'application/pdf'; e ti confermo che il caricamento è avvenuto con successo.

      Casi di non funzionamento possono verificarsi con file di grandi dimensioni (ad esempio intorno ai 50 MB) oppure con file corrotti o in formati non riconosciuti.
      Il consiglio che posso darti è quello di provare a caricare un pdf diverso per capire se il problema persiste, in caso negativo indagare quale incongruenza può essere generata dal tuo file di interesse, in caso positivo rivedere il tuo codice.

      Rispondi a questo commento
      • lunedì 4 maggio 2020 alle ore 22.37 Antonio

        Hai ragione. Il problema era sui file di prova utilizzati. Ti ringrazio per la pronta risposta e per il codice, semplice, ma molto utile, come è stato il tuo manuale.

      • martedì 5 maggio 2020 alle ore 07.21 Michele PisaniAutore

        Grazie a te per il feedback Antonio :)

  4. lunedì 27 luglio 2020 alle ore 21.32 Henrico

    Dear Michelle

    I can't seems to get the code to upload my files.
    Please help.

    Regards

    Henrico

    Rispondi a questo commento
    • lunedì 27 luglio 2020 alle ore 23.58 Michele PisaniAutore

      Hi Enrico,
      what problem do you have with the code? What you see in the article is the whole code, just replace the value of the destination_id variable with the id of the folder of your Drive where you want to upload the files. Let me know.

      Rispondi a questo commento
  5. mercoledì 9 settembre 2020 alle ore 16.46 Matt

    Caro Michele, grazie davvero per questo tutorial. Mi ha aiutato tantissimo.
    Mi chiedevo... Se poi volevo produrre il URL del file appena caricato, ci sono metodi che mi permetterebbero di farlo?
    Grazie ancora!

    Matt

    Rispondi a questo commento
    • mercoledì 9 settembre 2020 alle ore 22.04 Michele PisaniAutore

      Ciao Matt,
      grazie del feedback.
      Sostituisci l'ultima istruzione con la seguente riga di codice:

      var drive_url = destination.createFile(img).getUrl();


      In pratica, con il metodo .getUrl() ottieni il link diretto al file su Drive :)

      Rispondi a questo commento
  6. venerdì 16 ottobre 2020 alle ore 20.48 Giovanni

    Salve,
    ho creato i due file e li ho messi nella stessa cartella Drive ma ottengo il seguente messaggio: Exception: Impossibile trovare un file HTML denominato index. (riga 2, file "main") e questo sia che esegua le funzioni una ad una, sia che debugghi...sia se faccio il deploy come applicazione web.
    Dove sto sbagliando?

    Saluti.

    Rispondi a questo commento
    • venerdì 16 ottobre 2020 alle ore 21.59 Michele PisaniAutore

      Ciao Giovanni,
      non devi creare due file distinti, si tratta di un progetto Apps Script con all'interno quei due file, uno gs e uno html. Per questo motivo ricevi quell'errore.

      Rispondi a questo commento
      • sabato 17 ottobre 2020 alle ore 11.54 Giovanni

        Grazie.
        Funziona. Ora devo capire come integrare questa funzione con Gsites e redirigere i file acquisiti tramite una selezione (potrei farlo con un form) in diversi folder.
        Ti aggiorno.

      • sabato 17 ottobre 2020 alle ore 13.40 Michele PisaniAutore

        Grazie del feedback Giovanni, mi fa piacere che hai risolto :)

  7. venerdì 30 ottobre 2020 alle ore 13.08 Andrea

    Ciao Michele,
    ho appena acquistato il tuo libro che mi sta dando grandi spunti, tra cui quello di creare via script un form google (esattamente ciò che cercavo...). A questo proposito, avrei necessità di creare anche il campo "carica file", ma mi pare che non vi sia un metodo nella classe "form" di Google apps script. Mi puoi aiutare? Grazie!

    Rispondi a questo commento
    • venerdì 30 ottobre 2020 alle ore 19.38 Michele PisaniAutore

      Ciao Andrea, grazie dell'acquisto e del feedback :)

      Relativamente alla tua domanda purtroppo, posso solo confermare che ad oggi non esiste un metodo per creare quel tipo di campo da codice.
      L'alternativa è svincolarsi dai Google Form e crearne uno HTML da distribuire come Web app, sempre con Apps Script, al quale puoi applicare l'esempio che trovi nell'articolo della pagina corrente per effettuare l'upload di file in Google Drive.

      Nel libro trovi un esempio completo per creare un form personalizzato. Si perdono i vantaggi offerti dall'interfaccia di Google Form, che consente di creare le domande in modo rapido, allo stesso tempo ti lasci alle spalle anche tutti i suoi limiti poiché puoi costruire tutte le funzioni e comportamenti che desideri e dialogare con i file di script per le elaborazioni server side.

      Rispondi a questo commento
      • lunedì 2 novembre 2020 alle ore 10.49 Andrea

        Grazie mille a te per la risposta. In questa fase (essendo alle prime armi) cerco di capire se posso essere già in grado di creare una web app HTML che mi permetta di lasciare Google. Nel frattempo cerco di "piegare" gli strumenti alle mie esigenze. Forse sto trovando la strada, casomai la posto qui appena ho qualcosa di più concreto!

      • lunedì 2 novembre 2020 alle ore 13.58 Michele PisaniAutore

        Grazie Andrea del feedback,
        a scanso di equivoci, la Web app è da realizzarsi con Google Apps Script all'interno del suo editor, mantenendo pertanto tutti i vantaggi di dialogare in modo integrato con gli strumenti Google.

Scrivi un commento

Il tuo indirizzo email non sarà pubblicato.I campi contrassegnati da un * sono obbligatori
Puoi utilizzare i seguenti tag nei commenti:
[bold]testo[/bold] se vuoi evidenziare un testo con il grassetto[code]function helloworld() { }[/code] se vuoi pubblicare una porzione di codice[url]https://www.appsscript.it[/url] se devi riferirti ad un indirizzo web