Téléchargement d'image Rails Utilisation de Paperclip dans une application Rails

Dans les deux premières parties de cette série, je vous ai montré comment activer le téléchargement d'images dans Rails à l'aide de CarrierWave. Dans cette partie, vous verrez comment utiliser Paperclip..

Le trombone est un joyau de rubis fourni par thinkbot. Il a été créé pour rendre la pièce jointe très facile. Dans ce tutoriel, vous allez voir comment utiliser Paperclip avec Devise.

Sans trop parler, occupons-nous.

Un trombone nécessite l'installation d'ImageMagick sur votre machine. Vous en avez besoin pour le traitement des images. Pour installer ImageMagick, suivez l’une des étapes ci-dessous, en fonction du type d’appareil utilisé..

Utilisateurs Mac:

brasser installer imagemagick

Utilisateurs Ubuntu:

sudo apt-get install imagemagick

Génération d'applications Rails

Utilisez votre terminal pour générer une nouvelle application.

rails nouveau trombone

Ouvrez votre Gemfile et ajoutez les gemmes nécessaires:

bijou 'trombone'

bijou 'devise'

Exécutez l'installation du paquet lorsque vous avez terminé.

Configuration d'installation

Depuis votre terminal, installez le logiciel à l’aide de la commande ci-dessous:

les rails génèrent un montage: installer

Ceci fait, vous pouvez maintenant générer votre modèle utilisateur:

les rails génèrent un utilisateur

Migrez votre base de données après.

rake db: migrer

Générez vos vues de conception.

les rails génèrent des vues: vues

À l'aide de votre éditeur de texte, naviguez jusqu'à app / views / layouts / application.html.erb et ajoutez le code suivant juste au-dessus de la rendement bloc.

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

Intégration de trombone

Pour des raisons de sécurité, nous devons autoriser les paramètres dans le contrôleur Devise. Grâce à la formidable équipe de Devise, c'est facile.

S'ouvrir app / controllers / application_controller.rb et collez dans les lignes de code suivantes.

classe # app / controllers / application_controller.rb 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 

Ouvrez votre Utilisateur modèle et le faire ressembler à ceci:

# app / models / user.rb class Utilisateur < 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

Vous devez ajouter un avatar colonne à votre table Utilisateurs. Il existe une commande rails qui rend cela possible depuis votre terminal.

les rails génèrent la migration add_avatar_to_users

Cela va créer une nouvelle migration en db / migrer. Ouvrez-le et collez le code ci-dessous:

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

Exécutez votre migration

rake db: migrer

Ajouter un avatar à la création de formulaires

Vous allez modifier votre nouveau formulaire d'inscription app / views / inventer / registrations / new.html.erb et éditer le formulaire app / views / inventer / registrations / edit.html.erb à ce que j'ai ci-dessous:

# app / views / inventer / registrations / new.html.erb 
S'inscrire
 <%= 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 %> caractères minimum) <% 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 / inventer / registrations / edit.html.erb 
modifier <%= 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? %> 
En attente de confirmation pour: <%= resource.unconfirmed_email %>
 <% end %> 
 <%= f.label :password %> (laissez vide si vous ne voulez pas le changer)
 <%= 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 %> (nous avons besoin de votre mot de passe actuel pour confirmer vos modifications)
 <%= f.password_field :current_password, autocomplete: "off" %> 
 
 <%= f.submit "Update" %> 
 <% end %> 
Annuler mon compte
 
Malheureux? <%= button_to "Cancel my account", registration_path(resource_name), data:  confirm: "Are you sure?" , method: :delete %>
 <%= link_to "Back", :back %>

Lancez votre navigateur et vérifiez ce que vous avez.

Pour une application standard, vous pouvez vérifier si un utilisateur souhaitant modifier son profil a déjà chargé un avatar. Ceci est facile à mettre en œuvre dans votre fichier d'édition d'enregistrement.

Ouvrez le fichier de modification d'enregistrement et faites-le ressembler à ceci:

# app / views / inventer / registrations / edit.html.erb 
modifier <%= 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? %> 
En attente de confirmation pour: <%= resource.unconfirmed_email %>
 <% end %> 
 <%= f.label :password %> (laissez vide si vous ne voulez pas le changer)
 <%= 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 %> (nous avons besoin de votre mot de passe actuel pour confirmer vos modifications)
 <%= f.password_field :current_password, autocomplete: "off" %> 
 
 <%= f.submit "Update" %> 
 <% end %> 
Annuler mon compte
 
Malheureux? <%= button_to "Cancel my account", registration_path(resource_name), data:  confirm: "Are you sure?" , method: :delete %>
 <%= link_to "Back", :back %>

Pouvez-vous voir ce qui a changé?

Dans le code ci-dessus, il existe une instruction conditionnelle permettant de vérifier si un avatar existe déjà pour un utilisateur utilisant la ligne <% if @user.avatar? %>. Si cela retourne vrai, la ligne suivante est exécutée, sinon ce n'est pas le cas.

Validations de sécurité

La validation est toujours importante lorsque vous activez le téléchargement de fonctionnalités dans votre application Web. Un trombone est livré avec des mesures pour sécuriser votre application.

Vous pouvez utiliser n'importe laquelle des validations ci-dessous dans votre modèle..

classe utilisateur < 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

Conclusion

Vous voudrez peut-être envisager Paperclip lors de la création de votre prochaine application Web. Il a une grande équipe qui le soutient.

Pour explorer d'autres fonctionnalités non abordées dans ce didacticiel, consultez la page GitHub de Paperclip..