Nella prima parte di questa serie, hai imparato a usare CarrierWave nella tua applicazione Rails. In questa seconda parte, imparerai come abilitare il caricamento delle immagini per i tuoi utenti usando Devise. Devise è una soluzione di autenticazione per Rails. Imparerai anche come utilizzare fog, una libreria di servizi cloud di Ruby che consentirà alla tua applicazione di connettersi ad Amazon Web Services.
Basta chiacchiere ... Andiamo al lavoro.
Genera la tua nuova applicazione per i binari:
rails rails new myapp
Apri il tuo Gemfile
e aggiungi le seguenti gemme:
"binari Gemfile
gemma carrierwave gemma devise gemma mini_magick gemma nebbia "
Correre installazione bundle
installare le gemme.
Dal tuo terminale, crea a Controller di pagine
:
rotaie rotaie g controller Indice pagine
Navigare verso config / routes.rb
e aggiungi un percorso di root:
"binari config / routes.rb
root to: 'pages # index "
La funzione di caricamento verrà integrata nel nostro modello Utente per consentire agli utenti di caricare avatar. Dal tuo terminale, installa idea:
le rotaie dei binari generano escogitare: installa
Il generatore installerà un inizializzatore che descrive tutti delle opzioni di configurazione di Devise. Aprire app / views / layout / application.html.erb
nel tuo editor di testo e aggiungi il seguente codice sopra il dare la precedenza
bloccare:
"binari app / views / layout / application.html.erb
<%= notice %>
<%= alert %>
"
A questo punto puoi generare il tuo modello utente:
le rotaie di rotaie generano l'utente devise
Quindi, migrare il database:
rails rake db: migrate
Dovrai modificare le viste di creazione, quindi è importante che tu le generi:
rails rails generano devise: views
E quello farà la magia.
Usando il tuo editor di testo, apri app / views / ideare / iscrizioni / new.html.erb
e modificalo per assomigliare a questo:
"binari app / views / ideare / iscrizioni / new.html.erb
<%= form_for(resource, as: resource_name, url: registration_path(resource_name), :html => multipart:: true) do | f | %> <%= devise_error_messages! %>
<%= f.label :email %><% end %>
<%= render “devise/shared/links” %>"
Fai lo stesso per app / views / ideare / iscrizioni / edit.html.erb
:
"binari app / views / ideare / iscrizioni / edit.html.erb
<%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: method: :put, multipart: :true ) do |f| %> <%= devise_error_messages! %>
<%= f.label :email %><% if devise_mapping.confirmable? && resource.pending_reconfirmation? %>
<% if current_user.avatar.url.present? %> <%= image_tag(current_user.avatar.url) %> <%= f.label :remove_avatar do %> <%= f.check_box :remove_avatar %> <% end %> <% end %> <%= f.file_field :avatar %> <%= f.hidden_field :avatar_cache %>
<%= f.label :current_password %> (abbiamo bisogno della tua password corrente per confermare le modifiche)<% end %>
Infelice? <%= button_to "Cancel my account", registration_path(resource_name), data: confirm: "Are you sure?" , method: :delete %>
<%= link_to “Back”, :back %>"
Fatto ciò, dovrai inserire nella whitelist avatar per ideare e aggiungere una colonna avatar alla tabella User. Dal tuo terminale, esegui la migrazione per aggiungere una nuova colonna avatar.
"binari
rails g migration add_avatar_to_users avatar: string rake db: migrate "
Aggiungi l'avatar CarrierWave al tuo modello utente: il tuo modello dovrebbe assomigliare a questo:
"binari modelli / user.rb
utente di classe < ActiveRecord::Base mount_uploader :avatar, AvatarUploader
escogitare: database_authenticatable,: registrabile,: recuperabile,: memorizzabile,: rintracciabile,: validabile
# User Avatar Validation validates_integrity_of: avatar validates_processing_of: avatar
private def avatar_size_validation errors [: avatar] "" dovrebbe essere inferiore a 500 KB "if avatar.size> 0.5.megabytes end end"
Nel codice precedente, hai aggiunto un mount_uploader
linea nella parte superiore del Utente
classe. C'è anche una convalida per verificare l'integrità e l'elaborazione dell'avatar, insieme a un metodo per garantire che non venga caricata alcuna immagine superiore a 500 KB.
Devi aggiungere avatar
, avatar_cache
, e remove_avatar
alla lista di attributi accessibili. Fare questo è facile, basta aprire il tuo application_controller.rb
e fai in modo che assomigli a questo:
"binari app / controllers / application_controller.rb
classe 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?
protetta
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,: avatar_cache,: remove_avatar) end end "
Fatto questo, sei pronto per l'integrazione CarrierWave
.
Usando il tuo editor di testo, vai a config / inizializzatori
e creare un file chiamato carrier_wave.rb
. Incolla nel codice qui sotto:
rails *** config / initializers / carrier_wave.rb ***
le rotaie richiedono 'carrierwave / orm / activerecord'
Questo è l'inizializzatore necessario per caricare CarrierWave dopo ActiveRecord.
Dal tuo terminale, genera un uploader:
rails rails generano uploader Avatar
Questo creerà una nuova directory chiamata uploader nella cartella dell'app e un file all'interno chiamato avatar_uploader.rb
. Ho modificato il contenuto del file per assomigliare a quello che ho di seguito:
"binari
app / uploaders / avatar_uploader.rb
classe AvatarUploader < CarrierWave::Uploader::Base
includere CarrierWave :: MiniMagick
# Scegli il tipo di spazio di archiviazione da utilizzare per questo uploader: archiviazione: nebbia
# Sostituisce la directory in cui verranno archiviati i file caricati. # Questa è un'impostazione predefinita per gli uploader che devono essere montati: def store_dir "uploads / # model.class.to_s.underscore / # mounted_as / # model.id" fine
# Crea diverse versioni dei tuoi file caricati: versione: thumb do process: resize_to_fill => [100, 100] end
versione: medium do process: resize_to_fill => [300, 300] end
versione: small do process: resize_to_fill => [140, 140] end
# Aggiungi una lista bianca di estensioni che possono essere caricate. # Per le immagini potresti usare qualcosa di simile: def extension_white_list% w (jpg jpeg gif png) end end "
Hai bisogno di MiniMagick
linea per generare versioni diverse di un'immagine. Ho incluso tre versioni di immagini. MiniMagick rende possibile il ridimensionamento in questa versione. L'ultimo blocco di codice garantisce che non vengano caricate estensioni di file diverse da quelle elencate qui.
Per questo tutorial, caricheremo le nostre immagini su Amazon Web Services. Se non hai ancora un account, vai alla pagina di registrazione e crea un account gratuito.
Al termine, dovrai creare un bucket per archiviare le tue immagini. Quando sei lì, scegli Crea un secchio per aprire la finestra di dialogo. Inserisci un nome per il bucket e seleziona una regione. Al termine, selezionare Creare.
Apri il tuo Gemfile e aggiungi questa gemma, e installazione bundle
quando fatto.
rotaie gemma 'figaro'
Dal tuo terminale, corri bundle exec figaro install
. Questo creerà un nuovo file config / application.yml
e aggiungilo alle applicazioni .gitignore
. Hai bisogno di questo file per mantenere sicuri l'ID di accesso AWS e la chiave segreta.
Per trovare l'ID di accesso AWS e la chiave segreta, vai su Amazon Web Services e fai clic sul nome del tuo account, che si trova nell'angolo destro della console.
Dal menu a discesa, selezionare Credenziali di sicurezza, e fare clic su Continua con le credenziali di sicurezza pulsante. Nella pagina che mostra, seleziona Tasti di accesso (ID chiave di accesso e chiave di accesso segreta). Clicca sul Crea una nuova chiave di accesso per generare una nuova chiave e copiarla in un editor.
Nel tuo editor di testo, vai a config / application.yml
e incollare quanto segue:
"binari config / application.yml
aws_access_id: Inserisci access_id qui aws_access_secret_key: inserisci access_key qui "
Sostituire le linee come indicato sopra.
Navigare verso config / inizializzatori
, crea un file chiamato storage.rb
, e incollare quanto segue:
"binari config / inizializzatori / storage.rb
CarrierWave.configure do | config | config.storage =: fog config.fog_credentials = provider: 'AWS', aws_access_key_id: ENV ["aws_access_id"], aws_secret_access_key: ENV ["aws_access_secret_key"], regione: 'us-west-2' config.fog_directory = " tutsplus-avatar "config.fog_public = false end"
Secondo la configurazione di cui sopra, la regione per il mio secchio è noi-ovest-2
, e il nome del secchio è tutsplus-avatar
. Sostituiscilo con informazioni sul tuo secchio.
Avvia il tuo rails server
e indica il tuo browser a http: // localhost: 3000 / utenti / sign_up
.
Nella tua applicazione, potresti voler impostare un avatar predefinito per gli utenti che scelgono di non caricare un avatar. Fare questo è facile.
Crea una cartella in app / attività / immagini
chiamato ricaderci
e rilasciare l'immagine predefinita al suo interno. Usando il tuo editor di testo, vai a app / uploaders / avatar_uploader.rb
e incolla nel codice qui sotto:
"binari app / uploaders / avatar_uploader.rb
def default_url (* args) ActionController :: Base.helpers.asset_path ("fallback /" + [version_name, "default-avatar.gif"]. compact.join ('_')) end "
Assicurati di cambiare default-avatar.gif
al nome della tua immagine.
Ora sai come abilitare il caricamento delle immagini per i tuoi utenti. Ciò aggiunge un'importante funzionalità all'applicazione di rotaie. Spero che tu ti sia divertito. Nella parte successiva, daremo un'occhiata a PaperClip. Il tuo feedback è il benvenuto.