Rails Bildöverföring med hjälp av Dragonfly

Filuppladdning är en viktig funktion i webbapplikationer. Förutom att användarna kan ladda upp profilbilder varierar användningen av filuppladdningsfunktioner. Jag har visat dig hur du aktiverar filuppladdning i din Rails-applikation med olika pärlor. Idag kommer jag att visa dig hur du gör detsamma med Dragonfly.

Dragonfly är en mycket anpassningsbar Ruby pärla för hantering av bilder och andra bilagor och används redan på tusentals webbplatser.

Du kan få en uppgift att aktivera filuppladdning i en Rails-applikation och kanske inte vill använda de andra pärlorna som finns där ute. Du kan ge Dragonfly ett skott, och du kommer definitivt inte ångra det.

I denna handledning skapar du en enkel Rails applikation; Jag heter min Dragon-Uploader. Applikationen har bara en funktion: bilduppladdning.

Installera ImageMagick

För att använda slända måste du ha ImageMagick installerad på din maskin. Följ något av stegen nedan, beroende på operativsystem.

Mac-användare:

brygga installera imagemagick

Ubuntu-användare:

sudo apt-get install imagemagick

Rails Application Generation

spårar nya dragon-uppladdare -T

De -T Alternativet säkerställer att din Rails-applikation genereras utan standard testpaket.

Gå till din Gemfile och lägg till trollslända pärla.

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

Glöm inte att buntas.

buntinstallation

Låt oss generera vår controller.

skenor genererar kontroller Bilder

Integrerande Dragonfly

Det första steget för att integrera Dragonfly i din Rails-applikation är att köra släde generationens kommando från din terminal.

skenor generera slända

Detta skapar en initialiseringsfil för Dragonfly i din config / initializers mapp.

Filen ser så här ut:

# config / intializers / dragonfly.rb kräver "slända" # Konfigurera Dragonfly.app.configure plugin: imagemagick secret "e83b8affbf1c807c7788c07d27e70e79fb0459f8e2c4375b59e60a3da11631e5" url_format "/ media /: jobb /: namn" datastore: file, root_path: Rails.root.join 'public / system / dragonfly', Rails.env), server_root: Rails.root.join ('public') slut # Logger Dragonfly.logger = Rails.logger # Montera som middleware Rails.application.middleware.use Dragonfly :: Middleware # Lägg till modellfunktionalitet om den definieras? (ActiveRecord :: Base) ActiveRecord :: Base.extend Dragonfly :: Modell ActiveRecord :: Base.extend Dragonfly :: Modell :: Validations end

skenor generera modellfoto

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

Dragonfly ger en accessor som du måste lägga till i din modell. Med detta kan du läsa och skriva bilder.

Navigera nu till din migrationsfil och lägg till kolumner.

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

Obs! Om du använder avatar och inte bild Som jag gjorde ovan, bör du ändra kolumnen till avatar_uid.

Migrera din databas:

rake db: migrera

Ställ in din PhotosController med nödvändiga åtgärder för att ladda upp en bild. Det ska se ut så här:

# app / controllers / photos_controller.rb klass 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

Du måste konfigurera dina rutter.

För nu lägg till rutter till de tre åtgärderna du har skapat.

# config / routes.rb Rails.application.routes.draw gör resurs: endast foton: [: index,: new,: skapa] root till: "foton # index" slutet

Du måste ställa in dina synpunkter som jag har nedan:

# App / vyer / bilder / index.html.erb foton
 <%= notice %>
  <% @photos.each do |photo| %>  <% end %>    Titel  Bild   
 
  <%= 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?'  %>

Titel	Bild
<%= 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 / vyer / bilder / 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 %>

Vi kommer senare tillbaka till dessa synpunkter.

valideringar

Av säkerhetsskäl vill du inte ge dina användare rätt att ladda upp filer av någon typ. Dragonfly ger dig de nödvändiga metoderna för detta i dina initialisatorer.

# config / initializers / dragonfly.rb # Lägg till modellfunktionalitet om den definieras? (ActiveRecord :: Base) ActiveRecord :: Base.extend Dragonfly :: Modell ActiveRecord :: Base.extend Dragonfly :: Modell :: Validations end

Redigera nu din fotomodell för att se ut som vad jag har nedan:

# app / models / photo.rb klassfoto < 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

Här är en fullständig lista över valideringarna Dragonfly erbjuder:

klass Photo extend Dragonfly :: Modell :: Valideringar validates_presence_of: image validates_size_of: image, maximum: 500.kilobytes # Kontrollera filförlängningen validates_property: ext, of:: image, as: 'jpg' # ... eller ... validates_property: mime_type :: image, as: 'image / jpeg' # ... eller faktiskt analysera formatet med imagemagick ... validates_property: format, av:: bild, i: ['jpeg', 'png', 'gif'] validates_property: width :: bild, i: (0 ... 400), meddelande: "é demais cara!" # ... eller kanske du vill använda image_changed? metod ... validates_property: format, av:: bild, som: 'png', om:: image_changed? slutet

Du kan läsa mer om det i Dragonfly-dokumentationen.

Du bör också överväga att ge dina användare möjlighet att redigera sina sparade bilder. För att göra detta måste vi lägga till två åtgärdsmetoder till vår PhotosController och skapa en redigeringssida i våra synpunkter. Du kanske vill lägga till radera och visa åtgärden medan du är på den, som jag har nedan:

# app / controllers / photos_controller.rb klass 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 / vyer / bilder / edit.html.erb <%= form_for @photo do |f| %> <% if @photo.errors.any? %>  <%= pluralize(@photo.errors.count, "error") %> förbjudet att detta foto sparas:
  <% @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 / vyer / bilder / show.html.erb  Titel: <%= @photo.title %> 
  Bild: <%= image_tag @photo.image.thumb('400x200#').url if @photo.image_stored? %> 
 <%= link_to 'Edit', edit_photo_path(@photo) %> | <%= link_to 'Back', photos_path %>

Om du försöker komma åt visningen eller redigera sidan kommer du att presenteras med fel. Detta beror på att vi begränsat vägen till : nytt, index och uppdatering. Gå nu och ändra det; det ska se ut så här:

# config / routes.rb Rails.application.routes.draw gör resurser: foton rotera till: "foton # index" slutet

Slutsats

Vid denna tidpunkt kan du nu integrera Dragonfly i din Rails applikation. Var noga med att kolla in dokumentationen om du vill försöka fler funktioner som inte nämns här. Jag hoppas att du tyckte om det.

Kom ihåg att du alltid kan lägga till feedback, frågor och kommentarer i formuläret nedan.

Koda