Subir Imagenes a Rails con la gema Carrierwave

Iniciado por Alejandro_99, Octubre 11, 2014, 02:01:34 AM

Tema anterior - Siguiente tema

0 Miembros y 1 Visitante están viendo este tema.

Octubre 11, 2014, 02:01:34 AM Ultima modificación: Octubre 13, 2014, 02:08:50 AM por Alejandro9999

Para subir imágenes a Rails tenemos diversas gema pero las mas utilizadas para hacerlos son Paperclip y Carrierwave. En lo personal les recomiendo utilizar Carrierwave ya que la misma genera su propia clase y tenes un código mas limpio y ordenado. Pero eso queda a criterio de ustedes.

Comencemos...

1. Ingresamos a nuestro proyecto a través de la consola:
Código: ruby
cd Nombre_del_proyecto

2. Agregamos nuestra gema al archivo Gemfile:

Código: ruby
gem 'carrierwave'


2. Luego de haber agregado la gema al archivo Gemfile ejecutamos en la consola
Código: ruby
bundle install 


*Esto es para que la gema se instale en nuestro proyecto.

3. Un vez instalada la gema generamos nuestra clase que gestionara los archivos que subamos:

Código: ruby
rails g uploader Foto 


*Foto: hace referencia al nombre de nuestra clase le pueden colocar el nombre que quieran.

4. Abrimos app/models/alumno.rb y debajo de la línea:

Código: ruby
class Alumno < ActiveRecord::Base

mount_uploader :imagen, FotoUploader


*:imagen = hace referencia al nombre de nuestro campo osea al que designamos para subir nuestras imágenes y/o archivos.
*FotoUploader: es el nombre de nuestra clase la que se genero cuando ejecutamos el comando:
Código: ruby
 rails g uploader Foto


5. Ingresamos a app/views/alumnos/_form.html.erb  y creamos nuestro view editando la siguiente línea:

Código: ruby
<%= form_for @alumno do |f| %>


Para que quede la siguiente manera:

Código: ruby
<%= form_for @alumno, :html => {:multipart => true} do |f| %>


6. Abrimos app/views/alumnos/_form.html.erb y cambiamos:

Código: ruby
<%= f.text_field :imagen %>


Por la siguiente línea:

Código: ruby
<%= f.file_field :imagen %>


7. Abrimos app/views/ alumnos /show.html.erb y cambiamos:

Código: ruby
<%= @alumno.imagen %>


Por la siguiente línea:

Código: ruby
<%= image_tag(@alumno.imagen_url, :width => 170, :height => 190) if @alumno.imagen.present? %>


*Nota: alumnos: hace referencia al nombre de mi tabla en ese lugar lo editan por el nombre que ustedes quieran asignarle
*Y otro dato muy relevante siempre absolutamente siempre el campo que designe para subir imágenes debe estar en minúscula (:imagen) ya que si lo ponen en mayúscula (:Imagen) les saldra el siguiente error:

uninitialized constant Imagen

8.   Ahora nos dirigimos al siguiente directorio: app/views/alumnos/index.html.erb una vez dentro del mismo editamos la siguiente línea osea en el lugar donde poseemos el campo que asignamos para subir imágenes:

Código: ruby
<td><%= alumno.imagen %></td>


Y la reemplazamos por la subsiguiente línea:

Código: ruby
<%= image_tag(alumno.imagen_url, :width => 65, :height => 75) if alumno.imagen.present? %>


La misma debe ir debajo de esta línea:

Código: ruby
<% @alumnos.each do |alumno| %>
      <tr>


Y entre medio de las etiquetas
Código: html5
<td></td> 


Si siguieron los pasos mencionados anteriormente,  al guardar un registro se debería ver la imagen añadida en la tabla de la siguiente manera:


Saludos¡¡