Rails Image Upload Utilizzo di Dragonfly

Il caricamento dei file è una funzionalità importante nelle applicazioni web. Oltre a consentire agli utenti di caricare le foto del profilo, l'uso delle funzionalità di caricamento dei file varia. Ti ho mostrato come abilitare il caricamento dei file nella tua applicazione Rails usando gemme diverse. Oggi ti mostrerò come fare lo stesso usando Dragonfly.

Dragonfly è una gemma Ruby altamente personalizzabile per la gestione di immagini e altri allegati ed è già in uso su migliaia di siti Web.

Potresti ricevere un compito per abilitare il caricamento di file in un'applicazione Rails e potresti non voler utilizzare le altre gemme che sono là fuori. Puoi dare una possibilità a Dragonfly e sicuramente non te ne pentirai.

In questo tutorial creerai una semplice applicazione Rails; Ho chiamato il mio Dragon-Uploader. L'applicazione avrà solo una funzione: il caricamento delle immagini.

Installazione di ImageMagick

Per usare libellula, hai bisogno di ImageMagick installato sul tuo computer. Segui una delle seguenti procedure, a seconda del tuo sistema operativo.

Utenti Mac:

brew install imagemagick

Utenti di Ubuntu:

sudo apt-get install imagemagick

Generazione di applicazioni Rails

rota nuovo dragon-uploader -T

Il -T l'opzione garantisce che l'applicazione Rails sia generata senza la suite di test predefinita.

Vai al tuo Gemfile e aggiungi il libellula gemma.

#Gemfile gemma 'libellula', '~> 1.0', '> = 1.0.12'

Non dimenticare di impacchettare.

installazione bundle

Generiamo il nostro controller.

le rotaie generano le foto del controller

Integrazione Dragonfly

Il primo passo per integrare Dragonfly nell'applicazione Rails è eseguire il comando di generazione della libellula dal tuo terminale.

rotaie generano libellula

Questo creerà un file di inizializzazione per Dragonfly nel tuo config / inizializzatori cartella.

Il file ha il seguente aspetto:

# config / intializers / dragonfly.rb richiede 'dragonfly' # Configura Dragonfly.app.configure do plug-in: imagemagick secret "e83b8affbf1c807c7788c07d27e70e79fb0459f8e2c4375b59e60a3da11631e5" url_format "/ media /: lavoro /: nome" archivio dati: file, root_path: Rails.root.join ( 'public / system / dragonfly', Rails.env), server_root: Rails.root.join ('pubblico') end # Logger Dragonfly.logger = Rails.logger # Monta come middleware Rails.application.middleware.use Dragonfly :: Middleware # Aggiungi funzionalità del modello se definito? (ActiveRecord :: Base) ActiveRecord :: Base.extend Dragonfly :: Modello ActiveRecord :: Base.extend Dragonfly :: Modello :: Validazioni fine

rotaie generano foto modello

# app / models / photo.rb class Photo < ActiveRecord::Base dragonfly_accessor :image end

Dragonfly fornisce un accessorio che è necessario aggiungere al modello. Con questo puoi leggere e scrivere immagini.

Ora vai al tuo file di migrazione e aggiungi colonne.

# xxx_create_photos.rb class CreatePhotos < ActiveRecord::Migration def change create_table :photos do |t| t.string :image_uid t.string :title t.timestamps null: false end end end

Nota: se stai facendo uso di avatar e non Immagine come ho fatto sopra, dovresti cambiare la colonna in avatar_uid.

Migrazione del database:

rake db: migrate

Configura il tuo PhotosController con le azioni necessarie per caricare un'immagine. Dovrebbe sembrare come questo:

# app / controller / photos_controller.rb class PhotosController < ApplicationController def index @photos = Photo.all end def new @photo = Photo.new end def create @photo = Photo.new(photo_params) if @photo.save redirect_to photos_path else render :new end end private def photo_params params.require(:photo).permit(:image, :title) end end

Dovrai configurare i tuoi percorsi.

Per ora, aggiungi percorsi alle tre azioni che hai creato.

# config / routes.rb Rails.application.routes.draw do resource: solo foto: [: index,: new,: create] root to: "photos # index" fine

È necessario impostare le visualizzazioni come ho di seguito:

# App / views / foto / index.html.erb Fotografie
 <%= notice %>
  <% @photos.each do |photo| %>  <% end %>    Titolo  Immagine   
 
  <%= photo.title %>  <%= link_to image_tag(photo.image.thumb('100x100').url), photo.image.url %>  <%= link_to 'Show', photo %>  <%= link_to 'Edit', edit_photo_path(photo) %>  <%= link_to 'Destroy', photo, method: :delete, data:  confirm: 'Are you sure?'  %>

Titolo	Immagine
<%= photo.title %>	<%= link_to image_tag(photo.image.thumb('100x100').url), photo.image.url %>	<%= link_to 'Show', photo %>	<%= link_to 'Edit', edit_photo_path(photo) %>	<%= link_to 'Destroy', photo, method: :delete, data: confirm: 'Are you sure?' %>

# App / views / foto / new.html.erb <%= form_for @photo do |f| %>  <%= f.label :title %> <%= f.text_field :title %> 
  <%= f.label :image %> <%= f.file_field :image %> 
  <%= f.submit :submit %> 
 <% end %>

Torneremo su queste opinioni in seguito.

Validazioni

Per motivi di sicurezza, non si vuole garantire ai propri utenti il privilegio di caricare file di qualsiasi tipo. Dragonfly ti fornisce i metodi necessari per questo nei tuoi inizializzatori.

# config / initializers / dragonfly.rb # Aggiungi funzionalità del modello se definito? (ActiveRecord :: Base) ActiveRecord :: Base.extend Dragonfly :: Modello ActiveRecord :: Base.extend Dragonfly :: Modello :: Validazioni fine

Ora modifica il tuo modello di foto per assomigliare a quello che ho qui sotto:

# app / models / photo.rb class Photo < ActiveRecord::Base dragonfly_accessor :image #title validation validates_presence_of :title #image validations validates_presence_of :image validates_size_of :image, maximum: 400.kilobytes, message: "should not be more than 400KB", if: :image_changed? validates_property :format, of: :image, in: ['jpeg', 'png', 'gif'], message: "the formats allowed are: .jpeg, .png, .gif", if: :image_changed? end

Ecco una lista completa delle validazioni offerte da Dragonfly:

classe Foto estende Dragonfly :: Modello :: Validazioni validates_presence_of: image validates_size_of: image, maximum: 500.kilobytes # Controlla l'estensione del file validates_property: ext, of:: image, come: 'jpg' # ... o ... validates_property: mime_type, of :: image, come: 'image / jpeg' # ... o effettivamente analizza il formato con imagemagick ... validates_property: format, of:: image, in: ['jpeg', 'png', 'gif'] validates_property: width, of :: image, in: (0 ... 400), messaggio: "é demais cara!" # ... o potresti voler usare image_changed? metodo ... validates_property: format, of:: image, come: 'png', if:: image_changed? fine

Puoi leggere maggiori informazioni nella documentazione di Dragonfly.

Dovresti anche considerare di dare ai tuoi utenti la possibilità di modificare le loro immagini salvate. Per fare ciò, dobbiamo aggiungere due metodi di azione al nostro PhotosController e creare una pagina di modifica nelle nostre visualizzazioni. Potresti voler aggiungere l'eliminazione e mostrare l'azione mentre ci sei, come ho di seguito:

# app / controller / photos_controller.rb class PhotosController < ApplicationController before_action :set_photos, only: [:show, :edit, :update, :destroy] def index @photos = Photo.all end def new @photo = Photo.new end def create @photo = Photo.new(photo_params) if @photo.save redirect_to @photo else render :new end end def show end def edit end def update if @photo.update(photo_params) redirect_to @photo, notice: "photo successfully updated" else render :edit end end def destroy @photo.destroy redirect_to photos_url, notice: 'photo was successfully destroyed.' end private def photo_params params.require(:photo).permit(:image, :title) end def set_photos @photo = Photo.find(params[:id]) end end

# App / views / foto / edit.html.erb <%= form_for @photo do |f| %> <% if @photo.errors.any? %>  <%= pluralize(@photo.errors.count, "error") %> vietato il salvataggio di questa foto:
  <% @photo.errors.full_messages.each do |message| %> <%= message %>
 <% end %> 
 
 <% end %>  <%= f.label :title %> <%= f.text_field :title %> 
  <%= f.label :image %> <%= f.file_field :image %> 
  <%= f.submit :submit %> 
 <% end %> <%= link_to "Show", @photo %> | <%= link_to "Back", photos_path %>

# App / views / foto / show.html.erb  Titolo: <%= @photo.title %> 
  Immagine: <%= image_tag @photo.image.thumb('400x200#').url if @photo.image_stored? %> 
 <%= link_to 'Edit', edit_photo_path(@photo) %> | <%= link_to 'Back', photos_path %>

Se si tenta di accedere allo spettacolo o alla pagina di modifica, verranno visualizzati degli errori. Questo perché abbiamo limitato la rotta a : nuovo,: indice e: aggiornamento. Ora vai avanti e cambia questo; Dovrebbe sembrare come questo:

# config / routes.rb Rails.application.routes.draw fa risorse: foto root a: "foto # indice" fine

Conclusione

A questo punto, è ora possibile integrare Dragonfly nell'applicazione Rails. Assicurati di controllare la documentazione se vuoi provare più funzioni non menzionate qui. Spero ti sia piaciuto.

Ricorda, puoi sempre aggiungere feedback, domande e commenti nel modulo sottostante.

Codice