Rails-Bild-Upload mit Libelle

Das Hochladen von Dateien ist eine wichtige Funktion in Webanwendungen. Abgesehen davon, dass Benutzer das Hochladen von Profilbildern ermöglichen können, ist die Verwendung der Funktionen zum Hochladen von Dateien unterschiedlich. Ich habe Ihnen gezeigt, wie Sie das Hochladen von Dateien in Ihrer Rails-Anwendung mithilfe verschiedener Edelsteine aktivieren. Heute werde ich Ihnen zeigen, wie Sie das gleiche mit Dragonfly machen.

Dragonfly ist ein in hohem Maße anpassbarer Ruby-Edelstein für den Umgang mit Bildern und anderen Anhängen und wird bereits auf Tausenden von Websites verwendet.

Möglicherweise erhalten Sie eine Aufgabe, um das Hochladen von Dateien in eine Rails-Anwendung zu ermöglichen, und möchten möglicherweise nicht die anderen Edelsteine verwenden, die sich auf dem Markt befinden. Sie können Dragonfly einen Schuss geben, und Sie werden es definitiv nicht bereuen.

In diesem Lernprogramm erstellen Sie eine einfache Rails-Anwendung. Ich habe meinen Dragon-Uploader genannt. Die Anwendung hat nur eine Funktion: das Hochladen von Bildern.

ImageMagick installieren

Für die Verwendung von Libelle benötigen Sie ImageMagick, das auf Ihrem Computer installiert ist. Führen Sie je nach Betriebssystem die folgenden Schritte aus.

Mac-Benutzer:

brauen installieren imagemagick

Ubuntu-Benutzer:

sudo apt-get install imagemagick

Rails-Anwendungsgenerierung

Rails neuer Drachen-Uploader -T

Das -T Diese Option stellt sicher, dass Ihre Rails-Anwendung ohne die Standard-Testsuite generiert wird.

Gehen Sie zu Ihrem Gemfile und füge das hinzu Libelle Juwel.

#Gemfile-Edelstein 'Libelle', '~> 1.0', '> = 1.0.12'

Vergiss nicht zu bündeln.

Bundle installieren

Lassen Sie uns unseren Controller generieren.

Schienen erzeugen Controller Fotos

Libelle integrieren

Der erste Schritt zur Integration von Dragonfly in Ihre Rails-Anwendung besteht darin, den Befehl zur Erzeugung der Libelle von Ihrem Terminal aus auszuführen.

Schienen erzeugen Libelle

Dadurch wird eine Initialisierungsdatei für Dragonfly in Ihrem erstellt config / initializers Mappe.

Die Datei sieht so aus:

# config / intaiizer / draifly.rb erfordert 'dragonfly' # Konfigurieren Sie Dragonfly.app.configure do plugin: imagemagick secret "e83b8affbf1c807c7788c07d27e70e79fb0459f8e2c4375b59e60a3da11631e5" url_format "/" " 'public / system / dragonfly', Rails.env), server_root: Rails.root.join ('public') Ende # Logger Dragonfly.logger = Rails.logger # Als Middleware einbinden Rails.application.middleware.use Dragonfly :: Middleware # Modellfunktionalität hinzufügen, falls definiert? (ActiveRecord :: Base) ActiveRecord :: Base.extend Dragonfly :: Modell ActiveRecord :: Base.extend Dragonfly :: Model :: Validations end

Schienen erzeugen Modell Foto

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

Dragonfly bietet einen Accessor, den Sie Ihrem Modell hinzufügen müssen. Damit können Sie Bilder lesen und schreiben.

Navigieren Sie nun zu Ihrer Migrationsdatei und fügen Sie Spalten hinzu.

# 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

Hinweis: Wenn Sie Gebrauch machen Benutzerbild und nicht Bild Wie oben beschrieben, sollten Sie die Spalte in ändern avatar_uid.

Migrieren Sie Ihre Datenbank:

rake db: migrieren

Richten Sie Ihre ein PhotosController mit den erforderlichen Aktionen zum Hochladen eines Bildes. Es sollte so aussehen:

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

Sie müssen Ihre Routen konfigurieren.

Fügen Sie vorerst den drei von Ihnen erstellten Aktionen Routen hinzu.

# config / routes.rb Rails.application.routes.draw do Ressource: nur Fotos: [: index,: new,: create] root bis: "photos # index" ende

Sie müssen Ihre Ansichten wie folgt einrichten:

# app / views / photos / index.html.erb Fotos
 <%= 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 / views / photos / 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 %>

Wir werden später auf diese Ansichten zurückkommen.

Validierungen

Aus Sicherheitsgründen möchten Sie Ihren Benutzern nicht das Privileg erteilen, Dateien eines beliebigen Typs hochzuladen. Dragonfly stellt Ihnen dazu die notwendigen Methoden in Ihren Initialisierern zur Verfügung.

# config / initializers / dragonfly.rb # Modellfunktionalität hinzufügen, falls definiert (ActiveRecord :: Base) ActiveRecord :: Base.extend Dragonfly :: Modell ActiveRecord :: Base.extend Dragonfly :: Model :: Validations end

Bearbeiten Sie nun Ihr Fotomodell so, dass es wie folgt aussieht:

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

Hier ist eine vollständige Liste der von Dragonfly angebotenen Validierungen:

Klasse Photo Dragonfly :: Model :: Validations validates_presence_of: image validates_size_of: image maximal: 500.kilobytes # Überprüfen Sie die Dateierweiterung validates_property: ext: of:: image, als: 'jpg' #… oder… validates_property: mime_type, of :: image, as: 'image / jpeg' # ... oder analysieren Sie das Format tatsächlich mit imagemagick… validates_property: format, of:: image, in: ['jpeg', 'png', 'gif'] validates_property: width, of :: image, in: (0… 400), nachricht: "é demais cara!" #… Oder möchten Sie image_changed verwenden? method… validates_property: format, of:: image, als: 'png', wenn:: image_changed? Ende

Sie können mehr darüber in der Dragonfly-Dokumentation nachlesen.

Sie sollten auch in Betracht ziehen, Ihren Benutzern die Option zu geben, ihre gespeicherten Bilder zu bearbeiten. Dazu müssen wir unserem Aktionsmodell zwei Aktionsmethoden hinzufügen PhotosController und erstellen Sie eine Bearbeitungsseite in unseren Ansichten. Sie können die Aktion zum Löschen und Anzeigen hinzufügen, während Sie gerade dabei sind.

# app / controller / 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 / views / photos / edit.html.erb <%= form_for @photo do |f| %> <% if @photo.errors.any? %>  <%= pluralize(@photo.errors.count, "error") %> Das Speichern dieses Fotos ist verboten:
  <% @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 / photos / 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 %>

Wenn Sie versuchen, auf die Anzeige- oder Bearbeitungsseite zuzugreifen, werden Fehler angezeigt. Dies liegt daran, dass wir die Route auf beschränkt haben : neu,: index und: update. Gehen Sie jetzt vor und ändern Sie das. es sollte so aussehen:

# config / routes.rb Rails.application.routes.draw do Ressourcen: photos root bis: "photos # index" ende

Fazit

Jetzt können Sie Dragonfly in Ihre Rails-Anwendung integrieren. Schauen Sie sich die Dokumentation an, wenn Sie weitere Funktionen ausprobieren möchten, die hier nicht erwähnt werden. Ich hoffe, dass es Ihnen gefallen hat.

Denken Sie daran, dass Sie in das untenstehende Formular immer Feedback, Fragen und Kommentare hinzufügen können.

Code