Share
Las cargas de archivos son generalmente un área difícil en el desarrollo web. En este tutorial, aprenderemos a usar Dragonfly, una poderosa gema de Ruby que hace que sea fácil y eficiente agregar cualquier tipo de funcionalidad de carga a un proyecto de Rails..
Nuestra aplicación de muestra mostrará una lista de usuarios, y para cada uno de ellos, podremos cargar un avatar y tenerlo almacenado. Además, Dragonfly nos permitirá:
En esta lección, seguiremos un enfoque de BDD [Behavior Driven Development], utilizando Cucumber y RSpec.
Necesitará tener instalado Imagemagick: puede consultar esta página para ver los binarios para instalar. Como estoy basado en una plataforma Mac, use Homebrew, simplemente puedo escribir brew install imagemagick.
También necesitarás clonar una aplicación básica de Rails que usaremos como punto de partida..
Comenzaremos clonando el repositorio inicial y configurando nuestras dependencias:
git clone http: //[email protected]/cloud8421/tutorial_dragonfly_template.git cd tutorial_dragonfly_template
Esta aplicación requiere al menos Ruby 1.9.2 para ejecutarse, sin embargo, te animo a que uses 1.9.3. La versión de Rails es 3.2.1. El proyecto no incluye un .rvmrc o un .rbenv expediente.
A continuación, corremos:
paquete de instalación paquete exec rake db: configuración db: prueba: preparar db: semilla
Esto se encargará de las dependencias de gemas y la configuración de la base de datos (utilizaremos sqlite, por lo que no hay que preocuparse por la configuración de la base de datos).
Para probar que todo funciona como se espera, podemos ejecutar:
paquete exec rspec paquete exec pepino
Debes encontrar que todas las pruebas han pasado. Repasemos la salida de Pepino:
Característica: administrar el perfil de usuario Como usuario Para administrar mis datos, quiero acceder a mi página de perfil de usuario. Antecedentes: Dado que un usuario existe con el correo electrónico "[email protected]" Escenario: ver mi perfil Dado que estoy en la página de inicio Cuándo Sigo "Perfil" para "[email protected]" Luego debería estar en la página de perfil para "[email protected]" Escenario: editar mi perfil Dado que estoy en la página de perfil para "[email protected]" Cuando Sigo "Editar" Y cambio mi correo electrónico con "[email protected]" Y hago clic en "Guardar". Debería estar en la página de perfil de "[email protected]" Y debería ver "Escenarios actualizados por el usuario" 2 escenarios (2 pasados) 11 pasos (11 pasados) 0m0.710s
Como puede ver, estas características describen un flujo de trabajo de usuario típico: abrimos una página de usuario de una lista, presionamos "Editar" para editar los datos del usuario, cambiamos el correo electrónico y guardamos.
Ahora, intenta ejecutar la aplicación:
rieles
Si abres http :: // localhost: 3000 en el navegador, encontrará una lista de usuarios (completamos previamente la base de datos con 40 registros aleatorios gracias a la gema Faker).
Por ahora, cada uno de los usuarios tendrá un pequeño avatar de 16x16px y un gran avatar de marcador de posición en su página de perfil. Si edita al usuario, podrá cambiar sus detalles (nombre, apellido y contraseña), pero si intenta cargar un avatar, no se guardará..
Siéntase libre de navegar en la base de código: la aplicación utiliza Simple Form para generar vistas de formulario y Twitter Bootstrap para CSS y diseño, ya que se integran perfectamente y ayudan mucho a acelerar el proceso de creación de prototipos..
Comenzaremos agregando un nuevo escenario a características / administrador_perfil.featura:
... Escenario: agregar un avatar Dado que estoy en la página de perfil para "[email protected]" Cuando sigo "Editar" y subo el avatar de bigote Y hago clic en "Guardar". Luego debería estar en la página de perfil para "correo electrónico @ example.com "Y el perfil debe mostrar" el avatar del bigote "
Esta característica es bastante autoexplicativa, pero requiere algunos pasos adicionales para agregar a características / step_definitions / user_steps.rb:
Accentsconagua
... Cuando / ^ Subo el avatar del bigote $ / do attach_file 'user [avatar_image]', Rails.root + 'spec / fixtures / mustache_avatar.jpg' end Luego / ^ el perfil debería mostrar "([^"] *) " $ / do | imagen | patrón = imagen de caso cuando 'el avatar del bigote' / mustache_avatar / end n = Nokogiri :: HTML (page.body) n.xpath (".// img [@ class = 'thumbnail']") .first ['src']. should = ~ end pattern Este paso asume que tienes una imagen, llamada mustache_avatar.jpg dentro especificaciones / accesorios. Como puedes imaginar, esto es solo un ejemplo; puede ser lo que quieras.
El primer paso utiliza Capibara para encontrar el usuario [avatar_image] campo de archivo y subir el archivo. Tenga en cuenta que estamos asumiendo que tendremos una avatar_imagen atributo en el Usuario modelo.
El segundo paso utiliza Nokogiri (una potente biblioteca de análisis HTML / XML) y XPath para analizar el contenido de la página de perfil resultante y buscar los primeros img etiqueta con un miniatura clase y prueba de que la src atributo contiene bigote_avatar.
Si tu corres Pepino ahora, este escenario generará un error, ya que no hay ningún campo de archivo con el nombre que especificamos. Ahora es el momento de centrarse en el Usuario modelo.
Antes de integrar Dragonfly con el Usuario modelo, vamos a añadir un par de especificaciones a usuario_spec.rb.
Podemos añadir un nuevo bloque justo después de la atributos contexto:
contexto "atributos de avatar" hágalo debería responder_a (: avatar_imagen) esto debería permitir_mass_assignment_of (: avatar_image) fin
Probamos que el usuario tenga un avatar_imagen atributo y, como vamos a actualizar este atributo a través de un formulario, debe ser accesible (segunda especificación).
Ahora podemos instalar Dragonfly: al hacer esto, conseguiremos que estas especificaciones se vuelvan ecológicas.
Agreguemos las siguientes líneas al Gemfile:
gema 'rack-cache', requiere: 'rack / cache' gema 'dragonfly', '~> 0.9.10'
A continuación, podemos correr instalación de paquete. Rack-cache es necesario para el desarrollo, ya que es la opción más simple para tener almacenamiento en caché HTTP. También se puede utilizar en la producción, incluso si las soluciones más robustas (como Varnish o Squid) serían mejores.
También necesitamos agregar el inicializador Dragonfly. Vamos a crear el config / initializers / dragonfly.rb archivo y añadir lo siguiente:
requiere la aplicación 'dragonfly' = Dragonfly [: images] app.configure_with (: imagemagick) app.configure_with (: rails) app.define_macro (ActiveRecord :: Base,: image_accessor)
Esta es la configuración de Dragonfly de vainilla: configura una aplicación Dragonfly y la configura con el módulo necesario. También agrega una nueva macro a ActiveRecord que podremos utilizar para ampliar nuestra Usuario modelo.
Necesitamos actualizar config / application.rb, y añada una nueva directiva a la configuración (justo antes de la config.generators bloquear):
config.middleware.insert 0, 'Rack :: Cache', verbose: true, metastore: URI.encode ("file: # Rails.root / tmp / dragonfly / cache / meta"), entitystore: URI.encode ("file: # Rails.root / tmp / dragonfly / cache / body") a menos que Rails.env.production? config.middleware.insert_after 'Rack :: Cache', 'Dragonfly :: Middleware',: images Sin entrar en mucho detalle, estamos configurando Rack :: Caché (excepto para producción, donde está habilitado de forma predeterminada) y configurar Dragonfly para usarlo.
Almacenaremos nuestras imágenes en el disco, sin embargo, necesitamos una forma de rastrear la asociación con un usuario. La opción más sencilla es agregar dos columnas a la tabla de usuarios con una migración:
rieles g migración add_avatar_to_users avatar_image_uid: cadena avatar_image_name: cadena paquete exec rake db: migrate db: test: prepare
Una vez más, esto es directamente de la documentación de Dragonfly: necesitamos tener un avatar_image_uid columna para identificar de forma única el archivo avatar y una avatar_image_name para almacenar su nombre de archivo original (la última columna no es estrictamente necesaria, pero permite la generación de urls de imágenes que terminan con el nombre de archivo original).
Finalmente, podemos actualizar el Usuario modelo:
Usuario de clase < ActiveRecord::Base image_accessor :avatar_image attr_accessible :email, :first_name, :last_name, :avatar_image…
los image_accessor El inicializador de Dragonfly pone a disposición el método y solo requiere un nombre de atributo. También hacemos el mismo atributo accesible en la línea de abajo..
Corriendo rspec Ahora debería mostrar todas las especificaciones verde.
Para probar la función de carga, podemos agregar un contexto a users_controller_spec.rb en el Actualización PUT bloquear:
context "avatar image" do let! (: image_file) fixture_file_upload ('/ mustache_avatar.jpg', 'image / jpg') context "cargando un avatar" do antes de poner: update, id: user.id, user: avatar_image: image_file end it "debería guardar efectivamente el registro de la imagen en el usuario" do user.reload user.avatar_image_name.should = ~ / mustache_avatar / end end end end Reutilizaremos el mismo dispositivo y crearemos un simulacro para la carga con fixture_file_upload.
Como esta funcionalidad se aprovecha de Dragonfly, no necesitamos escribir código para que pase..
Ahora tenemos que actualizar nuestras vistas para mostrar el avatar. Vamos a empezar desde la página de presentación del usuario y abrir app / views / users / show.html.erb y actualízalo con el siguiente contenido:
<% if @user.avatar_image.present? %> <%= image_tag @user.avatar_image.url, class: 'thumbnail' %> <% else %><% end %>
<%= @user.name %>
<%= @user.email %>
<%= link_to 'Edit', edit_user_path(@user), class: "btn" %>
A continuación, podemos actualizar app / views / users / edit.html.erb:
<%= simple_form_for @user, multipart: true do |f| %><% end %><% if @user.avatar_image.present? %> <%= image_tag @user.avatar_image.url, class: 'thumbnail' %> <% else %><%= f.input :avatar_image, as: :file %><%= f.input :first_name %> <%= f.input :last_name %> <%= f.input :email %><%= f.submit 'Save', class: "btn btn-primary" %>
Podemos mostrar el avatar de usuario con una simple llamada a @ user.avatar_image.url. Esto devolverá un url a una versión no modificada del avatar cargado por el usuario.
Si tu corres Pepino Ahora, verás la característica verde. Siéntete libre de probarlo en el navegador también!
Estamos confiando implícitamente en CSS para cambiar el tamaño de la imagen si es demasiado grande para su contenedor. Es un enfoque inestable: nuestro usuario podría cargar avatares no cuadrados o una imagen muy pequeña. Además, siempre estamos sirviendo la misma imagen, sin preocuparnos demasiado por el tamaño de la página o el ancho de banda.
Necesitamos trabajar en dos áreas diferentes: agregar algunas reglas de validación a la carga del avatar y especificar el tamaño y la proporción de la imagen con Dragonfly.
Comenzaremos por abrir el usuario_spec.rb archivo y añadiendo un nuevo bloque de especificaciones:
contexto "atributos de avatar" do% w (avatar_imagen retained_avatar_image remove_avatar_image) .each do | attr | it debe responder_to (attr.to_sym) final% w (avatar_imagen retained_avatar_image remove_avatar_image) .each do | attr | it debe permitir_mass_assignment_of (attr.to_sym) end it it "debería validar el tamaño del archivo del avatar" do user.avatar_image = Rails.root + 'spec / fixtures / huge_size_avatar.jpg' user.should_not be_valid # size is> 100 KB end it "debería validar el formato del avatar" do user.avatar_image = Rails.root + 'spec / fixtures / dummy.txt' user.should_not be_valid end end
Estamos probando la presencia y estamos permitiendo la "asignación masiva" de atributos adicionales que utilizaremos para mejorar el formulario de usuario (: retained_avatar_image y : remove_avatar_image).
Además, también estamos probando que nuestro modelo de usuario no acepte grandes subidas (más de 200 KB) y archivos que no sean imágenes. Para ambos casos, debemos agregar dos archivos de aparatos (una imagen con el nombre especificado y cuyo tamaño es más de 200 KB y un archivo de texto con cualquier contenido).
Como de costumbre, ejecutar estas especificaciones no nos pondrá verdes. Vamos a actualizar el modelo de usuario para agregar esas reglas de validación:
... attr_accessible: email,: first_name,: last_name, avatar_image, retained_avatar_image,: remove_avatar_image ... validates_size_of: avatar_image, maximum: 100.kilobytes validates_property: format, of: avatar_image, in: [: jpeg,> : jpg] validates_property: mime_type, of:: avatar_image, en: ['image / jpg', 'image / jpeg', 'image / png', 'image / gif'], case_sensitive: false
Estas reglas son bastante efectivas: tenga en cuenta que, además de verificar el formato, también verificamos el tipo mime para una mejor seguridad. Al ser una imagen, permitimos archivos jpg, png y gif..
Nuestras especificaciones deberían pasar ahora, por lo que es hora de actualizar las vistas para optimizar la carga de la imagen.
De forma predeterminada, Dragonfly utiliza ImageMagick para procesar dinámicamente las imágenes cuando se solicita. Suponiendo que tenemos un usuario instancia en uno de nuestros puntos de vista, entonces podríamos:
<% end %> user.avatar_image.thumb ('100x100'). url user.avatar_image.process (: greyscale) .url Estos métodos crearán una versión procesada de esta imagen con un hash único y, gracias a nuestra capa de almacenamiento en caché, se llamará a ImageMagick solo una vez por imagen. Después de eso, la imagen será servida directamente desde el caché..
Puedes usar muchos métodos incorporados o simplemente construir los tuyos, la documentación de Dragonfly tiene muchos ejemplos..
Revisemos nuestro usuario editar página y actualizar el código de vista:
... <% if @user.avatar_image.present? %> <%= image_tag @user.avatar_image.thumb('400x400#').url, class: 'thumbnail' %> <% else %>... Haremos lo mismo para el usuario. espectáculo página:
... <% if @user.avatar_image.present? %> <%= image_tag @user.avatar_image.thumb('400x400#').url, class: 'thumbnail' %> <% else %>... Estamos forzando el tamaño de la imagen a 400 x 400 píxeles. los # El parámetro también le indica a ImageMagick que recorte la imagen manteniendo una gravedad central. Puede ver que tenemos el mismo código en dos lugares, por lo que vamos a reformular esto en un parcial llamado views / users / _avatar_image.html.erb
<% if @user.avatar_image.present? %> <%= image_tag @user.avatar_image.thumb('400x400#').url, class: 'thumbnail' %> <% else %> <% end %> Entonces podemos reemplazar el contenido de la .miniatura Contenedor con una simple llamada a:
<%= render 'avatar_image' %>
Podemos hacerlo aún mejor moviendo el argumento de pulgar Fuera de lo parcial. Vamos a actualizar _avatar_image.html.erb:
& text = Super + cool + avatar "alt =" Super cool avatar "> <% end %>
