Advertisement
  1. Code
  2. Ruby

Subir imágenes den Rails: uso de CarrierWave y Devise

Scroll to top
Read Time: 7 mins

Spanish (Español) translation by Steven (you can also view the original English article)

En la primera parte de esta serie, aprendiste a usar CarrierWave en tu aplicación Rails. En esta segunda parte, aprenderás cómo habilitar la carga de imágenes para tus usuarios que usan Devise. Devise es una solución de autenticación para Rails. También aprenderás a usar fog, una biblioteca de servicios en la nube Ruby que permitirá que tu aplicación se conecte a Amazon Web Services.

Basta de hablar, pongámonos manos a la obra.

Configuración de la aplicación Rails

Genera tu nueva aplicación de Rails:

Abre tu Gemfile y agrega las siguientes gemas:

Ejecuta bundle install para instalar las gemas.

Desde tu terminal, crea un controlador de páginas llamado Pages controller:

Navega a config/routes.rb y agrega una ruta raíz:

Generar y configurar Devise

La función de carga se integrará en nuestro modelo de usuario para que los usuarios carguen avatares. Desde tu terminal, instala devise:

El generador instalará un inicializador que describe todas las opciones de configuración de Devise. Abre app/views/layouts/application.html.erb en tu editor de texto y agrega el siguiente código encima del bloque yield:

En este punto, puedes generar tu modelo de usuario:

A continuación, migra tu base de datos:

Deberás editar las vistas de "devise", por lo que es importante que las generes:

Y eso hará la magia.

Con tu editor de texto, abre app/views/devise/registrations/new.html.erb y edítalo para que se vea así:

Haz lo mismo para app/views/devise/registrations/edit.html.erb:

Una vez hecho esto, deberás incluir el avatar en la lista blanca para diseñar y agregar una columna de avatar a la tabla de usuarios. Desde tu terminal, ejecuta la migración para agregar una nueva columna de avatar.

Agrega el avatar de CarrierWave a tu modelo User; tu modelo debería verse así:

En el código anterior, agregaste una línea mount_uploader en la parte superior de la clase User. También hay una validación para verificar la integridad y el procesamiento del avatar, junto con un método para garantizar que no se cargue ninguna imagen superior a 500KB.

Debes agregar avatar, avatar_cache y remove_avatar a la lista de atributos accesibles. Hacer esto es fácil, simplemente abre tu application_controller.rb y haz que se vea así:

Una vez hecho esto, estás listo para integrar CarrierWave.

Configuración de CarrierWave

Usando tu editor de texto, navega hasta config/initializers y crea un archivo llamado carrier_wave.rb. Pega el código a continuación:

Este es el inicializador que se necesita para cargar CarrierWave después de ActiveRecord.

Desde tu terminal, genera un cargador:

Esto creará un nuevo directorio llamado uploaders en la carpeta de la aplicación y un archivo dentro llamado avatar_uploader.rb. He editado el contenido del archivo para que se parezca a lo que tengo a continuación:

Necesitas la línea MiniMagick para generar diferentes versiones de una imagen. Incluí tres versiones de imágenes. MiniMagick hace posible el cambio de tamaño a esta versión. El último bloque de código garantiza que no se carguen extensiones de archivo aparte de las enumeradas aquí.

Configuración de AWS

Para este tutorial, cargaremos nuestras imágenes en Amazon Web Services. Si aún no tienes una cuenta, ve a la página de registro y crea una cuenta gratuita.

Cuando hayas terminado con eso, deberás crear un 'bucket' para almacenar tus imágenes. Cuando estés allí, elige Crear bucket para abrir el cuadro de diálogo. Ingresa un nombre para el depósito o bucket y selecciona una región. Cuando termines, selecciona Crear.

Abre tu Gemfile y agrega esta gema, y ejecuta bundle install cuando hayas terminado.

Desde tu terminal, ejecuta bundle exec figaro install. Esto creará un nuevo archivo config/application.yml y lo agregará al .gitignore de tu aplicación. Necesitas este archivo para mantener a salvo tu ID de acceso y clave secreta de AWS.

Para encontrar tu ID de acceso y clave secreta de AWS, ve a Amazon Web Services y haz clic en el nombre de tu cuenta, que se encuentra en la esquina derecha de la consola.

En el menú desplegable, selecciona Credenciales de seguridad y haz clic en el botón Continuar con las credenciales de seguridad. En la página que se muestra, selecciona Claves de acceso (ID de clave de acceso y Clave de acceso secreta). Haz clic en el botón Crear nueva clave de acceso para generar una nueva clave y cópiala en un editor.

En tu editor de texto, ve a config/application.yml y pega lo siguiente:

Reemplaza las líneas como se indicó anteriormente.

Navega a config/initializers, crea un archivo llamado storage.rb y pega lo siguiente:

Según la configuración anterior, la región de mi depósito es us-west-2 y el nombre del depósito es tutsplus-avatar. Reemplaza eso con información sobre tu depósito o bucket.

Inicia tu servidor de rails mediante rails server y en tu navegador ve a https://localhost:3000/users/sign_up.

Establecer un avatar predeterminado

En tu aplicación, es posible que desees establecer un avatar predeterminado para los usuarios que eligen no cargar un avatar. Hacer esto es fácil.

Crea una carpeta en app/assets/images llamada fallback y coloca tu imagen predeterminada en ella. Con tu editor de texto, ve a app/uploaders/avatar_uploader.rb y pega el código a continuación:

Asegúrate de cambiar default-avatar.gif por el nombre de tu imagen.

Conclusión

Ahora sabes cómo habilitar la carga de imágenes para tus usuarios. Esto agrega una característica importante a tu aplicación de Rails. Espero que te hayas divertido. En la siguiente parte, veremos PaperClip. Tus comentarios son bienvenidos.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.