Uploader plusieurs fichiers dans une entity avec Symfony4 et VichUploaderBundle

Uploader plusieurs fichiers dans une entity avec Symfony4 et VichUploaderBundle

Préparation

 

Pour commencer nous avons besoin d’une entity Product ainsi qu’une entity ProductImage qui contiendra le nom des images.

Pour ce faire, nous utilisons la commande dans notre terminal

Configuration de BichUploaderBundle

Comme dit dans la documentation de Symfony4 nous allons utiliser le bundle VichUploaderBundle

Ensuite ajouter le fichier de configuration “config/packages/vich_uploader.yaml” nécessaire

Une fois que cela est fait, le bundle est prêt a être utilisé. Pour commencer il faut modifier l’entity ProductImage et ajouter “@Vich\Uploadable” avant la declaration de la class.

Ensuite ajouter ces propriétés.

Puis ces methodes

The productImage Entity ressemble donc a cela

Pour faciliter le tout, la fonction make:crud sera utilisé, pour ne pas avoir a créer le formulaire de toute piece

Une fois cela fait, il est encore nécessaire d’avoir un ProductImageType

Ensuite dans le ProductType il est nécessaire d’ajouter la collection de productImages

Templating

Une fois cela fait, le formulaire a bien les images, mais il n’est pas possible d’ajouter une image

Il est donc temps d’ajouter ce bouton. Pour se faire, il faut créer un form template: “_form_theme.html.twig

puis modifions le _form.html.twig du product pour rajouter celui-ci

Il est maintenant temps de créer le javascript qui rajouter les images

Une fois cela fait, en clique sur le bouton, un nouveau champ apparait avec la possibilité d’ajouter une image

Une fois cela fait, il faut encore configurer le bundle pour indiquer ou les images seront enregister dans le fichier“config/packages/vich_uploader.yaml”

Malheureusement un bug existe actuellement et si l’on reste ainsi, le productImage sera enregistré dans la reference au product, c’est pourquoi le controller doit être modifier pour la méthode “new” et “edit”

Laisser un commentaire