blahblah blahblah - 3 months ago 9
PHP Question

Symfony form: uploaded image is not shown in edit form

I am trying to create form for Cafe entity.

Cafe.php

class Cafe{

/**
* @var string $image
* @Assert\File( maxSize = "1024k", mimeTypesMessage = "Please upload a valid Image")
* @ORM\Column(name="image", type="string", length=255, nullable=true)
*/
private $image;
}


CafeType.php

/**
* @param FormBuilderInterface $builder
* @param array $options
*/
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder
->add('name', TextType::class, array('label' => 'Name'))
->add('image', FileType::class, array(
'label' => 'Image',
'data_class' => null,
'required' => false
))
;
}


CafeController.php

public function editAction(Request $request, Cafe $cafe)
{
$editForm = $this->createForm('AdminBundle\Form\CafeType', $cafe);
$editForm->handleRequest($request);

if ($editForm->isSubmitted() && $editForm->isValid()) {
$img = $editForm['image']->getData();
if($img){
$fileLocation = $this->get('app.s3_file_uploader')->putFileToBucket($img, 'cafe-images/'.uniqid().'/cafe-image');
$cafe->setImage($fileLocation);
}

$em = $this->getDoctrine()->getManager();
$em->persist($cafe);
$em->flush();

return $this->redirectToRoute('cafe_index');
}

return $this->render('AdminBundle:Cafe:edit.html.twig', array(
'cafe' => $cafe,
'edit_form' => $editForm->createView()
));
}


In controller I am using custom service to save image in S3 bucket which returns image location-fileLocation. And then I set this file url to
$image
property of Cafe entity.

Creating Cafe works fine. But when I try to edit cafe, upload input is empty. So that when I click save, old image is removed. I need to upload iamge everytime when I want to edit cafe. How can I keep image file in edit form?

Answer

Make 2 fields for this:

  • image - for db
  • image2 - for form

Cafe.php

 class Cafe{

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

    /**
     * @var string $image
     * @Assert\File( maxSize = "1024k", mimeTypesMessage = "Please upload a valid Image")
     */
     private $image2;

 }

CafeType.php

/**
 * @param FormBuilderInterface $builder
 * @param array $options
 */
public function buildForm(FormBuilderInterface $builder, array $options)
{
    $builder
        ->add('name', TextType::class, array('label' => 'Name'))
        ->add('image', TextType::class, array(
            'label' => 'Image',
            'readonly' => true,
            'required'    => false
        ))
        ->add('image2', FileType::class, array(
            'label' => 'Image',
            'data_class' => null,
            'required'    => false
        ))
    ;
}

CafeController.php

public function editAction(Request $request, Cafe $cafe)
{
    $editForm = $this->createForm('AdminBundle\Form\CafeType', $cafe);
    $editForm->handleRequest($request);

    if ($editForm->isSubmitted() && $editForm->isValid()) {
        $img = $editForm['image2']->getData();
        if($img){
            $fileLocation = $this->get('app.s3_file_uploader')->putFileToBucket($img, 'cafe-images/'.uniqid().'/cafe-image');
            $cafe->setImage($fileLocation);
        }

        $em = $this->getDoctrine()->getManager();
        $em->persist($cafe);
        $em->flush();

        return $this->redirectToRoute('cafe_index');
    }

    return $this->render('AdminBundle:Cafe:edit.html.twig', array(
        'cafe' => $cafe,
        'edit_form' => $editForm->createView()
    ));
}

Hope this will help