Téléchargement d'image Rails à l'aide de libellule

Le téléchargement de fichiers est une caractéristique importante des applications Web. Outre le fait de permettre aux utilisateurs de télécharger des images de profil, l'utilisation des fonctionnalités de téléchargement de fichier varie. Je vous ai montré comment activer le téléchargement de fichiers dans votre application Rails en utilisant différentes gemmes. Aujourd'hui, je vais vous montrer comment faire de même avec Dragonfly..

Dragonfly est un joyau de Ruby hautement personnalisable pour la gestion des images et autres pièces jointes. Il est déjà utilisé sur des milliers de sites Web..

Une tâche vous permettant d’activer le téléchargement de fichiers dans une application Rails peut vous empêcher de ne pas utiliser les autres gemmes qui existent. Vous pouvez donner un coup de feu à Dragonfly, et vous ne le regretterez certainement pas.

Dans ce tutoriel, vous allez créer une application Rails simple. J'ai nommé le mien Dragon-Uploader. L'application n'aura qu'une fonctionnalité: le téléchargement d'images.

Installer ImageMagick

Pour utiliser Dragonfly, vous devez avoir installé ImageMagick sur votre ordinateur. Suivez l'une des étapes ci-dessous, en fonction de votre système d'exploitation.

Utilisateurs Mac:

brasser installer imagemagick

Utilisateurs Ubuntu:

sudo apt-get install imagemagick

Génération d'applications Rails

rails nouveau dragon-uploader -T

le -T Cette option garantit que votre application Rails est générée sans la suite de tests par défaut..

Aller à votre Gemfile et ajoutez le libellule gemme.

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

Ne pas oublier de grouper.

installation groupée

Générons notre contrôleur.

rails générer contrôleur Photos

Intégration de libellule

La première étape pour intégrer Dragonfly dans votre application Rails consiste à exécuter la commande de génération libellule à partir de votre terminal..

les rails génèrent une libellule

Cela créera un fichier d’initialisation pour Dragonfly dans votre config / initialiseurs dossier.

Le fichier ressemble à ceci:

"confiant / intializer / dragonfly.rb require 'libellule" # configurer Dragonfly.app.configure 'public / system / libellule', Rails.env), racine du serveur: Rails.root.join ('public') end # Logger Dragonfly.logger = Rails.logger # Montage en tant que middleware Rails.application.middleware.use Dragonfly :: Middleware # Ajouter une fonctionnalité de modèle si elle est définie (ActiveRecord :: Base) ActiveRecord :: Base.extend Dragonfly :: Model ActiveRecord :: Base.extend Dragonfly :: Model :: Fin des validations

les rails génèrent le modèle Photo

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

Dragonfly fournit un accesseur que vous devrez ajouter à votre modèle. Avec cela, vous pouvez lire et écrire des images.

Maintenant, accédez à votre fichier de migration et ajoutez des colonnes.

# 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

Remarque: Si vous utilisez avatar et pas image comme je l'ai fait ci-dessus, vous devriez changer la colonne à avatar_uid.

Migrez votre base de données:

rake db: migrer

Configurez votre PhotosController avec les actions nécessaires pour télécharger une image. Ça devrait ressembler à ça:

# 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

Vous devrez configurer vos itinéraires.

Pour l'instant, ajoutez des itinéraires aux trois actions que vous avez créées..

# config / routes.rb Rails.application.routes.draw ressource: photos uniquement: [: index,: nouveau,: créer] racine à: "photos # index" end

Vous devez configurer vos vues comme ci-dessous:

# app / views / photos / index.html.erb Photos
 <%= notice %>
  <% @photos.each do |photo| %>  <% end %>    Titre  Image   
 
  <%= 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?'  %>

Titre	Image
<%= 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 %>

Nous reviendrons sur ces vues plus tard.

Validations

Pour des raisons de sécurité, vous ne souhaitez pas accorder à vos utilisateurs le privilège de télécharger des fichiers de tout type. Dragonfly vous fournit les méthodes nécessaires pour cela dans vos initialiseurs.

# config / initializers / dragonfly.rb # Ajoute une fonctionnalité de modèle si elle est définie (ActiveRecord :: Base) ActiveRecord :: Base.extend Dragonfly :: Model ActiveRecord :: Base.extend Dragonfly :: Model :: Validations

Maintenant, éditez votre modèle de photo pour qu'il ressemble à ce que j'ai ci-dessous:

# 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

Voici une liste complète des validations proposées par Dragonfly:

class Photo extend Dragonfly :: Model :: Validations validates_presence_of: image validates_size_of: image, maximum: 500.kilobytes # Vérifiez l'extension du fichier validates_property: ext, de:: image, sous la forme: 'jpg' #… ou… validates_property: mime_type, of :: image, en tant que: 'image / jpeg' #… ou en fait, analyser le format avec imagemagick… validates_property: format, de:: image, dans: ['jpeg', 'png', 'gif'] validates_property: width, of :: image, in: (0… 400), message: "é demais cara!" #… Ou vous voudrez peut-être utiliser image_changed? méthode… validates_property: format, de:: image, sous la forme: 'png', si:: image_changed? fin

Vous pouvez en savoir plus à ce sujet dans la documentation de Dragonfly.

Vous devriez également envisager de donner à vos utilisateurs la possibilité de modifier leurs images enregistrées. Pour ce faire, nous devons ajouter deux méthodes d’action à notre PhotosController et créer une page d'édition dans nos vues. Vous voudrez peut-être ajouter les actions delete et show tant que vous y êtes, comme indiqué ci-dessous:

# 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 / photos / edit.html.erb <%= form_for @photo do |f| %> <% if @photo.errors.any? %>  <%= pluralize(@photo.errors.count, "error") %> interdit que cette photo soit sauvegardée:
  <% @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  Titre: <%= @photo.title %> 
  Image: <%= image_tag @photo.image.thumb('400x200#').url if @photo.image_stored? %> 
 <%= link_to 'Edit', edit_photo_path(@photo) %> | <%= link_to 'Back', photos_path %>

Si vous essayez d’accéder à la page d’émission ou d’édition, des erreurs s’afficheront. C’est parce que nous avons limité l’itinéraire à : new,: index et: update. Maintenant, allez-y et changez cela; ça devrait ressembler à ça:

# config / routes.rb Rails.application.routes.draw Ressources: racine des photos vers: "photos # index" fin

Conclusion

À ce stade, vous pouvez maintenant intégrer Dragonfly à votre application Rails. Assurez-vous de consulter la documentation si vous souhaitez essayer davantage de fonctionnalités non mentionnées ici. J'espère que tu as aimé.

N'oubliez pas que vous pouvez toujours ajouter des commentaires, des questions et des commentaires dans le formulaire ci-dessous..

Code