EasyAdmin 3 — Tips : Télécharger plusieurs images (sans bundle ni solutions tierces)

On va voir ensemble, comment mettre rapidement en place le téléchargement de plusieurs images, sans rajouter de bundle ou de solutions tierces depuis Easy Admin 3Symfony 5.

EasyAdmin 3 — Symfony 5

Je pars d’une entité déjà gérée par EasyAdmin (cf. doc).

— Le model.

Rajouter une nouvelle propriété $images” de type “Array

Depuis votre terminal : “bin/console m:e

— Le controller

Ajouter simplement votre nouvel input dans la méthode “configureFields”, en précisant “multiple” à true :

Sans oublier de rajouter “$images” au “return” de la méthode.

— Les templates

Dans un premier temps, ajoutez dans “src/Twig” cette extension afin d’avoir un filtre “md5

Nous allons overrider deux templates d’EasyAdmin. Pour ce faire, vous créez les dossiers suivants dans “myProject/templates” :

Dans le dossier “field” nous allons overrider : “image.html.twig

Le test “ {% if ea.crud.currentPage == “index” %} ” est utilisé pour afficher une seule image sur la page d’index, à vous d’adapter ce code selon votre besoin.

Pour le second override, celui-ci permet d’afficher une preview des images dans le formulaire d’édition.

Affichage de base
Après override

La modification est donc optionnelle.

Dans le dossier “crud” nous allons overrider : “form_theme.html.twig

Vous pouvez récupérer le fichier d’origine à cet emplacement :

Une fois le fichier copier-coller.

Dans : “myProject/templates/bundles/EasyAdminBundle/crud

La partie qui nous intéresse se trouve ligne 605.

Dans le bloc “ea_fileupload_widget”, à l’intérieur du if “ {% if multiple and currentFiles %}

— Le CSS

Rajoutons un peu de style dans tout ça :

J’en ai profité pour limiter la height des images, dans le but de ne plus avoir de scroll dans la modal “lightbox”.

— Enjoy !

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store