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 3 — Symfony 5.

EasyAdmin 3 — Symfony 5

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

— Le model.

//myProject/src/Entity/MonModel.php
/**
 * @ORM\Column(type="array")
 */
private $images = [];

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 :

$images = ImageField::new('images')
    ->setFormTypeOptions([
        "multiple" => true,
        "attr" => [
            "accept" => "image/x-png,image/gif,image/jpeg"
        ],
    ])
    ->setBasePath('uploads/images/cars')
    ->setUploadDir('public/uploads/images/cars')
    ->setUploadedFileNamePattern("[randomhash].[extension]");

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”

<?php

namespace App\Twig;

use Twig\Extension\AbstractExtension;
use Twig\TwigFilter;

class AppExtension extends AbstractExtension
{
    public function getFilters()
    {
        return [
            new TwigFilter('md5', [$this, 'md5']),
        ];
    }

    public function md5($str)
    {
        return md5($str);
    }
}

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

bundles/EasyAdminBundle/crud/field

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

{# @var ea \EasyCorp\Bundle\EasyAdminBundle\Context\AdminContext #}
{# @var field \EasyCorp\Bundle\EasyAdminBundle\Dto\FieldDto #}
{# @var entity \EasyCorp\Bundle\EasyAdminBundle\Dto\EntityDto #}
{% set values = field.formattedValue %}
{% if values is not iterable %}
    {% set values = [field.formattedValue] %}
{% endif %}
{% if ea.crud.currentPage == "index" %}
    {% set values = values|slice(0,1) %}
{% endif %}
{% for value in values %}
    {% set _lightbox_id = value|md5 %}
    <a href="#" class="ea-lightbox-thumbnail" data-featherlight="#{{ _lightbox_id }}" data-featherlight-close-on-click="anywhere">
        <img src="{{ asset(value) }}" class="img-fluid">
    </a>
    <div id="{{ _lightbox_id }}" class="ea-lightbox">
        <img src="{{ asset(value) }}">
    </div>
{% endfor %}

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 :

myProject/vendor/easycorp/easyadmin-bundle/src/Resources/views/crud/form_theme.html.twig

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 %} ”

{% for file in currentFiles %}
    <tr>
        <td>
            {# OVERRIDE --------> #}
            {% if download_path and file.extension in ["jpg", "png", "gif"] %}
                {% set _lightbox_id = 'ea-lightbox-' ~ file.filename|md5 %}
                <a href="#" class="ea-lightbox-thumbnail" data-featherlight="#{{ _lightbox_id }}"
                   data-featherlight-close-on-click="anywhere">
                    <img class="img-fluid" src="{{ asset(download_path ~ file.filename) }}">
                    {{ file.filename }}
                </a>
                <div id="{{ _lightbox_id }}" class="ea-lightbox">
                    <img alt="{{ file.filename }}" src="{{ asset(download_path ~ file.filename) }}">
                </div>
            {% else %}
                {% if download_path %}<a href="{{ asset(download_path ~ file.filename) }}">{% endif %}
                <span title="{{ file.mTime|date }}">
                    <i class="fa fa-file-o"></i> {{ file.filename }}
                </span>
                {% if download_path %}</a>{% endif %}
            {% endif %}
            {# OVERRIDE <-------- #}
        </td>
        <td class="text-right file-size">{{ file.size|ea_filesize }}</td>
    </tr>
{% endfor %}

— Le CSS

Rajoutons un peu de style dans tout ça :

// Limiter la height dans la modal - (optionnel)
.ea-lightbox
  img
    max-height: 75vh
    width: auto
// thumbnail
.ea-lightbox-thumbnail
  img
    max-height: 30vh
    max-width: 30vh
    width: auto
// Uniquement si vous avez overridé le 2eme template - (optionnel)
.fileupload-table
  .ea-lightbox-thumbnail
    img
      max-width: 30%

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

— Enjoy !