Importador de Imágenes en Google Sheets con Google Apps Script

Introducción

Hoy vamos a hacer algo súper interesante: un importador de imágenes en Google Sheets. La idea es simplificar el proceso de cargar imágenes en Google Sheets con un solo botón. Vamos a ver cómo subir una imagen desde nuestra computadora, cargarla en Google Drive, obtener su enlace y mostrarla en Google Sheets, todo con un solo clic.

Problemas con la Inserción Manual de Imágenes

Hay varias formas de insertar imágenes en Google Sheets, pero todas tienen desventajas:

  1. Insertar imagen sobre celdas: No está vinculado a ninguna celda específica y puede desorganizarse fácilmente.
  2. Insertar imagen en celda: La imagen se guarda dentro del archivo de Sheets, lo que lo hace más pesado y difícil de manipular posteriormente.
  3. Usar un hipervínculo: Requiere varios pasos y no permite una visualización directa en la celda.

Por estas razones, vamos a crear un proceso automatizado que solucione estos problemas.

Paso a Paso: Creando el Importador de Imágenes

Paso 1: Crear el Formulario HTML

  1. Abrir el Editor de Apps Script: Ve a Extensiones > Apps Script en tu Google Sheets.
  2. Crear un archivo HTML: Crea un nuevo archivo HTML llamado carga.
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <title>Cargar Archivo</title>
  </head>
  <body>
    <div class="container">
      <h2>Cargar Archivo</h2>
      <form id="miFormulario">
        <div class="form-group">
          <input type="file" id="archivo" name="archivo" class="form-control">
        </div>
        <button type="submit" class="btn btn-primary" onclick="subirArchivo(this.form)">Subir</button>
        <div id="cargando" hidden>Cargando...</div>
      </form>
    </div>
    <script>
      function subirArchivo(formulario) {
        document.getElementById('cargando').hidden = false;
        google.script.run.withSuccessHandler(respuestaExitosa).subirArchivoSheets(formulario);
        return false;
      }

      function respuestaExitosa() {
        document.getElementById('cargando').hidden = true;
        google.script.host.close();
      }
    </script>
  </body>
</html>

Paso 2: Crear el Script en Google Apps Script

  1. Crear la función para mostrar el formulario HTML:
function mostrarVentanaSubirArchivo() {
  var htmlOutput = HtmlService.createHtmlOutputFromFile('carga')
      .setWidth(400)
      .setHeight(300);
  SpreadsheetApp.getUi().showModalDialog(htmlOutput, 'Carga tu Archivo');
}
  1. Crear la función para subir el archivo a Google Drive y obtener su URL:
function subirArchivoSheets(formulario) {
  var blob = formulario.archivo;
  var archivo = DriveApp.createFile(blob);
  archivo.setSharing(DriveApp.Access.ANYONE_WITH_LINK, DriveApp.Permission.VIEW);
  var url = archivo.getUrl();

  var hoja = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  var celda = hoja.getActiveCell();
  celda.setValue(url);

  celda.offset(0, 1).setValue(archivo.getId());
  celda.offset(0, 2).setFormula('=IMAGE("' + url + '")');

  return true;
}

Paso 3: Crear el Menú Personalizado

  1. Crear la función para agregar un menú personalizado:
function onOpen() {
  var ui = SpreadsheetApp.getUi();
  ui.createMenu('JSG')
      .addItem('Subir Imagen', 'mostrarVentanaSubirArchivo')
      .addToUi();
}

Paso 4: Agregar Funcionalidades Adicionales

  1. Hacer que el botón de subir esté deshabilitado mientras se carga el archivo:
<button type="submit" id="boton" class="btn btn-primary" onclick="subirArchivo(this.form)">Subir</button>
<script>
  function subirArchivo(formulario) {
    document.getElementById('cargando').hidden = false;
    document.getElementById('boton').disabled = true;
    google.script.run.withSuccessHandler(respuestaExitosa).subirArchivoSheets(formulario);
    return false;
  }
</script>
  1. Añadir restricciones para subir solo archivos de imagen:
<input type="file" id="archivo" name="archivo" class="form-control" accept="image/*">

Conclusión

¡Y eso es todo! Hemos creado un importador de imágenes en Google Sheets que permite subir una imagen desde tu computadora, cargarla en Google Drive, obtener su URL y mostrarla en Google Sheets con un solo clic. Este proceso automatizado simplifica enormemente la gestión de imágenes en Google Sheets y es una excelente herramienta para cualquier usuario avanzado de Sheets.

Si te ha gustado este tutorial, no olvides suscribirte al canal y dejar tus comentarios.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Pin It on Pinterest

Share This