Subir imágenes a nuestra aplicación Rails, usando la gema 'Paperclip'

Paperclip.

Primero, veamos que es paperclip.

Paperclip es una gema que permite mediante el comando has_attached_file poder adjuntar imágenes de manera fácil.

Además, paperclip permite poder agregar validaciones, tales como tamaño, formato, presencia, etc.

Cabe mencionar que paperclip hace uso de las utilidades 'ImageMagick', las cuales permiten mostrar, manipular y convertir imágenes.

Requisitos.

Antes de comenzar, es necesario tener los siguientes requisitos para poder desarrollar esta aplicación.

Tener la versión 2.0 de Ruby.
Tener la versión de Ruby on Rails 4.0 rc1
Tener instalado ImageMagick.
Nota: En este tutorial no se explica como instalar y/o configurar ruby, rails ni imagemagick.

Manos a la obra.

Si ya estas en este punto, quiere decir que cuentas con los requisitos antes mencionados. Entonces manos a la obra.

Creando nuestra aplicación.

Lo primero que necesitamos es crear nuestra aplicación, la cual llamaremos TestPaperclip. Así que abrimos nuestra terminal/consola y escribimos lo siguiente:

rails new TestPaperclip

Con el comando anterior, rails nos crea una carpeta llamada TestPaperclip (carpeta de aplicación), y dentro de esta carpeta se encuentran todos nuestros archivos necesarios para que nuestra aplicación rails funcione.

Nuevamente desde nuestra terminal/consola escribimos el siguiente comando, para poder entrar a la carpeta de nuestra aplicación.

cd TestPaperclip

Agregamos Paperclip.

Ahora es necesario agregar la gema de paperclip a nuestro archivo Gemfile, el cual se encuentra dentro de nuestra carpeta.

gem 'paperclip', git: 'No tienes permitido ver los links. Registrarse o Entrar a mi cuenta'
Se utiliza desde el repositorio, ya que hasta este momento no esta disponible una gema para Rails 4.0
Para poder instalar la gema de paperclip y poder usarla en nuestra aplicación, escribimos bundle en nuestra terminal/consola.

Creamos nuestro scaffold.

Después de haber instalado la gema, procederemos a crear nuestro modelo, controlador y vistas.

Nota: En este tutorial crearemos un scaffold para que rails nos cree rápidamente el modelo, controlador y las vistas necesarias, pero tu puedes crear los modelos, controladores y vistas individualmente si así lo deseas.

rails g scaffold Product name:string description:text
Gracias al comando anterior, rails nos ha creado un controlador llamado ProductsController, nos ha creado las vistas necesarias y nos ha creado un modelo llamado Product. Dicho modelo tendrá como atributos un nombre de tipo cadena y una descripción de tipo texto.

Configuramos nuestra migración.

Para generar la tabla de la base de datos, rails también ha generado una migración con los campos nombre y descripción. Es en esta migración donde debemos indicarle que queremos guardar los datos de la imagen. Para esto, abrimos la migración ubicada en db/migrate/ y le agregamos la siguiente línea: add_attachment :products, :image. De tal manera que nuestra migración queda de la siguiente manera:

class CreateProducts < ActiveRecord::Migration
  def change
    create_table :products do |t|
      t.string :name
      t.text :description

      t.timestamps
    end

   add_attachment :products, :image
  end
end

El método add_attachment es un helper que proporciona Paperclip para almacenar la información necesaria de las imágenes en la base de datos.

Ahora necesitamos correr nuestra migración para que se cree nuestra tabla products. Eso lo hacemos con el comando rake db:migrate.

Configurando nuestro modelo.

Ahora que ya tenemos nuestra tabla productos en la base de datos, el siguiente paso es abrir nuestro modelo de productos y decirle a rails que queremos que cada producto tenga una imagen.

class Product < ActiveRecord::Base
  has_attached_file :image, styles: { medium: '200x200>', thumb: '48x48>' }
end

Al igual que con la migración, has_attached_file es un método helper que nos ofrece Paperclip. :image es el nombre del atributo de nuestro modelo. :styles permite decirle a Paperclip que tamaño de imagen queremos almacenar. De esta manera, se nos almacenará en disco la imagen en tamaño original, mediano y thumb.

Nota: Todas las imágenes guardadas se encontrarán en public/system/products/images/000/000/.

Configurando nuestras vistas.

Ya que hemos configurado nuestro modelo, debemos modificar un poco nuestras vistas para que nos permitan poder adjuntar una imagen cada vez que queremos crear/editar nuestro producto.

Abrimos nuestra parcial _form.html.erb ubicada en app/views/products y antes de la línea <div class="actions"> agregaremos el siguiente código:

<div class="field">
  <%= f.label :image %>
  <%= f.file_field :image %>
</div>

Este pequeño código nos permitirá el poder adjuntar una imagen cada vez que queramos crear o editar un producto.

Siguiendo con nuestras vistas, ahora abriremos nuestro index.html.erb y le agregaremos 2 líneas de código:

<th>Image</th> justo antes de <th>Name</th>. Con esto, nuestra tabla que muestra todos nuestros productos en el navegador, tendrá una columna llamada Image.

<td><%= image_tag product.image.url(:thumb) %></td> justo antes de <td><%= No tienes permitido ver los links. Registrarse o Entrar a mi cuenta %></td>. Con esto, obtendremos la imagen (de tamaño thumb de cada producto).

Para finalizar con nuestras vistas, abriremos la vista show.html.erb y mostraremos la imagen del producto, pero esta vez de tamaño mediano:

<%= image_tag @product.image.url(:medium) %>
Configurando nuestro controlador.

Ahora si, hemos terminado editando nuestras vistas. Pero nos queda editar nuestro controlador products_controller.rb, el cual se encuentra en app/controllers/.

Al haber creado el scaffold, rails nos ha generado el código necesario para poder realizar las diferentes acciones (new, create, edit, update y destroy). Pero necesitamos decirle que al adjuntar una imagen, sea guardada.

Al final de nuestro controlador, se encuentran 2 métodos privados:

set_product
product_params. Éste método lo editaremos, para que quede de la siguiente manera:

def product_params
  params.require(:product).permit(:name, :description, :image)
end

Y nuestra aplicación.

Con esto, hemos terminado nuestra aplicación básica para poder adjuntar imágenes. Ahora solo queda verla en nuestro navegador, con lo que debemos correr el servidor. Escribimos el siguiente comando en nuestra terminal/consola:

rails s

Abrimos el navegador y escribimos localhost:3000/products para poder listar nuestros productos, que por el momento estará vacía. Así que a partir de aquí, podemos crear un producto y adjuntarle una imagen.

Finalizanding

Fuente: No tienes permitido ver los links. Registrarse o Entrar a mi cuenta