Ejemplo completo de carga de archivos de Google Forms

Question

¿Cómo permito que mis espectadores utilicen Formularios de Google para cargar algunos archivos en mi formulario y guardarlos en mi Google Drive?

Estoy buscando un ejemplo completo:Debe indicar qué código agregar a la fuente HTML del formulario de Google de ejemplo.¿Cómo utilizar Google Apps Script para cargar el archivo del espectador en mi cuenta de Google Drive?

Answer 1

Actualizar:Google Forms ahora puede cargar archivos.Esta respuesta se publicó antes de que Google Forms tuviera la capacidad de cargar archivos.

Esta solución no utiliza Google Forms.Este es un ejemplo del uso de una aplicación web Apps Script, que es muy diferente a un formulario de Google.Una aplicación web es básicamente un sitio web, pero no se le puede asignar un nombre de dominio.Esta no es una modificación de un formulario de Google, que no se puede hacer para cargar un archivo.

NOTA:Tuve un ejemplo de ambos el servicio UI y el servicio HTML, pero hemos eliminado el ejemplo del servicio UI porque el servicio UI está en desuso.

NOTA:La única configuración de zona de pruebas disponible ahora es IFRAME.quiero usar un onsubmit atributo en la etiqueta del formulario inicial: <form onsubmit="myFunctionName()">, puede hacer que el formulario desaparezca de la pantalla después de enviarlo.

Si estaba utilizando el modo NATIVO, es posible que su aplicación web de carga de archivos ya no funcione.Con el modo NATIVO, el envío de un formulario no invocaría el comportamiento predeterminado de que la página desaparezca de la pantalla.Si estaba usando el modo NATIVO y su formulario de carga de archivos ya no funciona, entonces es posible que esté usando un botón de tipo "enviar".Supongo que es posible que también estés utilizando la API del lado del cliente "google.script.run" para enviar datos al servidor.Si desea que la página desaparezca de la pantalla después de enviar un formulario, puede hacerlo de otra manera.Pero puede que no le importe, o incluso prefiera que la página permanezca en la pantalla.Dependiendo de lo que desee, deberá configurar los ajustes y codificar de cierta manera.

Si está utilizando un botón de tipo "enviar" y desea continuar usándolo, puede intentar agregar event.preventDefault(); a su código en la función de controlador de eventos de envío.O necesitarás usar el google.script.run API del lado del cliente.

---

Se puede crear un formulario personalizado para cargar archivos desde la unidad de la computadora de un usuario a su Google Drive con el servicio HTML de Apps Script.Este ejemplo requiere escribir un programa, pero aquí proporciono todo el código básico.

Este ejemplo muestra un formulario de carga con el servicio HTML de Google Apps Script.

Que necesitas

• Cuenta Google
• Google Drive
• Google Apps Script, también llamado Google Script

Secuencia de comandos de aplicaciones de Google

Hay varias formas de llegar al editor de código de Google Apps Script.

• Cargue Apps Script directamente desde la dirección web: https://script.google.com
• Primero abra una hoja de Google y luego abra Apps Script
• Vaya a su Google Drive, luego abra Apps Script: https://drive.google.com/drive/#my-drive
• Vaya a su Google Drive, luego haga clic en un archivo de proyecto de Apps Script
• Abrir secuencias de comandos de aplicaciones desde Google Docs
• etc.

Menciono esto porque si no conoces todas las posibilidades, puede resultar un poco confuso.Google Apps Script puede integrarse en un sitio, Hojas de cálculo, Documentos o Formularios de Google, o utilizarse como una aplicación independiente.

Descripción general de secuencias de comandos de aplicaciones

Este ejemplo es una aplicación "independiente" con servicio HTML.

Servicio HTML: cree una aplicación web utilizando HTML, CSS y Javascript

Google Apps Script solo tiene dos tipos de archivos dentro de un Project:

• Guion
• HTML

Los archivos de script tienen una .gs extensión.El .gs code es un código del lado del servidor escrito en JavaScript y una combinación de la propia API de Google.

• Copia y pega el siguiente código
• Guárdalo
• Crear la primera versión con nombre
• Publícalo

• Establecer los permisos

  y puedes empezar a usarlo.

Comienza por:

• Cree un nuevo proyecto en blanco en Apps Script
• Copie y pegue este código:

Cargue un archivo con el servicio HTML:

Código.gs archivo (creado por defecto)

//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 archivo 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>

Este es un ejemplo de trabajo completo.Solo tiene dos botones y uno <div> elemento, por lo que no verá mucho en la pantalla.Si el .gs script tiene éxito, se devuelve verdadero y se onSuccess se ejecuta la función.La función onSuccess (updateOutput) inyecta HTML interno en el div elemento con el mensaje "¡El archivo fue CARGADO!"

• Guarda el archivo, dale un nombre al proyecto.
• Usando el menú: File, Manage Version luego guarde la primera versión
• Publish, Deploy As Web App luego actualizar

Cuando ejecute el script por primera vez, le solicitará permisos porque está guardando archivos en su disco.Después de otorgar permisos por primera vez, Apps Script se detiene y no completará su ejecución.Entonces, debes ejecutarlo nuevamente.El script no volverá a solicitar permisos después de la primera vez.

El archivo de Apps Script aparecerá en su Google Drive.En Google Drive puedes establecer permisos sobre quién puede acceder y utilizar el script.El script se ejecuta simplemente proporcionando el enlace al usuario.Utilice el enlace tal como lo haría con una página web.

Se puede ver otro ejemplo del uso del servicio HTML en este enlace aquí en StackOverflow:

Carga de archivos con servicio HTML

NOTAS sobre el servicio UI obsoleto:

Hay una diferencia entre el Servicio UI y la UI getUi() método de la clase de hoja de cálculo (u otra clase) El servicio de interfaz de usuario de Apps Script quedó obsoleto el 1 de diciembre.11, 2014.Seguirá funcionando durante algún tiempo, pero le recomendamos que utilice el servicio HTML.

Documentación de Google: servicio de interfaz de usuario

Aunque el servicio UI es en desuso, hay un getUi() método de la clase de hoja de cálculo para agregar menús personalizados, cual es NO obsoleto:

Clase de hoja de cálculo: obtener método de interfaz de usuario

Menciono esto porque podría resultar confuso porque ambos usan la terminología interfaz de usuario.

El método UI devuelve un Ui tipo de devolución.

Puede agregar HTML a un servicio UI, pero no puede usar un <button>, <input> o <script> etiqueta en el HTML con el servicio UI.

Aquí hay un enlace a un archivo de aplicación web de Apps Script compartido con un formulario de entrada:

Archivo compartido - Formulario de contacto

Answer 2

A partir de octubre de 2016, Google ha agregado un tipo de pregunta de carga de archivos en los formularios de Google nativos, no se necesita un script de Google Apps. Ver documentación .