Subir una imagen

Clase 35 de 52 • Curso de Electron: Apps de escritorio en Windows y Mac

Resumen

Trabajaremos la funcionalidad de subir una imagen, para ello utilizaremos la plataforma CloudUp. Para utilizarla deberás registrarte.

Posteriormente deberás instalar el módulo:

$ npm install --save cloudup-cliente

Crearemos la función uploadImage() en dónde haremos lo siguiente:

Obtendremos la imagen del input
Obtenemos el nombre de la imagen
Validaremos los accesos de user y passwd
Desencriptamos el password

Una vez hecho esto podemos configurar la conexión con CloudUp con el objeto client.stream

Felipe Ruiz

student•

Tuve problemas al crear una cuenta en el servicio ‘cloudup’ al parecer ahora se necesita una invitación 😦

Alonso Alejandro Zúñiga Beltrán

student•

A mi me ha pasado exactamente lo mismo 😦

Matias Niz

student•

Encontre 2 problemas. Uno es que cuando guardamos una imagen, se agrega la propiedad filtered al dataset de la imagen principal. Pero si luego cambio de imagen y quiero subirla sin haber guardado previamente, la imagen que se cargara a cloudup es la que guarde en primer instancia. Porque esa propiedad en el dataset no se modifica por mas que cambie de imagenes, por ello agregue la siguiente linea al metodo changeImage quedando asi:

function changeImage (node) {
  if (node) {
    const selected = document.querySelector('li.selected')
    if (selected) {
      selected.classList.remove('selected')
    }
    node.classList.add('selected')
    const image = document.getElementById('image-displayed')
    image.src = node.querySelector('img').src
    image.dataset.original = image.src
    document.getElementById('filters').selectedIndex = 0;
  } else {
    document.getElementById('image-displayed').src = ''
  }
  document.getElementById('image-displayed').dataset.filtered = 'none'
}

El segundo problema se da, que si aplico un filtro y sin guardar intento subirla al cloudup, este me tirara error, por el echo de que modifica el src, con ese famoso base64 etc etc… Por ello la solucion mas sencilla es, que en lugar de usar el src de la imagen principal usar siempre el dataset.original, ya que se asigna siempre que se cambia de imagen.

let imageNode =  document.getElementById('image-displayed')
  let image

  if (imageNode.dataset.filtered !== 'none'){
    image = imageNode.dataset.filtered
  } else  { 
    image = imageNode.dataset.original
  }

  image = image.replace('file://', '')

  let fileName = path.basename(image)
  .......

Comparo la propiedad filtered del data set con ‘none’ ya que es el valor que le asigno cada vez que se selecciona una imagen.
Seguramente la solucion optima al problema de subir una imagen a cloudup luego de aplicar un filtro y sin la necesidad de guardar, seria crear un archivo temporal.

GARCIA CAMARENA EZEQUIEL

student•

Excelente clase

Francisco Ochoa

student•

Sugerencia para el que hace la descripción: Coloque bien los comandos ya hay varios mal.

Ricardo Celis

teacher•

Hola Pancho, gracias por avisar le daremos una revisada =)

platzerito18092018 platzerito18092018

teacher•

npm install --save cloudup-client

Subir una imagen

Introducción a Electron

Paso a paso para construi aplicaciones con Electron

¿Qué es Electron?

¿Cómo funciona Electron?

Herramientas necesarias

Comenzando con Electron

Creando nuestro proyecto

Nuestra primera ventana

Propiedades de una ventana de Electron

Comenzando con nuestro aplicativo

El frontend y Electron

Configurando nuestro frontend

Herramientas de desarrollo para Electron

Algunos frameworks recomendados

Construyendo el layout

Completar elementos del Layout

Agregando interacción a nuestra aplicación

JavaScript en el frontend

Selecciona imágenes

Buscar imágenes

Añadir filtros a la imagen

Comunicación entre procesos

Accesando recursos de la máquina

Leer archivos de directorios

Generar listas de imagenes

Refactor del proyecto

Usando el diálogo de guardar

Guardar imágenes en disco

Usando cajas de mensajes

Detectando errores

Interactuando con el sistema operativo

Organizando el código del proceso principal

Múltiples ventanas y comunicación entre ellas

Creando assets para una nueva ventana

Consideraciones para múltiples plataformas

Manejo de preferencias

Usuario y contraseña

Creando un ícono en la bandeja del sistema

Imprimiendo

Subir una imagen

Portapapeles con texto o imágenes

Emitiendo notificaciones

Agregando un Menú

Atajos

Protocolos personalizados

Generando un ejecutable para nuestra aplicación

A tener en cuenta para generar ejecutables

Configurando el entorno para construcción

Configurando el entorno para construcción 2

Personalizando nuestro ejecutable

Creando paquetes para distribuir nuestro aplicativo

Considerando instaladores para múltiples plataformas

Firmas digitales con Code Signing

Cierre del curso

Bonus

Integración continua

Escribiendo tests con Ava y Spectron

Desafios

Crear un filtro personalizado

Leer las imágenes ubicaciones remotas (Cloudup)

Previsualización de filtros