codifica utf-8

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.

Impostazione dell'applicazione Rails

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 "

Genera e configura Devise

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

Iscriviti

<%= 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 %> caratteri minimi) <% end %>
<%= f.password_field :password, autocomplete: "off" %> <%= f.label :password_confirmation %>
<%= f.password_field :password_confirmation, autocomplete: "off" %> <%= f.label :avatar do %> <%= f.file_field :avatar %> <%= f.hidden_field :avatar_cache %> <% end %> <%= f.submit "Sign up" %>

<% end %>

<%= render “devise/shared/links” %>"

Fai lo stesso per app / views / ideare / iscrizioni / edit.html.erb:

"binari app / views / ideare / iscrizioni / edit.html.erb

modificare <%= resource_name.to_s.humanize %>

<%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: method: :put, multipart: :true ) do |f| %> <%= devise_error_messages! %>

<%= f.label :email %>
<%= f.email_field :email, autofocus: true %>

<% if devise_mapping.confirmable? && resource.pending_reconfirmation? %>

Conferma attualmente in attesa di: <%= resource.unconfirmed_email %>
<% end %>

<%= f.label :password %> (lascia vuoto se non vuoi cambiarlo)
<%= f.password_field :password, autocomplete: "off" %> <%= f.label :password_confirmation %>
<%= f.password_field :password_confirmation, autocomplete: "off" %>

<% 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)
<%= f.password_field :current_password, autocomplete: "off" %> <%= f.submit "Update" %>

<% end %>

Cancellare il mio account

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.

Impostazione di 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

codifica: utf-8

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.

Impostazione AWS

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.

Impostazione di un avatar predefinito

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.

Conclusione

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.