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 symfony.com/doc/current/reference/forms/types/… "No input fields would render unless your Annonce contained some images" — Fabian Schmick
– Fabian Schmick, Commented Mar 12, 2019 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
– Khalil, Commented Mar 12, 2019 at 10:17
I have uploaded the TestProject here: github.com/khaliltr/multipleFiles — Khalil
– Khalil, Commented Mar 12, 2019 at 10:28

Fabian Schmick · Accepted Answer · 2019-03-12 11:14:42Z

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, 2019 at 11:14

answered Mar 12, 2019 at 10:23

Fabian Schmick

1,6643 gold badges24 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Khalil Over a year ago

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 Over a year ago

I'm beginner sorry if i distrub you

Fabian Schmick Over a year ago

github.com/khaliltr/multipleFiles/blob/master/src/Controller/… before this line add the code

Khalil Over a year ago

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

Fabian Schmick Over a year ago

For multiple files you need to add the JavaScripts mentioned in the docs symfony.com/doc/current/reference/forms/types/… and look at my answer I edited it for your first problem

|

Collectives™ on Stack Overflow

How to upload multiple Files with Symfony 4

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related