file upload - subir - Ejemplo completo de carga de archivos de Google Forms

subir archivos javascript

Question

¿Cómo permito que mis lectores usen 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 al código HTML de Google Form de ejemplo. ¿Cómo utilizar Google Apps Script para subir el archivo del espectador a mi cuenta de Google Drive?

Answer 1

A partir de octubre de 2016, Google agregó un tipo de pregunta de carga de archivos en formularios nativos de Google, sin necesidad de Google Apps Script. Ver documentación .

Answer 2

Actualización: 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 usa Formularios de Google. Este es un ejemplo del uso de una aplicación web Apps Script, que es muy diferente de un formulario de Google. Una aplicación web es básicamente un sitio web, pero no puede obtener un nombre de dominio para ello. Esto no es una modificación de un formulario de Google, que no se puede hacer para cargar un archivo.

NOTA : Sí tuve un ejemplo del servicio de IU y el servicio HTML, pero he eliminado el ejemplo del servicio de UI, porque el servicio de UI está en desuso.

NOTA : La única configuración de sandbox disponible ahora es IFRAME . Si desea utilizar un atributo onsubmit en la etiqueta de <form onsubmit="myFunctionName()"> : <form onsubmit="myFunctionName()"> , puede hacer que el formulario desaparezca de la pantalla después del envío del formulario.

Si usaba el modo NATIVO, es posible que su aplicación web de carga de archivos ya no funcione. Con el modo NATIVO, un envío de formulario no invocaría el comportamiento predeterminado de la página que desaparecía de la pantalla. Si estaba usando el modo NATIVO y su formulario de carga de archivos ya no está funcionando, entonces puede estar usando un botón de tipo "enviar". Supongo que también puede estar 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, tendrá que configurar la configuración y el código de cierta manera.

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

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

Google Apps Script

Hay varias maneras de terminar en el editor de código de Google Apps Script.

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

Menciono esto porque si no conoces todas las posibilidades, podría ser 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 del script de aplicaciones

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

Servicio HTML: crea una aplicación web usando HTML, CSS y Javascript

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

• Guión
• HTML

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

• Copie y pegue el siguiente código
• Guardarlo
• Crea la primera versión nombrada
• Publícalo

• Establecer los permisos

  y puedes comenzar a usarlo.

Comienza por:

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

Suba un archivo con el servicio HTML:

Archivo Code.gs (Creado de manera predeterminada)

//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 completo de trabajo. Solo tiene dos botones y un elemento <div> , por lo que no verá mucho en la pantalla. Si el script .gs tiene éxito, se devuelve true y se onSuccess una función onSuccess . La función onSuccess (updateOutput) inyecta HTML interno en el elemento div con el mensaje "¡El archivo se ha cargado!"

• Guarde el archivo, asigne un nombre al proyecto
• Usando el menú: File , Manage Version luego Guardar la primera Versión
• Publish , Deploy As Web App luego actualizar

Cuando ejecuta el script la primera vez, le pedirá permiso porque está guardando archivos en su disco. Después de otorgar los permisos por primera vez, la secuencia de comandos de aplicaciones se detiene y no se completará la ejecución. Entonces, necesitas ejecutarlo nuevamente. El script no pedirá permisos nuevamente después de la primera vez.

El archivo de Apps Script se mostrará en tu Google Drive. En Google Drive puede establecer permisos para quién puede acceder y usar el script. El script se ejecuta simplemente proporcionando el enlace al usuario. Use el enlace del mismo modo que cargaría una página web.

Otro ejemplo del uso del servicio HTML se puede ver en este enlace aquí en :

Carga de archivos con servicio HTML

NOTAS sobre el servicio de UI obsoleto:

Existe una diferencia entre el Servicio de UI y el getUi() Ui getUi() de la Clase de hoja de cálculo (u otra clase). El Servicio de UI de Apps Script quedó obsoleto el 11 de diciembre de 2014. Continuará funcionando durante un período de tiempo, pero se le recomienda usar el servicio HTML.

Documentación de Google - Servicio de UI

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

Clase de hoja de cálculo: obtenga el método de IU

Menciono esto porque podría ser confuso porque ambos usan la interfaz de usuario terminológica.

El método UI devuelve un tipo de retorno Ui .

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

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

Archivo compartido - Formulario de contacto