VichUploaderBundle and form to multi-image upload

Question

I'm using VichUploaderBundle in Symfony 4 and I have a question about using a form to send in a bunch of photos. To do this I have to use CollectionType and a one-to-many relationship (One product has several photos). Below I present the code which only shows me an empty frame of the form, and it lacks buttons for adding photos as they are in this uploader. I do not understand why this is happening.

Product entity (one-to-many):

/**
* @var ProductMultiImage[]
* One Product has Many Images.
* @ORM\OneToMany(targetEntity="App\Entity\Image\ProductMultiImage", mappedBy="product", cascade={"persist"})
* @ORM\JoinColumn(nullable=true)
*/
private $productMultiImages = null;

Image entity (many-to-one):

/**
* Many Images have One Product.
* @ORM\ManyToOne(targetEntity="App\Entity\Admin\Product", inversedBy="productMultiImages", cascade={"persist"})
* @ORM\JoinColumn(name="product_id", referencedColumnName="id", nullable=true)
*/
private $product = null;

Form for adding photos:

class ProductImageType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('productMultiImages', CollectionType::class, array(
                'data_class'    => ImageType::class,
                'allow_add'     => true,
                'allow_delete'  => true,
                'by_reference'  => false,
            ))
        ;
    }

    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults([
            'data_class' => null,
        ]);
    }
}

ImageType:

public function buildForm(FormBuilderInterface $builder, array $options)
{
    $builder
        ->add('imageFile', VichImageType::class)
    ;
}

Where i can find any solution ?

Answer 1

If $productMultiImages is null then the form won't have anything to populate with. Set it to an empty array collection and add at least one empty Image entity to it.

In the Product entity's __constuct()

$this->productMultiImages = new ArrayCollection();
$this->productMultiImages->add(new Image();

Or add those to an instantiated Product before passing it into the form builder.

Last time I used it VichUploader didn't support multifile upload with a single form file element though. You'll need to use javascript on the client to add an additional file upload element to the form for each image you want to upload. See https://symfony.com/doc/current/form/form_collections.html for more on that.

Answer 2

You probably forgot to add the necessary JQuery code to the twig, that is needed to make the collection work. Plus for the button you must create one yourself with the correct class. It doesn't come magically by itself ;)

<button type="button" class="add-another-collection-widget" data-list="#your-fields-list">Add another email</button>

The JQuery code can be found on:

http://symfony.com/doc/current/reference/forms/types/collection.html

That JQuery code makes sure that each time you click on the button, JQuery copies the element out of the data attribute (which you can see when you "inspect" the original element with dev-tools) and it adds a number to it, starting with 0 for the first collection item.