Esempio completo di caricamento di file di Google Forms

Question

Come posso consentire ai miei spettatori di utilizzare Moduli Google per caricare alcuni file nel mio modulo e salvarli sul mio Google Drive?

Sto cercando un esempio completo:Deve indicare quale codice aggiungere all'esempio HTML del modulo Google.Come utilizzare Google Apps Script per caricare il file del visualizzatore sul mio account Google Drive?

Answer 1

Aggiornamento:Ora i moduli Google possono caricare file.Questa risposta è stata pubblicata prima che Google Forms avesse la capacità di caricare file.

Questa soluzione non utilizza Moduli Google.Questo è un esempio dell'utilizzo di un'app Web Apps Script, che è molto diversa da un modulo Google.Un'app Web è fondamentalmente un sito Web, ma non è possibile ottenerne un nome di dominio.Questa non è una modifica di un modulo Google, che non può essere eseguita per caricare un file.

NOTA:Ne ho avuto un esempio Entrambi il servizio UI e il servizio HTML, ma è stato rimosso l'esempio del servizio UI perché il servizio UI è deprecato.

NOTA:L'unica impostazione sandbox disponibile è ora IFRAME.Se vuoi usare un onsubmit attributo nel tag del modulo iniziale: <form onsubmit="myFunctionName()">, il modulo potrebbe scomparire dallo schermo dopo l'invio del modulo.

Se stavi utilizzando la modalità NATIVA, l'app Web per il caricamento dei file potrebbe non funzionare più.Con la modalità NATIVA, l'invio di un modulo non invocherebbe il comportamento predefinito della pagina che scompare dallo schermo.Se stavi utilizzando la modalità NATIVA e il modulo di caricamento file non funziona più, potresti utilizzare un pulsante di tipo "invia".Immagino che potresti anche utilizzare l'API lato client "google.script.run" per inviare dati al server.Se desideri che la pagina scompaia dallo schermo dopo l'invio di un modulo, puoi farlo in un altro modo.Ma potrebbe non interessarti, o addirittura preferire che la pagina rimanga sullo schermo.A seconda di ciò che desideri, dovrai configurare le impostazioni e codificare in un certo modo.

Se stai utilizzando un pulsante di tipo "invia" e desideri continuare a utilizzarlo, puoi provare ad aggiungere event.preventDefault(); al codice nella funzione di invio del gestore eventi.Oppure dovrai utilizzare il file google.script.run API lato client.

---

È possibile creare un modulo personalizzato per caricare file dall'unità del computer di un utente sul tuo Google Drive con il servizio HTML Apps Script.Questo esempio richiede la scrittura di un programma, ma qui ho fornito tutto il codice di base.

Questo esempio mostra un modulo di caricamento con il servizio HTML di Google Apps Script.

Quello che ti serve

• Account Google
• Google Drive
• Google Apps Script - chiamato anche Google Script

Scrittura di Google Apps

Esistono vari modi per arrivare all'editor di codice di Google Apps Script.

• Carica Apps Script direttamente dall'indirizzo web: https://script.google.com
• Apri prima un foglio Google, quindi apri Apps Script
• Vai su Google Drive, quindi apri Apps Script: https://drive.google.com/drive/#my-drive
• Vai su Google Drive, quindi fai clic su un file di progetto Apps Script
• Apri Apps Script da Google Documenti
• eccetera

Ne parlo perché se non sei a conoscenza di tutte le possibilità, potresti creare un po' di confusione.Google Apps Script può essere incorporato in un sito, Fogli, Documenti o Moduli Google oppure utilizzato come app autonoma.

Panoramica degli script di Google Apps

Questo esempio è un'app "stand alone" con servizio HTML.

Servizio HTML: crea un'app Web utilizzando HTML, CSS e Javascript

Google Apps Script ha solo due tipi di file all'interno di un file Project:

• Copione
• HTML

I file di script hanno un'estensione .gs estensione.IL .gs code è un codice lato server scritto in JavaScript e una combinazione dell'API di Google.

• Copia e incolla il seguente codice
• Salvarla
• Crea la prima versione con nome
• Pubblicalo

• Imposta le autorizzazioni

  e puoi iniziare a usarlo.

A partire da:

• Crea un nuovo progetto vuoto in Apps Script
• Copia e incolla questo codice:

Carica un file con il servizio HTML:

Codice.gs file (creato per impostazione predefinita)

//For this to work, you need a folder in your Google drive named:
// 'For Web Hosting'
// or change the hard coded folder name to the name of the folder
// you want the file written to

function doGet(e) {
  return HtmlService.createTemplateFromFile('Form')
    .evaluate() // evaluate MUST come before setting the Sandbox mode
    .setTitle('Name To Appear in Browser Tab')
    .setSandboxMode();//Defaults to IFRAME which is now the only mode available
}

function processForm(theForm) {
  var fileBlob = theForm.picToLoad;

  Logger.log("fileBlob Name: " + fileBlob.getName())
  Logger.log("fileBlob type: " + fileBlob.getContentType())
  Logger.log('fileBlob: ' + fileBlob);

  var fldrSssn = DriveApp.getFolderById(Your Folder ID);
    fldrSssn.createFile(fileBlob);

  return true;
}

Crea un file html:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h1 id="main-heading">Main Heading</h1>
    <br/>
    <div id="formDiv">

      <form id="myForm">

        <input name="picToLoad" type="file" /><br/>
        <input type="button" value="Submit" onclick="picUploadJs(this.parentNode)" />

      </form>
    </div>


  <div id="status" style="display: none">
  <!-- div will be filled with innerHTML after form submission. -->
  Uploading. Please wait...
</div>

</body>
<script>

function picUploadJs(frmData) {

  document.getElementById('status').style.display = 'inline';

  google.script.run
    .withSuccessHandler(updateOutput)
    .processForm(frmData)
};
  // Javascript function called by "submit" button handler,
  // to show results.

  function updateOutput() {

    var outputDiv = document.getElementById('status');
    outputDiv.innerHTML = "The File was UPLOADED!";
  }

</script>
</html>

Questo è un esempio completamente funzionante.Ha solo due pulsanti e uno <div> elemento, quindi non vedrai molto sullo schermo.Se la .gs lo script ha esito positivo, viene restituito true e an onSuccess viene eseguita la funzione.La funzione onSuccess (updateOutput) inserisce l'HTML interno nel file div elemento con il messaggio "Il file è stato CARICATO!"

• Salva il file, dai un nome al progetto
• Utilizzando il menù: File, Manage Version quindi salva la prima versione
• Publish, Deploy As Web App quindi Aggiorna

Quando esegui lo script per la prima volta, ti verranno richieste le autorizzazioni perché sta salvando i file sul tuo disco.Dopo aver concesso le autorizzazioni la prima volta, Apps Script si interrompe e non verrà completata l'esecuzione.Quindi, è necessario eseguirlo di nuovo.Lo script non chiederà più le autorizzazioni dopo la prima volta.

Il file Apps Script verrà visualizzato nel tuo Google Drive.In Google Drive puoi impostare le autorizzazioni per chi può accedere e utilizzare lo script.Lo script viene eseguito semplicemente fornendo il collegamento all'utente.Utilizza il collegamento proprio come caricheresti una pagina web.

Un altro esempio di utilizzo del servizio HTML può essere visto a questo link qui su StackOverflow:

Caricamento file con il servizio HTML

NOTE sul servizio UI deprecato:

Esiste una differenza tra il servizio UI e l'interfaccia utente getUi() metodo della classe Spreadsheet (o altra classe) Il servizio interfaccia utente di Apps Script è stato deprecato il 21 dicembre.11, 2014.Continuerà a funzionare per un certo periodo di tempo, ma ti invitiamo a utilizzare il servizio HTML.

Documentazione Google - Servizio interfaccia utente

Anche se il servizio UI È deprecato, c'è un getUi() metodo della classe del foglio di calcolo da aggiungere menù personalizzati, che è NON deprecato:

Classe foglio di calcolo: metodo Ottieni interfaccia utente

Ne parlo perché potrebbe creare confusione perché entrambi usano la terminologia interfaccia utente.

Il metodo dell'interfaccia utente restituisce a Ui tipo di restituzione.

Puoi aggiungere HTML a un servizio dell'interfaccia utente, ma non puoi utilizzare un file <button>, <input> O <script> tag nell'HTML con il servizio UI.

Di seguito è riportato un collegamento a un file condiviso dell'app Web Apps Script con un modulo di input:

File condiviso - Modulo di contatto

Answer 2

A partire da ottobre 2016, Google ha aggiunto un file di upload di file tipo in Moduli di Google nativi, nessun tipo di script di Google Apps. Vedi Documentazione .