Rails Image Upload Paperclip gebruiken in een Rails-applicatie

In de eerste twee delen van deze serie heb ik je laten zien hoe je het uploaden van afbeeldingen in Rails kunt inschakelen met CarrierWave. In dit deel zult u zien hoe u dit doet met Paperclip.

Paperclip is een edelsteentje van thoughtbot. Het is gemaakt om bestandsbijlagen zeer eenvoudig te maken. In deze zelfstudie ziet u hoe u Paperclip naast Devise kunt gebruiken.

Zonder veel praten, laten we het druk hebben.

Paperclip vereist de installatie van ImageMagick op uw computer. U hebt dit nodig voor beeldverwerking. Om ImageMagick te installeren, gebruikt u een van de onderstaande stappen, afhankelijk van het type machine dat u gebruikt.

Mac-gebruikers:

zet imagemagick in voor installatie

Ubuntu-gebruikers:

sudo apt-get install imagemagick

Rails applicatie-generatie

Gebruik uw terminal om een nieuwe applicatie te genereren.

rails nieuwe paperclip

Open je Gemfile en voeg de benodigde edelstenen toe:

gem 'paperclip'

edelsteen 'bedenken'

Voer bundelinstallatie uit als u klaar bent.

Stel Setup in

Installeer vanaf uw terminal met de onderstaande opdracht:

rails genereren bedenken: installeren

Wanneer dat is gebeurd, kunt u nu uw gebruikersmodel genereren:

rails genereren bedenken Gebruiker

Migreer uw database daarna.

rake db: migreren

Genereer uw bedenkbare visies.

rails genereren bedenken: weergaven

Ga met behulp van uw teksteditor naar app / views / layouts / application.html.erb en voeg de volgende code net boven de opbrengst blok.

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

Paperclip-integratie

Om veiligheidsredenen moeten we parameters toestaan in de Devise-controller. Dankzij het geweldige team achter Devise is dit eenvoudig.

Doe open app / controllers / application_controller.rb en plak in de volgende regels code.

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

Open je Gebruiker model en laat het er zo uitzien:

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

U moet een toevoegen avatar kolom naar uw Users-tabel. Er is een spooropdracht die dit mogelijk maakt vanaf uw terminal.

rails genereren migratie add_avatar_to_users

Hiermee wordt een nieuwe migratie gemaakt in db / migreren. Open het en plak de onderstaande code:

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

Voer uw migratie uit

rake db: migreren

Voeg Avatar toe om Formulieren te bedenken

U zult uw registratie nieuw formulier bewerken app / views / bedenken / registraties / new.html.erb en bewerk het formulier app / views / bedenken / registraties / edit.html.erb naar wat ik hieronder heb:

# App / views / bedenken / registraties / new.html.erb Inschrijven
 <%= 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 %> tekens 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 / bedenken / registraties / edit.html.erb Bewerk <%= 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? %> Momenteel wachtende bevestiging voor: <%= resource.unconfirmed_email %>
 <% end %>  <%= f.label :password %> (laat leeg als u dit niet wilt wijzigen)
 <%= 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 %> (we hebben je huidige wachtwoord nodig om je wijzigingen te bevestigen)
 <%= f.password_field :current_password, autocomplete: "off" %> 
  <%= f.submit "Update" %> 
 <% end %> Annuleer mijn account
 Ongelukkig? <%= button_to "Cancel my account", registration_path(resource_name), data:  confirm: "Are you sure?" , method: :delete %>
 <%= link_to "Back", :back %>

Start je browser af en kijk wat je hebt.

Voor een standaardtoepassing, wilt u misschien controleren of een gebruiker die zijn of haar profiel wil bewerken al een avatar heeft geüpload. Dit is gemakkelijk te implementeren in uw registratiebewerkingsbestand.

Open het registratie-bewerkingsbestand en laat het er zo uitzien:

# App / views / bedenken / registraties / edit.html.erb Bewerk <%= 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? %> Momenteel wachtende bevestiging voor: <%= resource.unconfirmed_email %>
 <% end %>  <%= f.label :password %> (laat leeg als u dit niet wilt wijzigen)
 <%= 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 %> (we hebben je huidige wachtwoord nodig om je wijzigingen te bevestigen)
 <%= f.password_field :current_password, autocomplete: "off" %> 
  <%= f.submit "Update" %> 
 <% end %> Annuleer mijn account
 Ongelukkig? <%= button_to "Cancel my account", registration_path(resource_name), data:  confirm: "Are you sure?" , method: :delete %>
 <%= link_to "Back", :back %>

Kun je zien wat er veranderd is??

In de bovenstaande code is er een voorwaardelijke verklaring om te controleren of een avatar al bestaat voor een gebruiker die de lijn gebruikt <% if @user.avatar? %>. Als dit resultaat true oplevert, wordt de volgende regel uitgevoerd, anders niet.

Beveiligingsvalidaties

Validatie is altijd belangrijk bij het inschakelen van uploadfuncties in uw webtoepassing. Paperclip wordt geleverd met maatregelen om uw toepassing te beveiligen.

U kunt een van de onderstaande validaties in uw model gebruiken.

klasse Gebruiker < 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

Conclusie

Misschien wilt u Paperclip overwegen bij het samenstellen van uw volgende webtoepassing. Het heeft een geweldig team dat het ondersteunt.

Als u andere functies wilt verkennen die niet in deze zelfstudie aan de orde zijn, vinkt u de GitHub-pagina van Paperclip aan.

Code