[4.x] Ajouter image preview sur upload d'image avec SonataAdmin

Bonjour,

j'ai une entité avec un champ de type fichier.
L'upload se passe bien et dans ma vue de liste je récupère bien le nom fichier.

Maintenant, j'aimerais ajouter l'image dans ma vue d'édition car à l'heure actuelle si je reviens sur un objet enregistré, je ne vois toujours que le file picker.

Ma classe ForumAdmin

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
class ForumAdmin extends AbstractAdmin
{
    protected function configureFormFields(FormMapper $formMapper)
    {
        $formMapper->add('name', TextType::class);
        $formMapper->add('description', TextAreaType::class);
        $formMapper->add('weight', IntegerType::class);
        $formMapper->add('category', EntityType::class, [
            'class' => Category::class,
            'choice_label' => 'name',
        ]);
        $formMapper->add('file', FileType::class, array('required' => false));
    }
 
    protected function configureDatagridFilters(DatagridMapper $datagridMapper)
    {
        $datagridMapper->add('name');
        $datagridMapper->add('category');
    }
 
    protected function configureListFields(ListMapper $listMapper)
    {
        $listMapper->addIdentifier('name');
        $listMapper->addIdentifier('description');
        $listMapper->addIdentifier('category');
        $listMapper->addIdentifier('weight');
        $listMapper->addIdentifier('createdAt');
        $listMapper->addIdentifier('updatedAt');
        $listMapper->addIdentifier('imageName');
    }
 
    public function prePersist($object)
    {
        parent::prePersist($object);
        if($object instanceof Forum){
            $object->setCreatedAt(new \DateTime('now'));
            $object->setUpdatedAt(new \DateTime('now'));
            $object->setStatus("NO_NEW");
            $this->saveFile($object);
        }
 
    }
 
  public function preUpdate($forum){
    $this->saveFile($forum);
  }
 
  public function saveFile($forum) {
    $basepath = $this->getRequest()->getBasePath();
    $forum->upload($basepath);
  }
 
}

Ma classe ImageAdmin

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
final class ImageAdmin extends AbstractAdmin
{
    protected function configureFormFields(FormMapper $formMapper)
    {
        $formMapper
            ->add('image', FileType::class);
    }
 
    public function prePersist($image)
    {
        $this->manageFileUpload($image);
    }
 
    public function preUpdate($image)
    {
        $this->manageFileUpload($image);
    }
 
    private function manageFileUpload($image)
    {
        if ($image->getFile()) {
            $image->refreshUpdated();
        }
    }
}

Mon entité Forum (je vous fais grace des getters / setters)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
/**
 * @ORM\Entity(repositoryClass="App\Repository\ForumRepository")
 */
class Forum
{
    /**
     * @ORM\Id()
     * @ORM\GeneratedValue()
     * @ORM\Column(type="integer")
     */
    private $id;
 
    /**
     * @ORM\Column(type="string", length=255)
     */
    private $name;
 
    /**
     * @ORM\Column(type="string", length=2000)
     */
    private $description;
 
    /**
     * @ORM\Column(type="integer")
     */
    private $weight;
 
    /**
     * @ORM\Column(type="datetime")
     */
    private $createdAt;
 
    /**
     * @ORM\Column(type="datetime")
     */
    private $updatedAt;
 
    /**
     * @ORM\Column(type="string", length=255)
     * Status can be NEW / NO_NEW / LOCK
     */
    private $status;
 
    /**
     * @ORM\ManyToOne(targetEntity="App\Entity\Category", inversedBy="forums")
     * @ORM\JoinColumn(nullable=false)
     */
    private $category;
 
    /**
     * @ORM\Column(type="string", length=255)
     */
    public $imageName;
 
    public $file;
 
}

Mon entité Image

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
    const SERVER_PATH_TO_IMAGE_FOLDER = '/public/images';
 
    /**
     * Unmapped property to handle file uploads
     */
    private $file;
 
    /**
     * @param UploadedFile $file
     */
    public function setFile(UploadedFile $file = null)
    {
        $this->file = $file;
    }
 
    /**
     * @return UploadedFile
     */
    public function getFile()
    {
        return $this->file;
    }
 
    /**
     * Manages the copying of the file to the relevant place on the server
     */
    public function upload()
    {
        // the file property can be empty if the field is not required
        if (null === $this->getFile()) {
            return;
        }
 
       // we use the original file name here but you should
       // sanitize it at least to avoid any security issues
 
       // move takes the target directory and target filename as params
       $this->getFile()->move(
           self::SERVER_PATH_TO_IMAGE_FOLDER,
           $this->getFile()->getClientOriginalName()
       );
 
       // set the path property to the filename where you've saved the file
       $this->filename = $this->getFile()->getClientOriginalName();
 
       // clean up the file property as you won't need it anymore
       $this->setFile(null);
   }
 
   /**
    * Lifecycle callback to upload the file to the server.
    */
   public function lifecycleFileUpload()
   {
       $this->upload();
   }
 
   /**
    * Updates the hash value to force the preUpdate and postUpdate events to fire.
    */
   public function refreshUpdated()
   {
      $this->setUpdated(new \DateTime());
   }

La doc est explicité ici, mais je n'arrive à rien avec : https://sonata-project.org/bundles/a..._previews.html