JavaScript, HTML, CSS e... !
8 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

8 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 :)

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