VichUploaderBundle - MiguelFieira/AMO-HANDBOEK GitHub Wiki

We recommend you to make a backup on a private Repo before continuing.

Symfony is a PHP framework for web applications and a set of reusable PHP components. Symfony is used by thousands of web applications (including BlaBlaCar.com and Spotify.com) and most of the popular PHP projects (including Drupal and Magento).

Notice! As of making this their is no documentation for VichUploaderBundle for Symfony 4+ so we used this outdated setup as a baseline(source)

Note I've created a Example Entity called "Location", I will be using this as a example. You have to change the name to name of your own entity.

Setup

1. Install the latest version of the uploader bundle and while installing use OPTION A.

composer require vich/uploader-bundle

// This will install the packages and needed scripts. MAKE SURE TO USE OPTION A!

2. Create a "Entity" without an image column this will be added manually!

We recommend using the php bin/console make:entity command for making a entity

/* Insert Example **"Entity"** here. */

3. Uncomment mappings in "config/packages/vich_uploader.yaml" and add the name of the entity you created it for. (I used "Location" Entity as an Example)

vich_uploader:
    db_driver: orm

    mappings:
       location:
           uri_prefix: /images/location
           upload_destination: '%kernel.project_dir%/public/images/location'

// We are using "location" as a example

4. Navigate to "src/Enity/Name_of_your_Entity" and add the following lines of code into the Entity file you want to use.

<?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\LocationRepository")
 * @Vich\Uploadable
 */

5. Add the Following code to your "Entity File" Make sure to change the names of the mapping after copy & pasting the code!

    /**
     * NOTE: This is not a mapped field of entity metadata, just a simple property.
     * 
     * @Vich\UploadableField(mapping="product_image", fileNameProperty="imageName", size="imageSize")
     * 
     * @var File
     */
    private $imageFile;

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

    /**
     * @ORM\Column(type="integer")
     *
     * @var integer
     */
    private $imageSize;

    /**
     * @ORM\Column(type="datetime")
     *
     * @var \DateTime
     */
    private $updatedAt;

In the Default Example weve used mapping "Product"! Change this to your desired folder name!

My Entity is called Location so I'm gonna change it to "Location"

     * @Vich\UploadableField(mapping="location", fileNameProperty="imageName", size="imageSize")
     * 
     * @var File
     */
    private $imageFile;

6. Now add the getter and setters at the bottom of the entity with the rest.

/**
     * If manually uploading a file (i.e. not using Symfony Form) ensure an instance
     * of 'UploadedFile' is injected into this setter to trigger the update. If this
     * bundle's configuration parameter 'inject_on_load' is set to 'true' this setter
     * must be able to accept an instance of 'File' as the bundle will inject one here
     * during Doctrine hydration.
     *
     * @param File|\Symfony\Component\HttpFoundation\File\UploadedFile $imageFile
     */
    public function setImageFile(?File $imageFile = null): void
    {
        $this->imageFile = $imageFile;

        if (null !== $imageFile) {
            // It is required that at least one field changes if you are using doctrine
            // otherwise the event listeners won't be called and the file is lost
            $this->updatedAt = new \DateTimeImmutable();
        }
    }

    public function getImageFile(): ?File
    {
        return $this->imageFile;
    }

    public function setImageName(?string $imageName): void
    {
        $this->imageName = $imageName;
    }

    public function getImageName(): ?string
    {
        return $this->imageName;
    }
    
    public function setImageSize(?int $imageSize): void
    {
        $this->imageSize = $imageSize;
    }

    public function getImageSize(): ?int
    {
        return $this->imageSize;
    }

// Full Entity Example

7. Now create your Crud with "php bin/console make:crud" and enter your Entity Name.
8. Now update your DB with "php bin/console doctrine:schema:update --force"
9. Navigate to the newly created Form in "src/Form/Your_Entity_Form_Name" and remove the following code

            ->add('imageName')
            ->add('imageSize')
            ->add('updatedAt')

10. In the same file make sure to have the following imports

use App\Entity\Location;
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;
use Vich\UploaderBundle\Form\Type\VichImageType;

11. In the same file add the following type field ->add('imageFile', VichImageType::class)

12. Navigate to "`src/templates/Your_Entity_Template_Folder" and REMOVE the following lines

<th>ImageSize</th>
<th>UpdatedAt</th>

<td>{{ location.imageSize }}</td>
<td>{{ location.updatedAt ? location.updatedAt|date('Y-m-d H:i:s') : '' }}</td>

// By removing this we will prevent showing unnecessary information.

13. To show a img replace "<td> {{ location.imageName }} </td>" with

<td><img src="{{ vich_uploader_asset(location, 'imageFile') }}" width="300px"></td>