CODEWITHSUNDEEP
symfonyvichuploaderbundlemulti-upload
jonadf
jonadf

Reputation: 31

VichUploaderBundle and form to multi-image upload

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 ?

Upvotes: 2

Views: 1774

Answers (2)

Julesezaar
Julesezaar

Reputation: 3396

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.

Upvotes: 0

Phil Rennie
Phil Rennie

Reputation: 376

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.

Upvotes: 0

Related Questions