Rails Upload de imagini folosind Dragonfly

Încărcarea de fișiere este o caracteristică importantă în aplicațiile web. Pe lângă faptul că permite utilizatorilor să încarce imagini de profil, utilizarea funcțiilor de încărcare a fișierelor variază. V-am arătat cum să activați încărcarea fișierelor în aplicația Rails folosind pietre diferite. Astăzi vă voi arăta cum să faceți același lucru folosind Dragonfly.

Dragonfly este o bijuterie Ruby foarte personalizabilă pentru manipularea imaginilor și a altor atașamente și este deja utilizată pe mii de site-uri Web.

S-ar putea să vi se acorde o sarcină pentru a permite încărcarea fișierelor într-o aplicație Rails și poate să nu mai vrea să utilizeze celelalte pietre care sunt acolo. Puteți să-i dați Dragonfly o șansă și cu siguranță nu veți regreta.

În acest tutorial veți crea o aplicație simplă Rails; Am numit-o pe Dragon-Uploader. Aplicația va avea doar o funcție: încărcarea imaginilor.

Instalarea programului ImageMagick

Pentru a utiliza dragonfly, aveți nevoie de ImageMagick instalat pe mașina dvs. Urmați oricare dintre pașii de mai jos, în funcție de sistemul dvs. de operare.

Utilizatorii Mac:

brew instala imagemagick

Utilizatori Ubuntu:

sudo apt-get a instala imagemagick

Rails Application Generation

șine noi dragon-uploader -T

-T opțiunea asigură faptul că aplicația Rails este generată fără suita implicită de testare.

Du-te la tine Gemfile și adăugați libelulă bijuterie.

#Gemfile bijuterie dragonfly, '~> 1.0', '> = 1.0.12'

Nu uitați să legați.

instalare pachet

Să ne generăm controlorul.

șinele generează fotografii ale controlerului

Integrarea Dragonfly

Primul pas pentru integrarea Dragonfly în aplicația Rails este de a rula comanda de generare a dragonfly de la terminalul dumneavoastră.

șinele generează libelule

Acest lucru va crea un fișier inițializator pentru Dragonfly în dvs. config / initializatori pliant.

Fișierul arată astfel:

# config / intializers / dragonfly.rb necesită 'dragonfly' # Configurează Dragonfly.app.configure do plugin: imagemagick secret "e83b8affbf1c807c7788c07d27e70e79fb0459f8e2c4375b59e60a3da11631e5" url_format "/ media /: job /: nume" datastore: file_path: Rails.root.join 'public / system / dragonfly', Rails.env), root_server: Rails.root.join ('public') sfârșitul # Logger Dragonfly.logger = Rails.logger # Montați ca middleware Rails.application.middleware.use Dragonfly :: Middleware # Adăugați funcționalitatea modelului dacă este definită? (ActiveRecord :: Base) ActiveRecord :: Base.extend Dragonfly :: Modelul ActiveRecord :: Base.extend Dragonfly :: Model :: Validations end

șinele generează model foto

# app / models / photo.rb clasă Foto < ActiveRecord::Base dragonfly_accessor :image end

Dragonfly oferă un accesoriu pe care va trebui să îl adăugați la modelul dvs. Cu aceasta puteți citi și scrie imagini.

Acum, navigați la fișierul de migrare și adăugați coloane.

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

Notă: dacă utilizați Avatar si nu imagine așa cum am făcut mai sus, ar trebui să schimbați coloana avatar_uid.

Migrează baza de date:

rake db: migrați

Configurați-vă PhotosController cu acțiunile necesare pentru a încărca o imagine. Ar trebui să arate astfel:

# app / controlers / photos_controller.rb clasa 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

Va trebui să configurați rutele.

Pentru moment, adăugați rute către cele trei acțiuni pe care le-ați creat.

# config / routes.rb Rails.application.routes.draw face resursa: numai fotografii: [: index,: new,: create] root la: "photos # index" end

Trebuie să configurați opiniile dvs. așa cum am spus mai jos:

# App / opinii / fotografii / index.html.erb Fotografii
 <%= notice %>
  <% @photos.each do |photo| %>  <% end %>    Titlu  Imagine   
 
  <%= 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?'  %>

Titlu	Imagine
<%= 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 / opinii / fotografii / 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 %>

Vom reveni la aceste opinii mai târziu.

validări

Din motive de securitate, nu doriți să le acordați utilizatorilor privilegiul de a încărca fișiere de orice tip. Dragonfly vă oferă metodele necesare pentru aceasta în inițialele dvs..

# config / initializers / dragonfly.rb # Adăugați funcționalitatea modelului dacă este definită? (ActiveRecord :: Base) ActiveRecord :: Base.extend Dragonfly :: Model ActiveRecord :: Base.extend Dragonfly :: Model :: Validations end

Acum editați modelul dvs. de fotografie pentru a arăta cum am mai jos:

# app / models / photo.rb clasă Foto < 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

Iată o listă completă a validărilor oferite de Dragonfly:

Class Photo Extinde Dragonfly :: Model :: Validări validates_presence_of: image validates_size_of: image, maximum: 500.kilobytes # Verifică extensia de fișier validates_property: ext, de:: image, as: 'jpg' # ... sau ... validates_property: mime_type, of :: imagine, ca: 'image / jpeg' # ... sau de fapt, analiza formatul cu imagemagick ... validates_property: format, de:: image, in: ['jpeg', 'png', 'gif'] validates_property: :: imagine, în: (0 ... 400), mesaj: "é demais cara!" # ... sau ați putea dori să utilizați imaginea modificată? metoda ... validates_property: format, de:: image, as: 'png', dacă:: image_changed? Sfârșit

Puteți citi mai multe despre el în documentația Dragonfly.

De asemenea, trebuie să luați în considerare oferirea utilizatorilor opțiunii de a edita imaginile salvate. Pentru a face acest lucru, trebuie să adăugăm două metode de acțiune noastre PhotosController și să creați o pagină de editare în opiniile noastre. S-ar putea să doriți să adăugați acțiunea de ștergere și de afișare în timp ce vă aflați la ea, așa cum am spus mai jos:

# app / controlers / photos_controller.rb clasa 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 / opinii / fotografii / edit.html.erb <%= form_for @photo do |f| %> <% if @photo.errors.any? %>  <%= pluralize(@photo.errors.count, "error") %> a interzisă salvarea acestei fotografii:
  <% @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 / opinii / fotografii / show.html.erb  Titlu: <%= @photo.title %> 
  Imagine: <%= image_tag @photo.image.thumb('400x200#').url if @photo.image_stored? %> 
 <%= link_to 'Edit', edit_photo_path(@photo) %> | <%= link_to 'Back', photos_path %>

Dacă încercați să accesați pagina de prezentare sau de editare, vi se vor prezenta erori. Acest lucru se datorează faptului că am restricționat ruta la : noi,: index, și: actualizare. Acum mergeți mai departe și schimbați acest lucru; ar trebui să arate astfel:

# config / routes.rb Rails.application.routes.draw face resurse: fotografii rădăcină la: "photos # index" end

Concluzie

În acest moment, puteți acum integra Dragonfly în aplicația Rails. Asigurați-vă că verificați documentația dacă doriți să încercați mai multe caracteristici care nu sunt menționate aici. sper ca ti-a placut.

Rețineți că puteți oricând să adăugați feedback, întrebări și comentarii în formularul de mai jos.

Cod