Add flysystem in api & add images in admin

admin/src/components/lot/Show.tsx

@@ -1,7 +1,9 @@
 import {FunctionComponent} from "react";
 import {Lot} from "../../types/Lot";
 import {FieldGuesser, ShowGuesser} from "@api-platform/admin";
-import {ReferenceField} from "react-admin";
+import {FunctionField, ReferenceField} from "react-admin";
+// @ts-ignore
+import {ENTRYPOINT} from "../../config/entrypoint.ts";
 
 interface Props {
     lot: Lot;
@@ -14,7 +16,11 @@ export const Show: FunctionComponent<Props> = ({lot}) => {
             <FieldGuesser source="quantity"/>
             <FieldGuesser source="message"/>
             <ReferenceField label="Image" source="image" reference="media_objects" link="show">
-                <FieldGuesser source="name"/>
+                <FieldGuesser source="name"/><br/>
+                <FunctionField
+                    label="Image"
+                    render={record => {return <img style={{ width:"100%", maxWidth: "500px", maxHeight: "500px"}} src={ENTRYPOINT + "/image/" + record.filePath} alt={record.name} />;}}
+                />
             </ReferenceField>
         </ShowGuesser>
     );

admin/src/components/mediaObject/Edit.tsx

@@ -1,6 +1,9 @@
 import {FunctionComponent} from "react";
 import {MediaObject} from "../../types/MediaObject";
 import {EditGuesser, InputGuesser} from "@api-platform/admin";
+import {FunctionField} from "react-admin";
+// @ts-ignore
+import {ENTRYPOINT} from "../../config/entrypoint.ts";
 
 interface Props {
     mediaObject: MediaObject;
@@ -9,5 +12,9 @@ interface Props {
 export const Edit: FunctionComponent<Props> = ({mediaObject}) => (
     <EditGuesser {...mediaObject}>
         <InputGuesser source="name"/>
+        <FunctionField
+            label="Image"
+            render={record => {return <img style={{ width:"100%", maxWidth: "500px", maxHeight: "500px"}} src={ENTRYPOINT + "/image/" + record.filePath} alt={record.name} />;}}
+        />
     </EditGuesser>
 );

admin/src/components/mediaObject/List.tsx

@@ -1,6 +1,9 @@
 import {FunctionComponent} from "react";
 import {MediaObject} from "../../types/MediaObject";
 import {FieldGuesser, ListGuesser} from "@api-platform/admin";
+import {FunctionField} from "react-admin";
+// @ts-ignore
+import {ENTRYPOINT} from "../../config/entrypoint.ts";
 
 interface Props {
     mediaObjects: MediaObject[];
@@ -10,5 +13,9 @@ interface Props {
 export const List: FunctionComponent<Props> = ({mediaObjects}) => (
     <ListGuesser rowClick="show" {...mediaObjects}>
         <FieldGuesser source="name"/>
+        <FunctionField
+            label="Image"
+            render={record => {return <img style={{ width:"100%", maxWidth: "150px", maxHeight: "150px"}} src={ENTRYPOINT + "/image/" + record.filePath} alt={record.name} />;}}
+        />;
     </ListGuesser>
 );

admin/src/components/mediaObject/Show.tsx

@@ -1,6 +1,9 @@
 import {FunctionComponent} from "react";
 import {MediaObject} from "../../types/MediaObject";
 import {FieldGuesser, ShowGuesser} from "@api-platform/admin";
+import {FunctionField} from "react-admin";
+// @ts-ignore
+import {ENTRYPOINT} from "../../config/entrypoint.ts";
 
 interface Props {
     mediaObject: MediaObject;
@@ -9,7 +12,11 @@ interface Props {
 export const Show: FunctionComponent<Props> = ({mediaObject}) => {
     return (
         <ShowGuesser {...mediaObject}>
-            <FieldGuesser source="name"/>
+            <FieldGuesser source="name"/><br/>
+            <FunctionField
+                label="Image"
+                render={record => {return <img style={{ width:"100%", maxWidth: "500px", maxHeight: "500px"}} src={ENTRYPOINT + "/image/" + record.filePath} alt={record.name} />;}}
+            />
         </ShowGuesser>
     );
 }

api/composer.json

@@ -15,6 +15,7 @@
         "doctrine/doctrine-migrations-bundle": "^3.2",
         "doctrine/orm": "^2.12",
         "lcobucci/jwt": "^4.1",
+        "league/flysystem-bundle": "^2.3",
         "lexik/jwt-authentication-bundle": "^2.16",
         "nelmio/cors-bundle": "^2.2",
         "phpdocumentor/reflection-docblock": "^5.3",

api/config/bundles.php

@@ -22,4 +22,5 @@
     Fidry\AliceDataFixtures\Bridge\Symfony\FidryAliceDataFixturesBundle::class => ['dev' => true, 'test' => true],
     Hautelook\AliceBundle\HautelookAliceBundle::class => ['dev' => true, 'test' => true],
     Symfony\Bundle\MercureBundle\MercureBundle::class => ['all' => true],
+    League\FlysystemBundle\FlysystemBundle::class => ['all' => true],
 ];

api/config/packages/flysystem.yaml

@@ -0,0 +1,7 @@
+# Read the documentation at https://github.com/thephpleague/flysystem-bundle/blob/master/docs/1-getting-started.md
+flysystem:
+    storages:
+        default.media:
+            adapter: 'local'
+            options:
+                directory: '%kernel.project_dir%/public/media'

api/config/packages/security.yaml

@@ -40,6 +40,7 @@ security:
     access_control:
         - { path: ^/api/login, roles: PUBLIC_ACCESS }
         - { path: ^/api, roles: PUBLIC_ACCESS }
+        - { path: ^/image, roles: PUBLIC_ACCESS }
         - { path: ^/, roles: IS_AUTHENTICATED_FULLY }
 
 when@test:

api/config/packages/vich_uploader.yaml

@@ -1,9 +1,10 @@
 vich_uploader:
     db_driver: orm
+    storage: flysystem
 
     mappings:
         media_object:
             uri_prefix: /media
-            upload_destination: '%kernel.project_dir%/public/media'
+            upload_destination: default.media
             # Will rename uploaded files using a uniqueid as a prefix.
             namer: Vich\UploaderBundle\Naming\OrignameNamer

api/src/Controller/ImageReaderController.php

@@ -0,0 +1,21 @@
+<?php
+
+namespace App\Controller;
+
+use App\Entity\MediaObject;
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\BinaryFileResponse;
+use Symfony\Component\Routing\Annotation\Route;
+
+class ImageReaderController extends AbstractController
+{
+    #[Route('/image/{filePath}', name: 'app_image_reader')]
+    public function indexReader(MediaObject $image): BinaryFileResponse
+    {
+        $root = explode('/', __DIR__);
+        $root = \array_slice($root, 0, -2);
+        $root = implode('/', $root);
+        $filename = "/public/media/" . $image->getFilePath();
+        return new BinaryFileResponse($root.$filename);
+    }
+}

api/src/Entity/MediaObject.php

@@ -68,8 +68,8 @@
     order: ['name' => 'ASC'],
     paginationClientItemsPerPage: true
 )]
-#[ApiFilter(SearchFilter::class, properties: ['name' => 'partial', 'filePath' => 'partial'])]
-#[ApiFilter(OrderFilter::class, properties: ['name', 'filePath'])]
+#[ApiFilter(SearchFilter::class, properties: ['name' => 'partial'])]
+#[ApiFilter(OrderFilter::class, properties: ['name'])]
 class MediaObject
 {
     #[ORM\Id]
@@ -108,6 +108,7 @@ class MediaObject
     private ?File $file = null;
 
     #[ORM\Column(name: 'file_path', unique: true, nullable: true)]
+    #[Groups(['media_object:read'])]
     private ?string $filePath = null;
 
     public function getId(): Uuid