Symfony VichUploader : Cannot see file button to upload

Question

Hello I am testing symfony and i would like to upload file using VichUploaderBundle i am trying to use VichUploader but it does not display input type file. I am using Symfony 3.4 I have followed the tutorial in symfony website related to VichUploaderBundle this image shows what i got photo.

Below the codes

Parameters.yml

parameters:
    app.path.images: /uploads/images

Product.php

<?php

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

/**
 * @ORM\Entity
* @Vich\Uploadable
*/
class Product
{
/**
 * @var int
 *
 * @ORM\Column(name="id", type="integer")
 * @ORM\Id
 * @ORM\GeneratedValue(strategy="AUTO")
 */
private $id;

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

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

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

// ...

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

    // VERY IMPORTANT:
    // 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
    if ($image) {
        // if 'updatedAt' is not defined in your entity, use another property
        $this->updatedAt = new \DateTime('now');
    }
}


/**
 * Get id
 *
 * @return int
 */
public function getId()
{
    return $this->id;
}

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

public function setImage($image)
{
    $this->image = $image;
}

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


public function setUpdatedAt($updatedAt)
{
    $this->updatedAt = $updatedAt;

    return $this;
}

/**
 * Get updatedAt
 *
 * @return \DateTime
 */
public function getUpdatedAt()
{
    return $this->updatedAt;
}

}

?>

config.yml

vich_uploader:
    db_driver: orm
    mappings:
        product_images:
        uri_prefix: '%app.path.images%'
        upload_destination: '%kernel.root_dir%/../web/uploads/images'

Form generated

<?php

namespace AppBundle\Form;

use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;

class ProductType extends AbstractType
{
/**
 * {@inheritdoc}
 */
public function buildForm(FormBuilderInterface $builder, array $options)
{
    $builder
    ->add('image', VichImageType::class, [
   'required' => false,
   'allow_delete' => true,
   'download_label' => '...',
   'download_uri' => true,
   'image_uri' => true,
   'imagine_pattern' => '...',])
   ->add('image')->add('updatedAt');
}/**
 * {@inheritdoc}
 */
public function configureOptions(OptionsResolver $resolver)
{
    $resolver->setDefaults(array(
        'data_class' => 'AppBundle\Entity\Product'
    ));
}

/**
 * {@inheritdoc}
 */
 public function getBlockPrefix()
 {
    return 'appbundle_product';
 }


}

Answer 1

You should use the VichImageType to display the image field in your form like explained in the docs: https://github.com/dustin10/VichUploaderBundle/blob/master/Resources/doc/form/vich_image_type.md

$builder->add('image', VichImageType::class, [
       'required' => false,
       'allow_delete' => true,
       'download_label' => '...',
       'download_uri' => true,
       'image_uri' => true,
       'imagine_pattern' => '...',
]);

If you use the EasyAdminBundle and want to integrate the VichUploaderBundle Make sure you specify the correct type for your field. You don't need a FormType in this case.

easy_admin:
    entities:
        Product:
            # ...
            form:
                fields:
                    - { property: 'imageFile', type: 'vich_image' }

Check out this tutorial: https://symfony.com/doc/master/bundles/EasyAdminBundle/integration/vichuploaderbundle.html#uploading-the-images-in-the-edit-and-new-views