Share
Filuppladdningar är i allmänhet ett knepigt område i webbutveckling. I denna handledning lär vi oss att använda Dragonfly, en kraftfull Ruby-pärla som gör det enkelt och effektivt att lägga till någon form av uppladdningsfunktionalitet till ett Rails-projekt.
Vårt exempelapplikation visar en lista över användare, och för var och en av dem kommer vi att kunna ladda upp en avatar och lagra den. Dessutom tillåter Dragonfly oss att:
I denna lektion kommer vi att följa en BDD [Behavior Driven Development] -metod med hjälp av Gurka och RSpec.
Du måste ha Imagemagick installerat: du kan hänvisa till den här sidan för binärerna att installera. Eftersom jag bygger på en Mac-plattform använder du Homebrew, jag kan helt enkelt skriva brygga installera imagemagick.
Du måste också klona en grundläggande Rails applikation som vi kommer att använda som utgångspunkt.
Vi börjar med att klona startförvaret och etablera våra beroenden:
git klon http: //[email protected]/cloud8421/tutorial_dragonfly_template.git cd tutorial_dragonfly_template
Denna applikation kräver åtminstone Ruby 1.9.2, men jag uppmanar dig att använda 1.9.3. Rails-versionen är 3.2.1. Projektet innehåller inte en .rvmrc eller a .rbenv fil.
Därefter kör vi:
bunt installera bunt exec rake db: setup db: test: förbereda db: frö
Detta kommer att ta hand om pärlaberoende och databasinstallation (vi kommer att använda sqlite, så du behöver inte oroa dig för databaskonfigurationen).
För att testa att allt fungerar som förväntat kan vi springa:
bunt exec rspec bunt exec gurka
Du bör upptäcka att alla tester har passerat. Låt oss granska gurkas produktion:
Funktion: hantera användarprofil Som användare För att hantera mina data vill jag komma åt min användarprofil sida Bakgrund: Med tanke på att en användare finns med e-postadressen "[email protected]" Scenario: visning av min profil Eftersom jag är på hemsidan När Jag följer "Profil" för "[email protected]" Då borde jag vara på profilsidan för "[email protected]" Scenario: redigering av min profil Eftersom jag är på profilsidan för "[email protected]" När Jag följer "Redigera" och jag ändrar min e-postadress med "[email protected]" och jag klickar på "Spara". Då borde jag vara på profilsidan för "[email protected]" Och jag ska se "User updated" 2 scenarier (2 passerade) 11 steg (11 passerade) 0m0.710s
Som du kan se beskriver dessa funktioner ett typiskt användarflöde: vi öppnar en användarsida från en lista, trycker på "Redigera" för att redigera användardata, ändra e-post och spara.
Försök nu att köra appen:
skenor s
Om du öppnar http :: // localhost: 3000 I webbläsaren hittar du en lista över användare (vi förfyllde databasen med 40 slumpmässiga poster tack vare Faker-pärlan).
För tillfället kommer var och en av användarna ha en liten, 16x16px avatar och en stor placeholder avatar på sin profilsida. Om du redigerar användaren kan du ändra dess uppgifter (förnamn, efternamn och lösenord), men om du försöker ladda upp en avatar sparas den inte.
Känn dig fri att bläddra i codebase: programmet använder Simple Form för att skapa formulärvyer och Twitter Bootstrap för CSS och layout, eftersom de integrerar perfekt och hjälper mycket för att påskynda prototypprocessen.
Vi börjar med att lägga till ett nytt scenario till funktioner / managing_profile.feature:
... Scenario: Lägg till en avatar Eftersom jag är på profilsidan för "[email protected]" När jag följer "Redigera" Och jag laddar upp mustaschens avatar och jag klickar på "Spara" Då borde jag vara på profilsidan för "email @ example.com "Och profilen ska visa" mustaschens avatar "
Den här funktionen är ganska självförklarande, men det kräver några ytterligare steg att lägga till funktioner / step_definitions / user_steps.rb:
Accentsconagua
... När / ^ Jag laddar upp mustaschens avatar $ / gör attach_file 'användare [avatar_image]', Rails.root + 'spec / fixtures / mustache_avatar.jpg' slut Då / ^ profilen ska visa "([^"] *) " $ / do | image | pattern = case image när "mustache avatar" / mustache_avatar / end n = Nokogiri :: HTML (page.body) n.xpath (".// img [@ class = 'thumbnail']") .first ['src']. should = ~ mönster slut Det här steget förutsätter att du har en bild som heter mustache_avatar.jpg inuti spec / fixturer. Som du kanske gissar är detta bara ett exempel; det kan vara allt du vill ha.
Det första steget använder Capybara för att hitta användaren [avatar_image] filfält och ladda upp filen. Observera att vi antar att vi kommer att ha en an avatar_image attribut på Användare modell.
Det andra steget använder Nokogiri (ett kraftfullt HTML / XML-parsing-bibliotek) och XPath för att analysera innehållet på den resulterande profilsidan och söka efter den första img tagga med a Miniatyr klass och test att src attributet innehåller mustache_avatar.
Om du kör gurka Nu kommer detta scenario att utlösa ett fel, eftersom det inte finns något filfält med namnet vi angav. Nu är det dags att fokusera på Användare modell.
Innan du integrerar Dragonfly med Användare modell, låt oss lägga till ett par specifikationer till user_spec.rb.
Vi kan lägga till ett nytt block strax efter attribut sammanhang:
context "avatar attributes" gör det should respond_to (: avatar_image) det should allow_mass_assignment_of (: avatar_image) avsluta
Vi testar att användaren har en avatar_image attribut och, eftersom vi kommer att uppdatera detta attribut via ett formulär, måste det vara tillgängligt (andra spec).
Nu kan vi installera Dragonfly: genom att göra så får vi dessa specs för att bli grön.
Låt oss lägga till följande rader i Gemfile:
pärla 'rack-cache', kräver: 'rack / cache' pärla 'dragonfly', '~> 0.9.10'
Därefter kan vi springa buntinstallation. Rack-cache behövs under utveckling, eftersom det är det enklaste alternativet att ha HTTP-caching. Det kan även användas i produktionen, även om mer robusta lösningar (som Larn eller Squid) skulle vara bättre.
Vi måste också lägga till Dragonfly initializer. Låt oss skapa config / initializers / dragonfly.rb fil och lägg till följande:
kräver "dragonfly" app = Dragonfly [: images] app.configure_with (: imagemagick) app.configure_with (: rails) app.define_macro (ActiveRecord :: Base,: image_accessor)
Det här är vaniljsländakonfigurationen: det sätter upp en Dragonfly-applikation och konfigurerar den med den nödvändiga modulen. Det lägger också till ett nytt makro till Active att vi kommer att kunna använda för att förlänga vår Användare modell.
Vi behöver uppdatera config / application.rb, och lägg till ett nytt direktiv i konfigurationen (strax före config.generators blockera):
config.middleware.insert 0, 'Rack :: Cache', verbose: true, metastore: URI.encode ("fil: # Rails.root / tmp / dragonfly / cache / meta"), affär: URI.encode ("fil: # Rails.root / tmp / dragonfly / cache / body") om inte Rails.env.production? config.middleware.insert_after 'Rack :: Cache', 'Dragonfly :: Middleware',: bilder Utan att gå i mycket detalj, sätter vi upp Rack :: Cache (förutom produktion, där den är aktiverad som standard), och inställning av Dragonfly för att använda den.
Vi lagrar våra bilder på disk, men vi behöver ett sätt att spåra föreningen med en användare. Det enklaste alternativet är att lägga till två kolumner till användartabellen med en migrering:
rails g migration add_avatar_to_users avatar_image_uid: sträng avatar_image_name: strängbunt exec rake db: migrera db: test: förbereda
Återigen är detta direkt från Dragonflys dokumentation: vi måste ha en avatar_image_uid kolumn för att unikt identifiera avatarfilen och a avatar_image_name för att lagra sitt ursprungliga filnamn (den senare kolumnen är inte absolut nödvändig, men det möjliggör generering av bildadresser som slutar med det ursprungliga filnamnet).
Slutligen kan vi uppdatera Användare modell:
klass användare < ActiveRecord::Base image_accessor :avatar_image attr_accessible :email, :first_name, :last_name, :avatar_image…
De image_accessor Metoden tillhandahålls av Dragonfly-initieraren, och det kräver bara ett attributnamn. Vi gör också samma attribut tillgängligt i raden nedan.
Löpning rspec Nu borde visa alla specifikationer grön.
För att testa uppladdningsfunktionen kan vi lägga till ett sammanhang till users_controller_spec.rb i PUT uppdatering blockera:
kontext "avatar image" laddar! (: image_file) fixture_file_upload ('/ mustache_avatar.jpg', 'image / jpg') kontext "uppladdning av en avatar" gör innan du gör: uppdatera, id: user.id, användare: avatar_image: image_file avsluta det "ska effektivt lagra bildrekordet på användaren" gör user.reload user.avatar_image_name.should = ~ / mustache_avatar / endänden slutet Vi kommer att återanvända samma fixtur och skapa en mock för uppladdningen med fixture_file_upload.
Eftersom denna funktionalitet utnyttjar Dragonfly behöver vi inte skriva kod för att få den att passera.
Vi måste nu uppdatera våra synpunkter för att visa avataren. Låt oss börja från användarvisningssidan och öppna app / views / användare / show.html.erb och uppdatera den med följande innehåll:
<% if @user.avatar_image.present? %> <%= image_tag @user.avatar_image.url, class: 'thumbnail' %> <% else %><% end %>
<%= @user.name %>
<%= @user.email %>
<%= link_to 'Edit', edit_user_path(@user), class: "btn" %>
Därefter kan vi uppdatera app / views / användare / edit.html.erb:
<%= simple_form_for @user, multipart: true do |f| %><% end %><% if @user.avatar_image.present? %> <%= image_tag @user.avatar_image.url, class: 'thumbnail' %> <% else %><%= f.input :avatar_image, as: :file %><%= f.input :first_name %> <%= f.input :last_name %> <%= f.input :email %><%= f.submit 'Save', class: "btn btn-primary" %>
Vi kan visa användarens avatar med ett enkelt samtal till @ user.avatar_image.url. Detta kommer att returnera en url till en icke-modifierad version av den avatar som laddats upp av användaren.
Om du kör gurka Nu ser du den gröna funktionen. Du kan också prova det i webbläsaren också!
Vi är implicit beroende av CSS för att ändra storlek på bilden om den är för stor för dess behållare. Det är ett skakigt förhållningssätt: vår användare kan ladda upp icke-kvadratiska avatarer eller en mycket liten bild. Dessutom serverar vi alltid samma bild, utan för mycket oro för sidstorlek eller bandbredd.
Vi behöver jobba på två olika områden: lägga till några valideringsregler till avataruppladdningen och specificera bildstorlek och förhållande med Dragonfly.
Vi börjar med att öppna user_spec.rb fil och lägga till ett nytt spec-block:
kontext "avatar attribut" gör% w (avatar_image retained_avatar_image remove_avatar_image) .each do | attr | det should respond_to (attr.to_sym) slutet% w (avatar_image retained_avatar_image remove_avatar_image) .each do | attr | det should allow_mass_assignment_of (attr.to_sym) avsluta "bör validera filstorleken för avataren" gör user.avatar_image = Rails.root + 'spec / fixtures / huge_size_avatar.jpg' user.should_not be_valid # storlek är> 100 KB avsluta det "bör validera formatet för avataren" gör user.avatar_image = Rails.root + 'spec / fixtures / dummy.txt' user.should_not be_valid slutändan
Vi testar för närvaro och tillåter "masstilldelning" för ytterligare attribut som vi ska använda för att förbättra användarformuläret (: retained_avatar_image och : remove_avatar_image).
Dessutom testar vi också att vår användarmodell inte accepterar stora uppladdningar (mer än 200 kB) och filer som inte är bilder. För båda fallen måste vi lägga till två fixturfiler (en bild med det angivna namnet och vars storlek är mer än 200 KB och en textfil med något innehåll).
Som vanligt kommer körningen av dessa specifikationer inte att få oss till grön. Låt oss uppdatera användarmodellen för att lägga till dessa valideringsregler:
... attr_accessible: email,: first_name,: last_name,: avatar_image,: retained_avatar_image,: remove_avatar_image ... validates_size_of: avatar_image, maximum: 100.kilobytes validates_property: format, av:: avatar_image, i: [: jpeg,: png, : jpg] validates_property: mime_type, av:: avatar_image, i: ['image / jpg', 'image / jpeg', 'bild / png', 'image / gif'], case_sensitive: false
Dessa regler är ganska effektiva: Observera att vi, förutom att kontrollera formatet, även kontrollerar mime-typen för bättre säkerhet. Att vara en bild tillåter vi jpg-, png- och gif-filer.
Våra specifikationer bör gå nu, så det är dags att uppdatera vyerna för att optimera bildbelastningen.
Som vanligt använder Dragonfly ImageMagick för att dynamiskt bearbeta bilder när det begärs. Förutsatt att vi har en användare Exempel i en av våra åsikter, vi kunde då:
<% end %> user.avatar_image.thumb ('100x100'). url user.avatar_image.process (: gråskala) .url Dessa metoder skapar en bearbetad version av den här bilden med en unik hash och tack vare vårt cacheringslager, kommer ImageMagick att ringas en gång per bild. Därefter serveras bilden direkt från cachen.
Du kan använda många inbyggda metoder eller helt enkelt bygga din egen, Dragonfly dokumentation har många exempel.
Låt oss återvända till användaren redigera sida och uppdatera visningskoden:
... <% if @user.avatar_image.present? %> <%= image_tag @user.avatar_image.thumb('400x400#').url, class: 'thumbnail' %> <% else %>... Vi gör samma för användaren show sida:
... <% if @user.avatar_image.present? %> <%= image_tag @user.avatar_image.thumb('400x400#').url, class: 'thumbnail' %> <% else %>... Vi tvingar bildstorleken till 400 x 400 pixlar. De # parameteren instruerar också ImageMagick att beskära bilden som håller en central gravitation. Du kan se att vi har samma kod på två ställen, så låt oss reflektera detta till en partiell kallad visningar / användare / _avatar_image.html.erb
<% if @user.avatar_image.present? %> <%= image_tag @user.avatar_image.thumb('400x400#').url, class: 'thumbnail' %> <% else %> <% end %> Då kan vi ersätta innehållet i .Miniatyr behållare med ett enkelt samtal till:
<%= render 'avatar_image' %>
Vi kan göra ännu bättre genom att flytta argumentet från tumme ut ur partiet. Låt oss uppdatera _avatar_image.html.erb:
& text = Super + cool + avatar "alt =" Super cool avatar "> <% end %>
