!
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.
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
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:
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 :)
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.
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.
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?
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.
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.
Grazie a te per il feedback Antonio :)
Dear Michelle
I can't seems to get the code to upload my files.
Please help.
Regards
Henrico
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.
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
Ciao Matt,
grazie del feedback.
Sostituisci l'ultima istruzione con la seguente riga di codice:
In pratica, con il metodo .getUrl() ottieni il link diretto al file su Drive :)
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.
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.
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.
Grazie del feedback Giovanni, mi fa piacere che hai risolto :)
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!
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.
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!
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.
Ciao Michele,
innanzitutto volevo farti i complimenti per il libro... mi sta offrendo tantissimi spunti utili sul lavoro.
Probabilmente a causa si un mio errore, mi permette l'upload del file, ma purtroppo il pdf è completamente bianco (ho provato con altri file e sono tutti senza contenuto).
Grazie in anticipo
Ciao Mario,
ho effettuato alcune prove e non ho rilevato alcuna incongruenza, i file vengono caricati correttamente. È possibile che sia stato un problema momentaneo dei server di Google, in passato ci sono state situazioni anomale simili che poi sono state fixate. Fammi sapere se continui ad avere lo stesso problema. Grazie!
Ciao Michele,
complimenti per il tuo libro che mi ha veramente aiutato ad approcciarmi al mondo delle Web App.
Ho seguito anche il tuo esempio riguardo a questo codice per caricare un file sul Drive con successo.
Vorrei però fare un passo successivo rendendo dinamica la scelta del Drive (indicando quale è l'ID del drive e anche del contentType.
Piu' in specifico mi piacerebbe sapere se con il form ''file'' posso passare alla funzione gs altri parametri oltre all'oggetto file senza doverli dichiarare necessariamente all'interno della funzione upload().
Ti ringrazio in anticipo e rinnovo i complimenti.
Ciao Daniele,
grazie 1000 per i complimenti e per il feedback! :)
Relativamente alla tua domanda, essendo il campo di input file un oggetto HTML indipendente da Google Apps Script, per capire se quello che può essere passato è ciò che ti serve, spero di fare cosa gradita lasciandoti il link alla documentazione ufficiale su MDN Web Docs dove puoi trovare quali sono le informazioni che è possibile inviare/ottenere tramite questo campo: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file