Rails Bildeopplasting ved hjelp av Dragonfly

Filopplasting er en viktig funksjon i webapplikasjoner. Bortsett fra at brukerne kan laste opp profilbilder, varierer bruken av filopplastingsfunksjoner. Jeg har vist deg hvordan du aktiverer filopplasting i din Rails-applikasjon ved hjelp av forskjellige edelstener. I dag vil jeg vise deg hvordan du gjør det samme ved hjelp av Dragonfly.

Dragonfly er en svært tilpassbar Ruby perle for håndtering av bilder og andre vedlegg og er allerede i bruk på tusenvis av nettsteder.

Du kan få en oppgave for å aktivere filopplasting i et Rails-program, og kan ikke bruke de andre edelstenene som er der ute. Du kan gi Dragonfly et skudd, og du vil definitivt ikke angre på det.

I denne opplæringen vil du opprette en enkel Rails applikasjon; Jeg heter min Dragon-Uploader. Søknaden har bare en funksjon: bildeopplasting.

Installere ImageMagick

For å bruke dragonfly, trenger du ImageMagick installert på maskinen din. Følg noen av trinnene nedenfor, avhengig av operativsystemet.

Mac-brukere:

brygge installasjon imagemagick

Ubuntu brukere:

sudo apt-get install imagemagick

Rails Application Generation

skinner nye drageopplasteren -T

De -T alternativet sikrer at søknaden din Rails blir generert uten standard testing suite.

Gå til din Gemfile og legg til dragonfly perle.

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

Ikke glem å pakke.

bunt installasjon

La oss generere vår kontroller.

skinner genererer kontroller Bilder

Integrerer Dragonfly

Det første trinnet for å integrere Dragonfly i din Rails-applikasjon er å drive kommandoen Dragonfly Generation fra din terminal.

skinner genererer dragonfly

Dette vil opprette en initialiseringsfil for Dragonfly i din config / initializers mappe.

Filen ser slik ut:

# config / intializers / dragonfly.rb krever "dragonfly.rb krever" dragonfly "# Konfigurer Dragonfly.app.configure gjør plugin: imagemagick secret" e83b8affbf1c807c7788c07d27e70e79fb0459f8e2c4375b59e60a3da11631e5 "url_format" / media /: jobb /: navn "datastore: file, root_path: Rails.root.join 'public / system / dragonfly', Rails.env), server_root: Rails.root.join ('public') slutt # Logger Dragonfly.logger = Rails.logger # Monter som middleware Rails.application.middleware.use Dragonfly :: Middleware # Legg til modellfunksjonalitet hvis definert? (ActiveRecord :: Base) ActiveRecord :: Base.extend Dragonfly :: Modell ActiveRecord :: Base.extend Dragonfly :: Modell :: Validations end

skinner generere modellfoto

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

Dragonfly gir en accessor som du må legge til i din modell. Med dette kan du lese og skrive bilder.

Gå nå til din overføringsfil og legg til kolonner.

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

Merk: Hvis du bruker avatar og ikke bilde Som jeg gjorde ovenfor, bør du endre kolonnen til avatar_uid.

Migrere databasen din:

rake db: migrere

Sett opp din PhotosController med nødvendige tiltak for å laste opp et bilde. Det skal se slik ut:

# app / controllers / photos_controller.rb klasse 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å konfigurere ruter.

For nå legger du til ruter til de tre handlingene du har opprettet.

# config / routes.rb Rails.application.routes.draw do resource: bare bilder: [: index,: new,: create] root til: "bilder # index" slutten

Du må sette opp dine synspunkter som jeg har under:

# App / visninger / bilder / index.html.erb Bilder
 <%= notice %>
  <% @photos.each do |photo| %>  <% end %>    Tittel  Bilde   
 
  <%= 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?'  %>

Tittel	Bilde
<%= 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 / visninger / 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 tilbake til disse visningene senere.

valideringer

For sikkerhetsformål ønsker du ikke å gi brukerne rett til å laste opp filer av noe slag. Dragonfly gir deg de nødvendige metodene for dette i dine initiativer.

# config / initializers / dragonfly.rb # Legg til modellfunksjonalitet hvis definert? (ActiveRecord :: Base) ActiveRecord :: Base.extend Dragonfly :: Modell ActiveRecord :: Base.extend Dragonfly :: Modell :: Validations end

Rediger nå bildemodellen for å se ut som jeg har under:

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

Her er en full liste over valideringene Dragonfly tilbyr:

Klasse Photo utvide Dragonfly :: Modell :: Validasjoner validates_presence_of: image validates_size_of: image, maximum: 500.kilobytes # Sjekk filtypen validates_property: ext, of:: image, as: 'jpg' # ... eller ... validates_property: mime_type, of :: image, as: 'image / jpeg' # ... eller faktisk analysere formatet med imagemagick ... validates_property: format, av:: bilde, i: ['jpeg', 'png', 'gif'] validates_property: width :: bilde, i: (0 ... 400), melding: "é demais cara!" # ... eller du vil kanskje bruke image_changed? metode ... validates_property: format, of:: image, as: 'png', hvis:: image_changed? slutt

Du kan lese mer om det i Dragonfly-dokumentasjonen.

Du bør også vurdere å gi brukerne muligheten til å redigere sine lagrede bilder. For å gjøre dette må vi legge til to handlingsmetoder til vår PhotosController og lag en redigeringsside i våre synspunkter. Du vil kanskje legge til slett og vis handlingen mens du er på det, som jeg har under:

# app / controllers / photos_controller.rb klasse 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 / visninger / bilder / edit.html.erb <%= form_for @photo do |f| %> <% if @photo.errors.any? %>  <%= pluralize(@photo.errors.count, "error") %> forbyr dette bildet fra å bli lagret:
  <% @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 / visninger / bilder / show.html.erb  Tittel: <%= @photo.title %> 
  Bilde: <%= image_tag @photo.image.thumb('400x200#').url if @photo.image_stored? %> 
 <%= link_to 'Edit', edit_photo_path(@photo) %> | <%= link_to 'Back', photos_path %>

Hvis du prøver å få tilgang til showet eller redigere siden, vil du bli presentert med feil. Dette skyldes at vi begrenset ruten til : Ny,: Indeks, og: Oppdater. Gå nå og endre det; det skal se slik ut:

# config / routes.rb Rails.application.routes.draw gjør ressurser: bilder rot til: "bilder # index" slutten

Konklusjon

På dette punktet kan du nå integrere Dragonfly i din Rails-applikasjon. Pass på å sjekke ut dokumentasjonen hvis du vil prøve flere funksjoner som ikke er nevnt her. jeg håper du likte det.

Husk at du alltid kan legge til tilbakemelding, spørsmål og kommentarer i skjemaet nedenfor.

Kode