Rails Image Upload met Dragonfly

Bestand uploaden is een belangrijke functie in webapplicaties. Naast het inschakelen van gebruikers om profielfoto's te uploaden, varieert het gebruik van functies voor het uploaden van bestanden. Ik heb je laten zien hoe je het uploaden van bestanden in je Rails-applicatie met behulp van verschillende edelstenen kunt inschakelen. Vandaag zal ik je laten zien hoe je hetzelfde kunt doen met Dragonfly.

Dragonfly is een zeer aanpasbare Ruby-edelsteen voor het verwerken van afbeeldingen en andere bijlagen en wordt al op duizenden websites gebruikt.

Mogelijk krijgt u een taak om het uploaden van bestanden in een Rails-toepassing mogelijk te maken en misschien wilt u geen gebruik maken van de andere edelstenen die er zijn. Je kunt Dragonfly een kans geven en je zult er zeker geen spijt van krijgen.

In deze tutorial maakt u een eenvoudige Rails-applicatie; Ik heb mijn Dragon-Uploader genoemd. De toepassing heeft slechts één functie: het uploaden van afbeeldingen.

ImageMagick installeren

Om Dragonfly te gebruiken, moet ImageMagick op uw computer zijn geïnstalleerd. Volg een van de onderstaande stappen, afhankelijk van uw besturingssysteem.

Mac-gebruikers:

zet imagemagick in voor installatie

Ubuntu-gebruikers:

sudo apt-get install imagemagick

Rails applicatie-generatie

rails nieuwe draken-oplader -T

De -T optie zorgt ervoor dat uw Rails-applicatie wordt gegenereerd zonder het standaard testsuite.

Ga naar je Gemfile en voeg de libel edelsteen.

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

Vergeet niet te bundelen.

bundel installeren

Laten we onze controller genereren.

rails genereren controller Foto's

Dragonfly integreren

De eerste stap om Dragonfly in uw Rails-toepassing te integreren, is het uitvoeren van de opdracht voor het genereren van libellen vanaf uw terminal.

rails genereren libelle

Dit maakt een initialisatiebestand voor Dragonfly in uw config / initialiseerders map.

Het bestand ziet er als volgt uit:

# config / intializers / dragonfly.rb vereisen 'dragonfly' # Configureer Dragonfly.app.configure do plugin: imagemagick secret "e83b8affbf1c807c7788c07d27e70e79fb0459f8e2c4375b59e60a3da11631e5" url_format "/ media /: job /: naam" datastore: file, root_path: Rails.root.join ( 'public / system / dragonfly', Rails.env), server_root: Rails.root.join ('public') end # Logger Dragonfly.logger = Rails.logger # Zet als middleware Rails.application.middleware.use Dragonfly :: Middleware # Modelfunctionaliteit toevoegen indien gedefinieerd? (ActiveRecord :: Base) ActiveRecord :: Base.extend Dragonfly :: Model ActiveRecord :: Base.extend Dragonfly :: Model :: Validations end

rails genereren model Foto

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

Dragonfly biedt een accessor die u aan uw model moet toevoegen. Hiermee kunt u afbeeldingen lezen en schrijven.

Navigeer nu naar uw migratiebestand en voeg kolommen toe.

# 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

Opmerking: als u gebruik maakt van avatar en niet beeld zoals ik hierboven heb gedaan, moet je de kolom wijzigen in avatar_uid.

Migreer uw database:

rake db: migreren

Stel uw PhotosController met de nodige acties om een afbeelding te uploaden. Het zou er zo uit moeten zien:

# app / controllers / 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

U moet uw routes configureren.

Voeg voor nu routes toe aan de drie acties die u hebt gemaakt.

# config / routes.rb Rails.application.routes.draw do resource: alleen foto's: [: index,: new,: create] root to: "photos # index" end

U moet uw meningen instellen zoals ik hieronder heb:

# App / views / foto's / index.html.erb foto's
 <%= notice %>
  <% @photos.each do |photo| %>  <% end %>    Titel  Beeld   
 
  <%= 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	Beeld
<%= 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's / 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 %>

We komen later hierop terug.

validaties

Om veiligheidsredenen wilt u uw gebruikers niet het privilege geven om bestanden van welk type dan ook te uploaden. Dragonfly biedt u de nodige methoden hiervoor in uw initializers.

# config / initializers / dragonfly.rb # Modelfunctionaliteit toevoegen indien gedefinieerd? (ActiveRecord :: Base) ActiveRecord :: Base.extend Dragonfly :: Model ActiveRecord :: Base.extend Dragonfly :: Model :: Validations end

Bewerk nu je fotomodel om er uit te zien als wat ik hieronder heb:

# 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

Hier is een volledige lijst van de validaties die Dragonfly biedt:

class Photo extend Dragonfly :: Model :: Validations validates_presence_of: image validates_size_of: image, maximum: 500.kilobytes # Controleer de bestandsextensie validates_property: ext, of:: image, as: 'jpg' # ... of ... validates_property: mime_type, of :: image, as: 'image / jpeg' # ... of eigenlijk het formaat analyseren met imagemagick ... validates_property: format, of:: image, in: ['jpeg', 'png', 'gif'] validates_property: width, of :: image, in: (0 ... 400), message: "e demais cara!" # ... of wilt u misschien image_changed gebruiken? methode ... validates_property: format, van:: image, as: 'png', if:: image_changed? einde

Je kunt er meer over lezen in de Dragonfly-documentatie.

Je zou ook moeten overwegen om je gebruikers de mogelijkheid te bieden om hun opgeslagen afbeeldingen te bewerken. Om dit te doen, moeten we twee actiemethoden toevoegen aan onze PhotosController en maak een bewerkpagina in onze views. Misschien wil je de verwijder- en showactie toevoegen terwijl je bezig bent, zoals ik hieronder heb:

# app / controllers / 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's / edit.html.erb <%= form_for @photo do |f| %> <% if @photo.errors.any? %>  <%= pluralize(@photo.errors.count, "error") %> verboden deze foto te worden opgeslagen:
  <% @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's / show.html.erb  Titel: <%= @photo.title %> 
  Beeld: <%= image_tag @photo.image.thumb('400x200#').url if @photo.image_stored? %> 
 <%= link_to 'Edit', edit_photo_path(@photo) %> | <%= link_to 'Back', photos_path %>

Als u probeert toegang te krijgen tot de show- of bewerkpagina, krijgt u fouten te zien. Dit komt omdat we de route hebben beperkt tot : nieuw,: index en: update. Ga je gang en verander dat; het zou er zo uit moeten zien:

# config / routes.rb Rails.application.routes.draw do resources: photos root naar: "photos # index" end

Conclusie

Op dit moment kunt u Dragonfly nu integreren in uw Rails-applicatie. Bekijk de documentatie als u meer functies wilt proberen die hier niet worden genoemd. ik hoop dat je het leuk vond.

Vergeet niet dat je altijd feedback, vragen en opmerkingen kunt toevoegen in het onderstaande formulier.

Code