Symfony 4: загрузка нескольких изображений с функциями предварительного просмотра и добавления / удаления

вступление

Я работаю над приложением Symfony 4, которое позволяет пользователям создавать и редактировать сообщения, связанные с одним или несколькими изображениями. Данные хранятся в базе данных через Doctrine. Каждый пост имеет связанные объекты PostImage, которые содержат имена файлов реальных файлов изображений.

Сущность сообщения:

/**
 * @ORM\Entity
 */
class Post
{
    ...

    /**
     * @ORM\OneToMany(targetEntity = "PostImage", mappedBy = "post", cascade = {"persist", "remove"}, orphanRemoval=true)
     */
    private $images;

   ...

Сущность PostImage:

/**
 * @ORM\Entity
 */
class PostImage
{

    ...
    /**
    * @ORM\ManyToOne(targetEntity = "Post")
    */
    private $post;

    /**
     * @ORM\Column(type = "string", length=512)
     */
    private $filename;

    ...

Что я пытаюсь сделать

Хорошее описание базовой загрузки файла в базу данных - здесь. Однако я бы хотел сделать загрузку изображений и предварительный просмотр более динамичными.

Пользователь должен уметь:

• Загрузите одно / несколько изображений и просмотрите их
• Загрузите больше изображений
• Удалите некоторые изображения
• Невозможно отправить форму, если все изображения удалены
• Отредактируйте сообщение (т. Е. Выполните указанные выше действия) в позже, используя ту же форму

Где я борюсь

Для меня совершенно ясно, как манипулировать JavaScript / DOM. Я борюсь с тем, как создавать формы или изменять типы на стороне Symfony. Поле "$ images" сущности Post представляет собой коллекцию, а способ использования форм с коллекциями в Symfony описан здесь. Но я изо всех сил пытаюсь понять, как изменить эту логику для работы с файлами.

Если я использую несопоставленный элемент управления FileType и загружаю файлы при изменении через AJAX, как мне сохранять и отправлять ссылки, которые представляют текущий список изображений (некоторые могут быть новыми, некоторые - старыми, некоторые - удаленными)? Использовать элемент управления CollectionType с дочерними элементами HiddenType, которые содержат ссылки на файлы, загруженные на сервер?

class PostType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('images', CollectionType::class, array(
                'allow_add' => true,
                'allow_remove' => true,
                'by_reference' => false,
                'entry_type' => HiddenType::class
                ))
            ->add('add_images', FileType::class, array(
                'label' => 'Add images',
                'mapped' => false,
                'multiple' => true
                ))
            ->add( //other fields..
            ...
     }
}