Încărcarea imaginilor în rails Folosind carlige într-o aplicație pentru șine

În primele două părți ale acestei serii, ți-am arătat cum să activezi încărcarea imaginilor în Rails folosind CarrierWave. În această parte, veți vedea cum să faceți acest lucru folosind Paperclip.

Carligela este un bijuterie Ruby oferită de thoughtbot. A fost creat pentru a face atașarea fișierelor foarte ușoară. În acest tutorial, veți vedea cum să utilizați Paperclip alături de Devise.

Fără prea multe vorbe, să ne ocupăm.

Carligela necesită instalarea programului ImageMagick pe aparat. Aveți nevoie de acest lucru pentru procesarea imaginilor. Pentru a instala ImageMagick, utilizați oricare dintre pașii de mai jos, în funcție de tipul de mașină pe care o utilizați.

Utilizatorii Mac:

brew instala imagemagick

Utilizatori Ubuntu:

sudo apt-get a instala imagemagick

Rails Application Generation

Utilizați terminalul pentru a genera o nouă aplicație.

șinele de bandă noi

Deschideți Gemfilele și adăugați pietrele necesare:

bijuterie

bijuterie "concepe"

Porniți instalarea pachetului când ați terminat.

Devize Setup

Din terminalul dvs., instalați-o folosind comanda de mai jos:

șinele generează:

După ce ați terminat, acum puteți genera modelul de utilizator:

șinele generează un utilizator

Migrează baza de date după.

rake db: migrați

Generează-ți vederile proiectate.

șinele generează concepte: vederi

Utilizând editorul de text, navigați la app / opinii / machete / application.html.erb și adăugați următorul cod chiar deasupra Randament bloc.

# App / opinii / machete / application.html.erb 
<%= notice %>
 
<%= alert %>

Integrarea cu hârtie

Din motive de securitate, trebuie să permitem parametrii în controlerul Devise. Mulțumită echipei minunate din spatele companiei Devise, acest lucru este ușor.

Deschide app / controlere / application_controller.rb și lipiți în următoarele rânduri de cod.

# 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 

Deschide-ți Utilizator model și face ca acesta să arate astfel:

# app / models / user.rb Utilizator de clasă < 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

Trebuie să adăugați un Avatar în tabelul Utilizatori. Există o comandă pentru șine care face posibilă acest lucru de la terminalul dvs..

șinele generează migrarea add_avatar_to_users

Aceasta va crea o nouă migrare în Google db / migrate. Deschideți-l și inserați codul de mai jos:

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

Rulați migrația

rake db: migrați

Adăugați Avatar pentru a crea formulare

Veți edita formularul de înregistrare nou app / opinii / elaboreze / înregistrări / new.html.erb și editați formularul app / opinii / elaboreze / înregistrări / edit.html.erb la ceea ce am mai jos:

# App / vizualizări / elaboreze / înregistrări / new.html.erb 
Inscrie-te
 <%= 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 %> caractere minime) <% 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 / vizualizări / elaboreze / înregistrări / edit.html.erb 
Editați | × <%= 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? %> 
În prezent, confirmarea de așteptare pentru: <%= resource.unconfirmed_email %>
 <% end %> 
 <%= f.label :password %> (lăsați necompletat dacă nu doriți să-l schimbați)
 <%= 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 %> (avem nevoie de parola actuală pentru a confirma modificările)
 <%= f.password_field :current_password, autocomplete: "off" %> 
 
 <%= f.submit "Update" %> 
 <% end %> 
Anulați contul
 
Nefericit? <%= button_to "Cancel my account", registration_path(resource_name), data:  confirm: "Are you sure?" , method: :delete %>
 <%= link_to "Back", :back %>

Încetați browser-ul dvs. și verificați ce aveți.

Pentru o aplicație standard, poate doriți să verificați dacă un utilizator care dorește să editeze profilul său deja are un avatar încărcat. Acest lucru este ușor de implementat în fișierul de editare a înregistrării.

Deschideți fișierul de editare a înregistrării și faceți ca acesta să arate astfel:

# App / vizualizări / elaboreze / înregistrări / edit.html.erb 
Editați | × <%= 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? %> 
În prezent, confirmarea de așteptare pentru: <%= resource.unconfirmed_email %>
 <% end %> 
 <%= f.label :password %> (lăsați necompletat dacă nu doriți să-l schimbați)
 <%= 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 %> (avem nevoie de parola actuală pentru a confirma modificările)
 <%= f.password_field :current_password, autocomplete: "off" %> 
 
 <%= f.submit "Update" %> 
 <% end %> 
Anulați contul
 
Nefericit? <%= button_to "Cancel my account", registration_path(resource_name), data:  confirm: "Are you sure?" , method: :delete %>
 <%= link_to "Back", :back %>

Puteți vedea ce sa schimbat?

În codul de mai sus, există o declarație condiționată pentru a verifica dacă există deja un avatar pentru un utilizator care utilizează linia <% if @user.avatar? %>. Dacă aceasta se întoarce la adevărat, următoarea linie se execută, altfel nu.

Validări de securitate

Validarea este întotdeauna importantă când permiteți încărcarea caracteristicilor în aplicația dvs. web. Agățătorul vine cu măsuri pentru a vă asigura aplicația.

Puteți utiliza oricare dintre validările de mai jos în modelul dvs..

utilizator de clasă < 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

Concluzie

S-ar putea să doriți să luați în considerare Paperclip în timp ce construiți următoarea aplicație web. Are o echipă excelentă care o susține.

Pentru a explora alte caracteristici care nu sunt acoperite de acest tutorial, verificați pagina GitHub Paperclip.