W tym tutorialu pokażę w jaki sposób dodać do EasyAdmin (w Symfony 4) możliwość uploadowania plików graficznych na serwer. Wykorzystam do tego celu pakiet VichUploaderBundle. Przykłady zawarte w tym rozdziale są kontynuacją tematów: INSTALACJA SYMFONY 4 + EASYADMIN oraz (opcjonalnie) EASYADMIN I CKEDITOR.
1. Zaczniemy od utworzenia struktury katalogów: public/images/.
Do tego folderu będą uploadowane pliki za pomocą wygenerowanego formularza (rysunek powyżej). Upewnij się, że katalog images ma prawa do zapisu 777.
2. Instalujemy pakiet VichUploaderBundle:
1 |
$ composer require vich/uploader-bundle |
oraz dołączamy go w pliku bundles.php:
1 2 3 4 5 6 |
// config/bundles.php return [ // ... Vich\UploaderBundle\VichUploaderBundle::class => ['all' => true], ]; |
3. Wprowadzamy konfigurację w pliku vich_uploader.yaml (/config/packages/vich_uploader.yaml):
1 2 3 4 5 6 |
vich_uploader: db_driver: orm mappings: page_image: uri_prefix: images upload_destination: '%kernel.project_dir%/public/images' |
- mappings – oznaczenie mapowania (page_image – nazwa ta musi pokrywać się z nazwą zawartą w klasie Page.php – @Vich\UploadableField(mapping=
„page_image”) – patrz kolejny punkt 4. , - uri_prefix – nazwa katalogu docelowego,
- upload_destination – adres do katalogu, do którego będą „wrzucane” pliki.
4. Aktualizujemy klasę Page.php:
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 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 |
<?php // src/Entity/Page.php namespace App\Entity; use Doctrine\Common\Collections\ArrayCollection; use Doctrine\Common\Collections\Collection; use Doctrine\ORM\Mapping as ORM; use Symfony\Component\Validator\Constraints as Assert; use Symfony\Component\HttpFoundation\File\File; use Vich\UploaderBundle\Mapping\Annotation as Vich; /** * @ORM\Entity * @ORM\Table(name="page") * @Vich\Uploadable */ class Page { /** * @var int * @ORM\Id * @ORM\GeneratedValue * @ORM\Column(type="integer") */ private $id; /** * @var string * @ORM\Column(type="string") * @Assert\NotBlank */ private $title; /** * @var string * @ORM\Column(type="text") * @Assert\NotBlank(message="page.blank_content") * @Assert\Length(min=10, minMessage="page.too_short_content") */ private $content; /** * @var bool * @ORM\Column(type="boolean") */ private $enabled; /** * @var \DateTime * @ORM\Column(type="datetime") * @Assert\Type(type="\DateTime") */ private $createdAt; public function __construct() { $this->createdAt = new \DateTime(); } public function getId(): ?int { return $this->id; } public function setId(?int $id): void { $this->id = $id; } public function getTitle(): ?string { return $this->title; } public function setTitle(?string $title): void { $this->title = $title; } public function getContent(): ?string { return $this->content; } public function setContent(?string $content): void { $this->content = $content; } public function getEnabled(): ?bool { return $this->enabled; } public function setEnabled(?bool $enabled): void { $this->enabled = $enabled; } public function getCreatedAt(): \DateTime { return $this->createdAt; } public function setCreatedAt(?\DateTime $createdAt): void { $this->createdAt = $createdAt; } /** * @Vich\UploadableField(mapping="page_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; /** * @param File|\Symfony\Component\HttpFoundation\File\UploadedFile $image */ public function setImageFile(?File $image = null): void { $this->imageFile = $image; if (null !== $image) { $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; } } |
5. Aktualizujemy tabele w bazie:
1 |
$ php bin/console doctrine:schema:update --force |
6. Aktualizujemy plik konfiguracyjny easy_admin.yaml (/config/packages/easy_admin.yaml):
1 2 3 4 5 6 7 8 9 10 11 |
easy_admin: entities: Page: class: App\Entity\Page form: fields: - 'title' - { property: 'imageFile', type: 'vich_image' } - { property: 'content', type: 'FOS\CKEditorBundle\Form\Type\CKEditorType' } - 'enabled' - 'createdAt' |
Wybierając typ vich_image dla kontrolki formularza imageFile otrzymamy gotowy efekt jak na obrazku poniżej:
Uruchom przeglądarkę i sprawdź działanie aplikacji.