Cargar imagen de Rails Usar Paperclip en una aplicación de Rails

En las dos primeras partes de esta serie, te mostré cómo habilitar la carga de imágenes en Rails usando CarrierWave. En esta parte, verás cómo hacerlo utilizando Paperclip.

Paperclip es una gema de rubí proporcionada por thoughtbot. Fue creado para hacer el archivo adjunto muy fácil. En este tutorial, verás cómo usar Paperclip junto con Devise.

Sin mucho hablar, estemos ocupados.

Paperclip requiere la instalación de ImageMagick en su máquina. Necesitas esto para el procesamiento de imágenes. Para instalar ImageMagick, siga cualquiera de los pasos a continuación, dependiendo del tipo de máquina que utilice.

Usuarios de Mac:

brew install imagemagick

Usuarios de Ubuntu:

sudo apt-get install imagemagick

Generación de aplicaciones Rails

Utiliza tu terminal para generar una nueva aplicación..

rieles nuevo clip

Abre tu Gemfile y agrega las gemas necesarias:

gema 'clip'

joya 'devise'

Ejecutar paquete de instalación cuando haya terminado.

Configuración de la idea

Desde su terminal, instale el dispositivo usando el siguiente comando:

rieles generan dispositivo: instalar

Cuando haya terminado, ahora puede generar su modelo de usuario:

los carriles generan el usuario del dispositivo

Migre su base de datos después.

rastrillo db: migrar

Genere sus vistas de dispositivos.

Los carriles generan el dispositivo: vistas.

Usando su editor de texto, navegue hasta app / views / layouts / application.html.erb y agregue el siguiente código justo encima de la rendimiento bloquear.

# app / views / layouts / application.html.erb <%= notice %>
 <%= alert %>

Integración de clip

Debido a razones de seguridad, tenemos que permitir los parámetros en el controlador Devise. Gracias al increíble equipo detrás de Devise, hacer esto es fácil.

Abrir app / controllers / application_controller.rb y pegar en las siguientes líneas de código.

# app / controllers / application_controller.rb clase ApplicationController < ActionController::Base # Prevent CSRF attacks by raising an exception. # For APIs, you may want to use :null_session instead. protect_from_forgery with: :exception before_action :configure_permitted_parameters, if: :devise_controller? protected def configure_permitted_parameters devise_parameter_sanitizer.for(:sign_up)  |u| u.permit(:username, :email, :password, :password_confirmation, :remember_me, :avatar, :avatar_cache)  devise_parameter_sanitizer.for(:account_update)  |u| u.permit(:username, :password, :password_confirmation, :current_password, :avatar)  end end

Abre tu Usuario Modela y haz que se vea así:

# app / models / user.rb class Usuario < ActiveRecord::Base # Include default devise modules. Others available are: # :confirmable, :lockable, :timeoutable and :omniauthable devise :database_authenticatable, :registerable, :recoverable, :rememberable, :trackable, :validatable has_attached_file :avatar, styles:  medium: "300x300", thumb: "100x100"  validates_attachment_content_type :avatar, content_type: /\Aimage\/.*\Z/ end

Necesitas agregar un avatar columna a su tabla de Usuarios. Hay un comando de rieles que hace esto posible desde su terminal.

Los rieles generan migración add_avatar_to_users

Eso creará una nueva migración en db / migrate. Ábrelo y pega el siguiente código:

clase AddAvatarToUsers < ActiveRecord::Migration def up add_attachment :users, :avatar end def down remove_attachment :users, :avatar end end

Ejecuta tu migración

rastrillo db: migrar

Añadir Avatar a Devise Forms

Editarás tu nuevo formulario de registro. app / views / devise / registrations / new.html.erb y edita el formulario app / views / devise / registrations / edit.html.erb a lo que tengo abajo:

# app / views / devise / registrations / new.html.erb Regístrate
 <%= form_for(resource, as: resource_name, url: registration_path(resource_name), html:  multipart: true ) do |f| %> <%= devise_error_messages! %>  <%= f.label :email %>
 <%= f.email_field :email, autofocus: true %> 
  <%= f.label :password %> <% if @minimum_password_length %> (<%= @minimum_password_length %> caracteres mínimo) <% end %>
 <%= f.password_field :password, autocomplete: "off" %> 
  <%= f.label :password_confirmation %>
 <%= f.password_field :password_confirmation, autocomplete: "off" %> 
  <%= f.file_field :avatar %> 
  <%= f.submit "Sign up" %> 
 <% end %> <%= render "devise/shared/links" %>

# app / views / devise / registrations / edit.html.erb Editar <%= resource_name.to_s.humanize %>
 <%= form_for(resource, as: resource_name, url: registration_path(resource_name), html:  method: :put ) do |f| %> <%= devise_error_messages! %>  <%= f.label :email %>
 <%= f.email_field :email, autofocus: true %> 
 <% if devise_mapping.confirmable? && resource.pending_reconfirmation? %> Actualmente en espera de confirmación para: <%= resource.unconfirmed_email %>
 <% end %>  <%= f.label :password %> (déjalo en blanco si no quieres cambiarlo)
 <%= f.password_field :password, autocomplete: "off" %> 
  <%= f.label :password_confirmation %>
 <%= f.password_field :password_confirmation, autocomplete: "off" %> 
  <%= f.file_field :avatar %> 
  <%= f.label :current_password %> (Necesitamos su contraseña actual para confirmar sus cambios)
 <%= f.password_field :current_password, autocomplete: "off" %> 
  <%= f.submit "Update" %> 
 <% end %> Cancelar mi cuenta
 Infeliz? <%= button_to "Cancel my account", registration_path(resource_name), data:  confirm: "Are you sure?" , method: :delete %>
 <%= link_to "Back", :back %>

Arranca tu navegador y mira lo que tienes.

Para una aplicación estándar, es posible que desee comprobar si un usuario que desea editar su perfil ya tiene un avatar cargado. Esto es fácil de implementar en su archivo de edición de registro.

Abra el archivo de edición de registro y haga que se vea así:

# app / views / devise / registrations / edit.html.erb Editar <%= resource_name.to_s.humanize %>
 <%= form_for(resource, as: resource_name, url: registration_path(resource_name), html:  method: :put ) do |f| %> <%= devise_error_messages! %>  <%= f.label :email %>
 <%= f.email_field :email, autofocus: true %> 
 <% if devise_mapping.confirmable? && resource.pending_reconfirmation? %> Actualmente en espera de confirmación para: <%= resource.unconfirmed_email %>
 <% end %>  <%= f.label :password %> (déjalo en blanco si no quieres cambiarlo)
 <%= f.password_field :password, autocomplete: "off" %> 
  <%= f.label :password_confirmation %>
 <%= f.password_field :password_confirmation, autocomplete: "off" %> 
  <%= f.file_field :avatar %> <% if @user.avatar? %> <%= image_tag @user.avatar.url(:thumb) %> <% end %> 
  <%= f.label :current_password %> (Necesitamos su contraseña actual para confirmar sus cambios)
 <%= f.password_field :current_password, autocomplete: "off" %> 
  <%= f.submit "Update" %> 
 <% end %> Cancelar mi cuenta
 Infeliz? <%= button_to "Cancel my account", registration_path(resource_name), data:  confirm: "Are you sure?" , method: :delete %>
 <%= link_to "Back", :back %>

¿Puedes ver lo que cambió??

En el código anterior, hay una declaración condicional para verificar si ya existe un avatar para un usuario que usa la línea <% if @user.avatar? %>. Si esto devuelve verdadero, la siguiente línea se ejecuta, de lo contrario no.

Validaciones de seguridad

La validación siempre es importante al habilitar la carga de funciones en su aplicación web. Paperclip viene con medidas para asegurar su aplicación.

Puede utilizar cualquiera de las validaciones a continuación en su modelo..

Usuario de clase < ActiveRecord::Base has_attached_file :avatar # Validate content type validates_attachment_content_type :avatar, content_type: /\Aimage/ # Validate filename validates_attachment_file_name :avatar, matches: [/png\Z/, /jpe?g\Z/] # Explicitly do not validate do_not_validate_attachment_file_type :avatar end

Conclusión

Es posible que desee considerar Paperclip al construir su próxima aplicación web. Tiene un gran equipo apoyándolo..

Para explorar otras funciones que no se tratan en este tutorial, consulte la página GitHub de Paperclip.

Código