How to upload multiple Files with Symfony 4

Question

I need to develop a entity Annonce has a many images this is my attempts but not working :/

Annonce Entity:

<?php

namespace App\Entity;

use Doctrine\Common\Collections\ArrayCollection;
use Doctrine\Common\Collections\Collection;
use Doctrine\ORM\Mapping as ORM;

/**
 * @ORM\Entity(repositoryClass="App\Repository\AnnonceRepository")
 *
 */
class Annonce
{
    /**
     * @ORM\Id()
     * @ORM\GeneratedValue()
     * @ORM\Column(type="integer")
     */
    private $id;

    /**
     * @ORM\OneToMany(targetEntity="App\Entity\Image", mappedBy="annonce", orphanRemoval=true)
     */
    private $images;

    public function __construct()
    {
        $this->images = new ArrayCollection();
    }

    public function getId(): ?int
    {
        return $this->id;
    }

    /**
     * @return Collection|Image[]
     */
    public function getImages(): Collection
    {
        return $this->images;
    }

    public function addImage(Image $image): self
    {
        if (!$this->images->contains($image)) {
            $this->images[] = $image;
            $image->setAnnonce($this);
        }

        return $this;
    }

    public function removeImage(Image $image): self
    {
        if ($this->images->contains($image)) {
            $this->images->removeElement($image);
            // set the owning side to null (unless already changed)
            if ($image->getAnnonce() === $this) {
                $image->setAnnonce(null);
            }
        }

        return $this;
    }
}

Image Entity :

<?php

namespace App\Entity;

use Doctrine\ORM\Mapping as ORM;
use Symfony\Component\HttpFoundation\File\File;
use Vich\UploaderBundle\Mapping\Annotation as Vich;

/**
 * @ORM\Entity(repositoryClass="App\Repository\ImageRepository")
 * @Vich\Uploadable
 */
class Image
{
    /**
     * @ORM\Id()
     * @ORM\GeneratedValue()
     * @ORM\Column(type="integer")
     */
    private $id;

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

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

    /**
     * @ORM\ManyToOne(targetEntity="App\Entity\Annonce", inversedBy="images")
     * @ORM\JoinColumn(nullable=false)
     */
    private $annonce;

    /**
     * @var File
     *
     * @Vich\UploadableField(mapping="images", fileNameProperty="image")
     */
    private $imageFile;

    public function getId(): ?int
    {
        return $this->id;
    }

    public function getName(): ?string
    {
        return $this->name;
    }

    public function setName(string $name): self
    {
        $this->name = $name;

        return $this;
    }

    public function getImage(): ?string
    {
        return $this->image;
    }

    public function setImage(string $image): self
    {
        $this->image = $image;

        return $this;
    }

    public function getAnnonce(): ?Annonce
    {
        return $this->annonce;
    }

    public function setAnnonce(?Annonce $annonce): self
    {
        $this->annonce = $annonce;

        return $this;
    }

    /**
     * @param File|null $image
     * @return Image
     * @throws \Exception
     */

    public function setImageFile(File $image = null)
    {
        $this->imageFile = $image;

        if ($image) {
            $this->updatedAt = new \DateTime('now');
        }

        return $this;
    }

    /**
     * @return File
     */
    public function getImageFile()
    {
        return $this->imageFile;
    }

    public function __toString()
    {
        return (string)$this->image;
    }


}

this is the ImageType :

<?php
/**
 * Created by PhpStorm.
 * User: Trigui
 * Date: 12/03/2019
 * Time: 10:35
 */

namespace App\Form;


use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\Extension\Core\Type\FileType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;
use Vich\UploaderBundle\Form\Type\VichFileType;

class ImageType extends AbstractType
{
    /**
     * @param FormBuilderInterface $builder
     * @param array $options
     */
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('imageFile', VichFileType::class)
        ;
    }

    /**
     * @param OptionsResolver $resolver
     */
    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults(array(
            'data_class' => 'App\Entity\Image'
        ));
    }
}

And finaly Annonce Type

<?php

namespace App\Form;

use App\Entity\Annonce;
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\Extension\Core\Type\CollectionType;
use Symfony\Component\Form\Extension\Core\Type\TextType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;
use Vich\UploaderBundle\Form\Type\VichImageType;

class AnnonceType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('images', CollectionType::class, array(
                'entry_type'        => ImageType::class,
                'prototype'         => true,
                'allow_add'         => true,
                'allow_delete'      => true,
                'by_reference'      => false,
                'required'          => false,
                'label'         => false,
            ));
    }

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

Ps: The relation of Annonce -> Images is OneToMany

The probleme that i don't see the input "FILE" so i can't add images.. I have tried so much, i can't resolve it

I have uploaded the TestProject here: https://github.com/khaliltr/multipleFiles

Look at the docs https://symfony.com/doc/current/reference/forms/types/collection.html#basic-usage "_No input fields would render unless your `Annonce` contained some `images`_" — Fabian Schmick, Mar 12 '19 at 10:08
I have make a crud for annonce, and when i want to create new annonce i don't see a input File, so can you give me a solution in code? — Khalil, Mar 12 '19 at 10:17
I have uploaded the TestProject here: https://github.com/khaliltr/multipleFiles — Khalil, Mar 12 '19 at 10:28
I think it is more easy to use [VichUploaderBundle](https://github.com/dustin10/VichUploaderBundle) for it. — Evgeny Ruban, Mar 12 '19 at 11:23
So, possible, this page helps you - https://github.com/dustin10/VichUploaderBundle/issues/276 — Evgeny Ruban, Mar 12 '19 at 11:58
@EugeneR I have followed this page, i have edited the ImageType to ->add('imageFile', VichFileType::class, array( 'label' => false, 'required' => false, 'allow_delete' => true, 'attr' => array( 'type' => 'file', 'multiple' => 'true', ) )) ; ,, now i can select multiple file, but finaly its upload just this first file selected, not all :( — Khalil, Mar 12 '19 at 12:01

Fabian Schmick · Answer 1 · 2019-03-12T11:14:42.337

2

Look at the docs https://symfony.com/doc/current/reference/forms/types/collection.html#basic-usage

"No input fields would render unless your Annonce contained some images"

So you need to add one empty image manually. Like this in your createAction and editAction:

if ($annonce->getImages()->isEmpty()) {
    $image = new Image();
    $image->setAnnonce($annonce);  
    $annonce->getImages()->add($image);
}

edited Mar 12 '19 at 11:14

answered Mar 12 '19 at 10:23

Fabian Schmick

1,616
3
23
32

1

Thank you, but there is another problemes, 1)its upload one file, not multiple file, 2)'annonce_id' cannot be null; he don't read the annonce id – Khalil Mar 12 '19 at 10:40
I'm beginner sorry if i distrub you – Khalil Mar 12 '19 at 10:43
https://github.com/khaliltr/multipleFiles/blob/master/src/Controller/AnnonceController.php#L34 before this line add the code – Fabian Schmick Mar 12 '19 at 10:47
yes i did that and the input is appeared but i see another problemes, 'annonce_id' cannot be null; and i want to add multiple files, not single file – Khalil Mar 12 '19 at 10:55
For multiple files you need to add the JavaScripts mentioned in the docs https://symfony.com/doc/current/reference/forms/types/collection.html#adding-and-removing-items and look at my answer I edited it for your first problem – Fabian Schmick Mar 12 '19 at 11:14
Thank you fabien for your support, i edited the code, and now the annoce_id is good, ... about the multiple file, i have added this to AnnonceType $builder ->add('images', CollectionType::class, array( 'entry_type' => ImageType::class, 'allow_add' => true, ; but the same probleme, upload only one file – Khalil Mar 12 '19 at 11:35
I have edited the ImageType to this ->add('imageFile', VichFileType::class, array( 'label' => false, 'required' => false, 'allow_delete' => true, 'attr' => array( 'type' => 'file', 'multiple' => 'true', ) )) ; Now by the input i can select multiple file, but in Database uploaded just one File – Khalil Mar 12 '19 at 11:52
With `VichUploaderBundle` mutiple file upload is not possible as you would like to do. You misunderstood the `CollectionType`. You have to upload each file separately – Fabian Schmick Mar 12 '19 at 12:39
there are not any way to upload multiple files? – Khalil Mar 12 '19 at 12:42
Not in one step no. – Fabian Schmick Mar 12 '19 at 12:42
Ok thank you, if you have another way let me know :)) – Khalil Mar 12 '19 at 12:48

How to upload multiple Files with Symfony 4

1 Answers1