Share
Si vous construisez une application Web, vous souhaiterez certainement activer le téléchargement d'images. Le téléchargement d'images est une fonctionnalité importante dans les applications modernes, et les images sont réputées être utiles pour l'optimisation des moteurs de recherche..
Dans ce tutoriel (qui constitue la première partie de la série de téléchargement d'images Rails), je vais vous montrer comment activer le téléchargement d'images dans votre application Rails à l'aide de CarrierWave. Ce sera une application simple car l'accent est mis sur le téléchargement d'images..
CarrierWave est un bijou Ruby qui fournit un moyen simple et extrêmement flexible de télécharger des fichiers à partir d'applications Ruby. Vous devez avoir des rails sur votre machine pour suivre. Pour être sûr, ouvrez votre terminal et entrez la commande ci-dessous:
rails -v
Cela vous montrera la version de Rails que vous avez installée. Pour ce tutoriel, je vais utiliser la version 4.2.4, que vous pouvez installer comme ceci:
bijou installer rails -v 4.2.4
Avec ça fait, vous êtes prêt à partir.
Créez maintenant un nouveau projet Rails:
rails nouveaux mypets
Ouvrez votre Gemfile et ajoutez les gemmes suivantes.
* Gemfile *… gem 'carrierwave', '~> 0.10.0' gem 'mini_magick', '~> 4.3'…
La première gemme est destinée à CarrierWave et la deuxième, mini_magick, facilite le redimensionnement des images dans votre application Rails. Ceci fait, lancez bundle install.
Générez une ressource d'échafaudage pour ajouter la fonctionnalité de CarrierWave. Exécutez la commande suivante depuis votre terminal:
rails g échafaudage Nom de l'animal: chaîne Description: image de texte: chaîne
Un échafaudage dans Rails est un ensemble complet de modèle, une migration de base de données pour ce modèle, un contrôleur pour le manipuler, des vues pour afficher et manipuler les données et une suite de tests pour chacun des éléments ci-dessus..
Migrez votre base de données ensuite:
rake db: migrer
Vous devez créer un initialiseur pour CarrierWave, qui sera utilisé pour charger CarrierWave après le chargement d'ActiveRecord..
Aller vers config> initialiseurs et créez un fichier: carrier_wave.rb.
Collez le code ci-dessous dans celui-ci.
* config / initializers / carrier_wave.rb * nécessite 'carrierwave / orm / activerecord'
Depuis votre terminal, générez un uploader:
rails générer uploader Image
Cela créera un nouveau répertoire appelé "uploaders" dans le dossier de l'application et un fichier à l'intérieur appelé image_uploader.rb. Le contenu du fichier devrait ressembler à ceci:
Accentsconagua
* app / uploaders / image_uploader.rb * # encoding: utf-8 class ImageUploader < CarrierWave::Uploader::Base # Include RMagick or MiniMagick support: # include CarrierWave::RMagick # include CarrierWave::MiniMagick # Choose what kind of storage to use for this uploader: storage :file # storage :fog # Override the directory where uploaded files will be stored. # This is a sensible default for uploaders that are meant to be mounted: def store_dir "uploads/#model.class.to_s.underscore/#mounted_as/#model.id" end # Provide a default URL as a default if there hasn't been a file uploaded: # def default_url # # For Rails 3.1+ asset pipeline compatibility: # # ActionController::Base.helpers.asset_path("fallback/" + [version_name, "default.png"].compact.join('_')) # # "/images/fallback/" + [version_name, "default.png"].compact.join('_') # end # Process files as they are uploaded: # process :scale => [200, 300] # # def échelle (largeur, hauteur) # # faire quelque chose # end # Créez différentes versions de vos fichiers téléchargés: # version: thumb do # processus: resize_to_fit => [50, 50] # end # Ajoutez un liste blanche des extensions qui peuvent être téléchargées. # Pour les images, vous pouvez utiliser quelque chose comme ceci: # def extension_white_list #% w (jpg jpeg gif png) # end # Remplacez le nom de fichier des fichiers téléchargés: # Évitez d’utiliser model.id ou version_name ici, voir uploader / store.rb détails. # def nomfichier # "quelque chose.jpg" si nom_fichier_original # fin fin Vous pouvez le modifier pour adapter ce que vous voulez. Laissez-moi vous guider.
Tout d'abord, décommentez la ligne MiniMagick. Cela devrait être la ligne 7.
… Inclure CarrierWave :: MiniMagick…
Vous en avez besoin pour générer différentes versions d'une image. Si vous souhaitez générer une version miniature des images téléchargées, un fichier de code est déjà inclus dans le fichier image_uploader. Décommentez le bloc de code de version comme indiqué ci-dessous:
… Version: thumb do process: resize_to_fill => [50, 50] end…
Vous pouvez également ajouter différentes versions en utilisant le même format.
Pour les besoins de ce tutoriel, nous allons enregistrer dans un fichier et non dans le brouillard. Fog est la bibliothèque de services en nuage Ruby. Je vais vous montrer comment le mettre en œuvre dans une autre partie de cette série. Alors laissez votre option de stockage en l'état.
Pour des raisons de sécurité, certains fichiers peuvent constituer une menace si le téléchargement à un mauvais emplacement est autorisé. CarrierWave vous permet de spécifier une liste blanche d'extensions autorisées. Vous devriez voir une méthode qui ressemble à celle que j'ai ci-dessous, alors décommentez-la.
… Def extension_white_list% w (jpg jpeg gif png) end…
Il est temps de monter votre uploader. Accédez à votre modèle et collez le code ci-dessous..
* app / model / pet.rb * mount_uploader: image, ImageUploader
Accédez à vos vues et modifiez-le pour qu'il ressemble à ce que j'ai ci-dessous:
app / views / pets / _form.html.erb <%= form_for @pet, html: multipart: true do |f| %> <% if @pet.errors.any? %><% end %><%= pluralize(@pet.errors.count, "error") %> interdit à cet animal d'être sauvé:
<% @pet.errors.full_messages.each do |message| %>
- <%= message %>
<% end %><%= f.label :name %>
<%= f.text_field :name %><%= f.label :description %>
<%= f.text_area :description %><%= f.label :image %>
<%= f.file_field :image %><%= f.submit %><% end %>
Ouvrez votre terminal et démarrez votre serveur rails: rails s.
Pointez votre navigateur sur http: // localhost: 3000 / pets. Vous devriez pouvoir ajouter un nouvel animal en saisissant un nom et une description, puis en téléchargeant une image. L'image ne s'affiche pas après le téléchargement réussi. Laissez-moi vous montrer comment résoudre ce problème.
Accédez à la page d’affichage où vous affichez l’image et modifiez-la pour l’adapter à ce que j’ai ci-dessous:
* app / views / pets / show.html.erb *<%= notice %>
Prénom: <%= @pet.name %>
La description: <%= @pet.description %>
Image: <%= image_tag @pet.image.thumb.url %>
<%= link_to 'Edit', edit_pet_path(@pet) %> | <%= link_to 'Back', pets_path %>
Cela affichera la version miniature de l'image.
CarrierWave facilite la suppression d'un fichier précédemment téléchargé sur un programme de téléchargement monté avec une simple case à cocher. Je vais vous montrer comment faire.
Ouvrez votre fichier de formulaire et faites un petit ajustement. Modifiez-le pour qu'il ressemble à ceci:
* app / views / pets / _form.html.erb * <%= form_for @pet, html: multipart: true do |f| %> <% if @pet.errors.any? %><% end %><%= pluralize(@pet.errors.count, "error") %> interdit à cet animal d'être sauvé:
<% @pet.errors.full_messages.each do |message| %>
- <%= message %>
<% end %><%= f.label :name %>
<%= f.text_field :name %><%= f.label :description %>
<%= f.text_area :description %><%= f.label :image %>
<%= f.file_field :image %> <% if f.object.image? %> <%= image_tag f.object.image.thumb.url %> <%= f.label :remove_image %> <%= f.check_box :remove_image %> <% end %><%= f.submit %><% end %>
Dans le code ci-dessus, nous avons vérifié s'il y avait déjà un objet image. Si tel est le cas, nous affichons l'image et l'option de le supprimer, mais s'il n'y en a pas, nous affichons uniquement le champ dans lequel télécharger l'image..
Accédez à votre contrôleur et ajoutez : remove_image à vos params. Rechargez votre page d'édition, cochez la case, cliquez sur Mettre à jour l'animal, et l'image sera supprimée.
Il existe différents moyens de le faire. Je vais vous montrer une méthode facile et rapide. Ouvrez le modèle de votre animal et collez le code ci-dessous:
* app / model / pet.rb validates_processing_of: image validate: image_size_validation private def erreurs image_size_validation [: image] << "should be less than 500KB" if image.size > 0.5.mégaoctets fin
Cela vous aidera à vous assurer qu'aucune image supérieure à 500 Ko ne soit téléchargée dans votre application Rails. Lancez votre serveur de rails et vérifiez ce que vous avez.
Vous savez maintenant comment activer le téléchargement d'images dans votre application Rails. Vous avez également appris à valider le format et la taille et à supprimer une image. Dans la prochaine partie de cette série, nous verrons comment utiliser CarrierWave avec Devise.
