Javascript, HTML, CSS e... !
4 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

4 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

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