- 
Utiliser la gem Paperclip
- Catégories:
- Ruby On Rails
Paperclip est une gem qui permet de faciliter l'importation d'un fichier présent sur l'ordinateur vers un serveur. Typiquement, Paperclip est LA gem que vous utiliserez si vous voulez par exemple que l'utilisateur puisse importer son avatar personnalisé à partir de son ordinateur. Nous allons donc voir dans ce billet comment la mettre en place en deux temps trois mouvements.
Commençons par aller sur la page gitHub, qui se trouve ici: https://github.com/thoughtbot/paperclip. Les anglophones préféreront sans doute directement s'y référer.
Etape 1: Installer la gem
Qui dit "gem", dit "gem install". Nous allons donc commencer par ouvrir le fichier "Gemfile" qui se trouve dans notre projet, et lui ajouter les lignes de commande suivantes:
gem 'paperclip' #Permet d'importer des fichiers de l'ordinateur utilisateur
Dans le terminal, on installe ensuite la gem:
$ gem install paperclip
$ bundle update
Etape 2: Le code à placer
Commençons par le commencement. Pour que notre utilisateur puisse importer un avatar, il lui faut tout d'abord l'autorisation d'en avoir un ! Cela se passe donc dans le Model concerné (ici l'utilisateur ou User).
has_attached_file :avatar
La seconde étape consiste ensuite à spécifier le dossier dans lequel va être enregistré l'image et dans laquelle on va le chercher pour l'afficher. Cela se fait respectivement grâce à l'attribut :path et à l'attribut :url.
has_attached_file :avatar,
:path => ':rails_root/app/assets/images/:attachment/:id/:style/:basename.:content_type_extension',
:url => ':attachment/:id/:style/:basename.:content_type_extension'
:path spécifie l'endroit où l'image va être enregistrée et :url spécifie le chemin de l'image que l'on veut récupérer.
Les exemples que j'ai donné peuvent vous paraître à rallonge, mais c'est une bonne manière de les ranger pour mieux s'y retrouver. Comme le veut Rails, mes images sont classées dans le dossier "app/assets/images".
Ensuite, elles sont classées par types d'images enregistrées (en l'occurrence ici dans un dossier "avatar" qui va regrouper tous les avatars de tous les utilisateurs) grâce au :attachment.
Les images sont ensuite classées par utilisateur, en utilisant leur :id qui leur est spécifique.
Et enfin, par type d'image et par nom. :)
Mais au juste, comment récupère-t-on tout cela ? Hé bien, oui, c'est vrai, vous devez avant tout chose les créer dans vos tables ! Créez donc une nouvelle migration, afin qu'on puisse y ajouter le nom de l'image enregistrée, le type d'image enregistrée, sa taille et sa date de modification.
N.B: Pour faire fonctionner Paperclip, seul :attachment_file_name est obligatoire (où attachement est un nom que vous spécifiez). Le reste est facultatif, mais je pense sincèrement qu'il vaut mieux pour des raisons de sécurité vérifier que la taille de l'image ne soit pas trop lourde et surtout qu'il s'agit bien d'un .png plutôt que d'un .txt ou .exe... (Oui, oui, l'importation de ce type de fichier fonctionne également, alors faites très attention !)
# A insérer dans une migrationMaintenant, reste à créer les validations !
def change
add_column :users, :avatar_file_name, :string
add_column :users, :avatar_content_type, :string
add_column :users, :avatar_file_size, :int
add_column :users, :avatar_updated_at, :int
end
Comme toutes les validations, celles-ci se font dans le Model concerné (User dans notre cas). Vous ne devriez pas être très dépaysé par la syntaxe employée par Paperclip. Voici quelques exemples non exhaustifs.
validates_attachment_content_type :avatar, :content_type => ["image/jpg", "image/jpeg", "image/png","image/gif"] validates_attachment_size :avatar, :less_than => 40.kilobytes
Vous en trouverez davantage dans ce guide officiel d'utilisation de Paperclip, très bien fait et très pratique.
Maintenant que nous avons les clés en main côté développeur, voyons ce qu'il nous reste à faire du côté de l'utilisateur. Pour qu'il puisse importer son avatar, on va avoir besoin d'un champ dans lequel il va pouvoir importer sa bannière. Cela se fait simplement grâce au bout de code suivant, à insérer dans votre formulaire rails:
<%= file_field :avatar %>
Pour afficher l'image enregistrée, il n'y a plus qu'à réutiliser l'url que vous avez spécifiée de cette manière:
<%= image_tag @avatar.avatar.url %>
Et voilà... Vous pouvez lancer votre site: votre utilisateur pourra importer une image à partir de son ordinateur et vous pourrez l'afficher où bon vous semble !
Etape 3: Installer ImageMagick
Contrairement à ce que l'on pourrait croire, cette étape est ... facultative, bien qu'elle soit dans les "pré-requis" sur la page de Paperclip. J'ai en effet réussi à utiliser Paperclip sans utiliser ImageMagick, alors pourquoi pas vous ? ;)
Mais à quoi sert ImageMagick alors ?
ImageMagick permet essentiellement d'appliquer des transformations aux images. L'image que l'utilisateur veut importer est rectangulaire, mais votre avatar a la forme d'un carré ? ImageMagick redimensionne de manière automatisée les images importées par l'utilisateur. Il y a bien d'autres fonctionnalités sans doute très amusantes, à vous de les découvrir sur ImageMagick... après l'avoir installé ! :)
Pour ce faire, téléchargez la version qui vous correspond à votre système sur cette page. Prenez le premier .zip que vous voyez à partir du haut de la liste si vous êtes sur Windows, et le premier.tar.gz si vous êtes sur Linux.
Une fois téléchargé, dé-compilez et installez le tout. Normalement, la manipulation devrait se dérouler sans trop de problèmes, mais comme on n'est jamais trop prudents, vous pouvez vous référer à cette page d'explication au cas où. :)
Etape 4: Redimensionner automatiquement des images importées
Après l'installation, la partie fun: la pratique ! Comment faire pour redimensionner une image ? (Et par la même occasion de s'assurer que ImageMagick fonctionne bien ?)
Retournez dans votre Model, et revenez sur le fameux "has_attached_file". Nous allons lui ajouter un deux nouveaux attributs: :styles et :default_style.
Par défaut, Paperclip sauvegarde dans un dossier nommé "original" le fichier d'origine importé. Les "styles" correspondent à de nouvelles images. Ces nouvelles images sont des copies "transformées" du fichier importé: par exemple, elles peuvent avoir été redimensionnées.
has_attached_file :avatar,
:styles => {:horizontal => "468x60!", :vertical =>"120x600!"},
:default_style => :horizontal
Je ne m'attarde pas plus longtemps sur la transformation des images importées: elles sont bien trop nombreuses, et les possibilités sont infinies ! Vous pouvez vous référer directement à ImageMagick sur cette page pour tout ce qui concerne le redimensionnement et cette page pour toutes les autres possibilités (sélectionnez ce que vous souhaitez faire après "features et capabilities".
Voilà, voilà ! Pour terminer, n'oubliez pas de préciser à l'utilisateur quel type d'image il peut importer et surtout les dimensions optimales pour son avatar ! (Ce n'est jamais très plaisant de voir son image complètement déformée ou tronquée...)
Index
--
Article précédent: Configurer son pare-feu pour faire fonctionner Ruby on Rails avec MySQL sous Windows 7
--
Article suivant: Un Mot en Or recherche ses sponsors
Aucun commentaire - Soyez le premier !