How do I upload picture with Symfony? - symfony

Question

My entity looks like this
<?php
namespace App\Entity;
use App\Repository\AnimauxRepository;
use Doctrine\ORM\Mapping as ORM;
/**
* #ORM\Entity(repositoryClass=AnimauxRepository::class)
*/
class Animaux
{
// ...
/**
* #ORM\Column(type="string")
*/
private $photo;
// ...
public function getPhoto()
{
return $this->photo;
}
public function setPhoto($photo)
{
$this->photo = $photo;
return $this;
}
// ...
}
My AnimauxType.php looks like this
<?php
// AnimauxType.php
namespace App\Form;
use App\Entity\Animaux;
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\Validator\Constraints\File;
use Symfony\Component\OptionsResolver\OptionsResolver;
use Symfony\Component\Form\Extension\Core\Type\FileType;
use Symfony\Component\Form\Extension\Core\Type\TextType;
use Symfony\Component\Form\Extension\Core\Type\ChoiceType;
use Symfony\Component\Form\Extension\Core\Type\SubmitType;
use Symfony\Component\Form\Extension\Core\Type\IntegerType;
use Symfony\Component\Form\Extension\Core\Type\TextareaType;
class AnimauxType extends AbstractType
{
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder
// ...
->add('photo', FileType::class, [
'data_class'=>null,
'label' => 'Photo (jpg ou png)',
'mapped' => false,
'required' => false,
'constraints' => [
new File([
'maxSize' => '1024k',
'mimeTypes' => [
'image/jpg',
'image/jpeg',
'image/png',
'image/gif',
'image/jfif',
],
'mimeTypesMessage' => 'Please upload a valid image',
])
],
])
// ...
;
}
public function configureOptions(OptionsResolver $resolver)
{
$resolver -> setDefault('data_class', Animaux::class);
}
}
My AnimauxController.php looks like this
public function new(Request $request, SluggerInterface $slugger): Response
{
$animaux = new Animaux();
$form = $this->createForm(AnimauxType::class, $animaux);
$form->handleRequest($request);
if ($form->isSubmitted() && $form->isValid()) {
/** #var UploadedFile $photo */
$photo = $form->get('photo')->getData();
if ($photo) {
$originalFilename = pathinfo($photo->getClientOriginalName(), PATHINFO_FILENAME);
$safeFilename = $slugger->slug($originalFilename);
$newFilename = $safeFilename.'-'.uniqid().'.'.$photo->guessExtension();
try {
$photo->move(
$this->getParameter('photo_directory'),
$newFilename
);
} catch (FileException $e) {
// ... handle exception if something happens during file upload
}
$animaux->setPhoto(
new File($this->getParameter('photo_directory').'/'.$animaux->getPhoto())
);
}
$entityManager = $this->getDoctrine()->getManager();
$entityManager->persist($animaux);
$entityManager->flush();
return $this->redirectToRoute('animaux_index');
}
and finally I've added this in service.yaml
parameters:
photo_directory: '%kernel.project_dir%/public/uploads/photos'
When i try to upload a picture in my form, I get no error but I can't see the picture. Here's how I try to display the picture <img src="{{asset('uploads/photo/' ~ animaux.photo)}}" alt=""> but when i look at the code i get this <img src="/petandconnect/public/uploads/photo/C:\Users\...\Temp\php4EA9.tmp" alt="">
Can't make heads or tails of this.

Answer 1

[VichUploaderBundle] will be your friend in that case. Your browser won't recognize the relative path of a file comming directly from your database. You will need another property photoFile of type File that will be mapped with your property "photo".
Just google the procedure with VichUpploaderBundle and it will work. It is the bundle approved by the community for uploaded file. Also, don't forget to use the cacheManager to remove former photos from the cache or your app will slow down.