wip

I have tested this with png and jpeg/jpg which both work but most other image types should work as well.
![image](/attachments/25318577-d48c-4902-93b3-9adbb8b954e7)

Co-authored-by: Jan Klattenhoff <j.klattenhoff@neusta.de>
Reviewed-on: sites/file-explorer#12
Co-authored-by: jank1619 <jan@kjan.email>
Co-committed-by: jank1619 <jan@kjan.email>

.ddev/config.yaml

@@ -7,8 +7,8 @@ xdebug_enabled: false
 additional_hostnames: []
 additional_fqdns: []
 database:
-    type: mariadb
-    version: "10.11"
+    type: postgres
+    version: "17"
 use_dns_when_possible: true
 composer_version: "2"
 web_environment: []

.gitea/workflows/build.yaml

@@ -7,10 +7,10 @@ on:
       - main
 jobs:
   build:
-    runs-on: ubuntu-latest
+    runs-on: remote
     steps:
-      - uses: actions/checkout@v4
-      - uses: docker/login-action@v1
+      - uses: https://git.simonis.lol/actions/checkout@v4
+      - uses: https://git.simonis.lol/actions/login@v1
         with:
           registry: git.simonis.lol
           username: ${{ vars.DOCKER_USER }}

composer.json

@@ -15,6 +15,7 @@
         "symfony/flex": "^2",
         "symfony/form": "^7.1",
         "symfony/framework-bundle": "7.1.*",
+        "symfony/mime": "7.1.*",
         "symfony/runtime": "7.1.*",
         "symfony/stimulus-bundle": "^2.22",
         "symfony/twig-bundle": "7.1.*",
@@ -22,7 +23,8 @@
         "symfony/yaml": "7.1.*",
         "symfonycasts/tailwind-bundle": "^0.6.1",
         "twig/extra-bundle": "^2.12|^3.0",
-        "twig/twig": "^2.12|^3.0"
+        "twig/twig": "^2.12|^3.0",
+        "ext-fileinfo": "*"
     },
     "config": {
         "allow-plugins": {

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "8278464727736866734f277693979fb2",
+    "content-hash": "46ba6e6e4f31d38d71c65f5acfdff136",
     "packages": [
         {
             "name": "composer/semver",
@@ -1993,6 +1993,90 @@
             ],
             "time": "2024-11-13T14:25:32+00:00"
         },
+        {
+            "name": "symfony/mime",
+            "version": "v7.1.6",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/mime.git",
+                "reference": "caa1e521edb2650b8470918dfe51708c237f0598"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/mime/zipball/caa1e521edb2650b8470918dfe51708c237f0598",
+                "reference": "caa1e521edb2650b8470918dfe51708c237f0598",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.2",
+                "symfony/polyfill-intl-idn": "^1.10",
+                "symfony/polyfill-mbstring": "^1.0"
+            },
+            "conflict": {
+                "egulias/email-validator": "~3.0.0",
+                "phpdocumentor/reflection-docblock": "<3.2.2",
+                "phpdocumentor/type-resolver": "<1.4.0",
+                "symfony/mailer": "<6.4",
+                "symfony/serializer": "<6.4.3|>7.0,<7.0.3"
+            },
+            "require-dev": {
+                "egulias/email-validator": "^2.1.10|^3.1|^4",
+                "league/html-to-markdown": "^5.0",
+                "phpdocumentor/reflection-docblock": "^3.0|^4.0|^5.0",
+                "symfony/dependency-injection": "^6.4|^7.0",
+                "symfony/process": "^6.4|^7.0",
+                "symfony/property-access": "^6.4|^7.0",
+                "symfony/property-info": "^6.4|^7.0",
+                "symfony/serializer": "^6.4.3|^7.0.3"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Symfony\\Component\\Mime\\": ""
+                },
+                "exclude-from-classmap": [
+                    "/Tests/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Fabien Potencier",
+                    "email": "fabien@symfony.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Allows manipulating MIME messages",
+            "homepage": "https://symfony.com",
+            "keywords": [
+                "mime",
+                "mime-type"
+            ],
+            "support": {
+                "source": "https://github.com/symfony/mime/tree/v7.1.6"
+            },
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2024-10-25T15:11:02+00:00"
+        },
         {
             "name": "symfony/options-resolver",
             "version": "v7.1.9",
@@ -2222,6 +2306,89 @@
             ],
             "time": "2024-09-09T11:45:10+00:00"
         },
+        {
+            "name": "symfony/polyfill-intl-idn",
+            "version": "v1.31.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/polyfill-intl-idn.git",
+                "reference": "c36586dcf89a12315939e00ec9b4474adcb1d773"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/polyfill-intl-idn/zipball/c36586dcf89a12315939e00ec9b4474adcb1d773",
+                "reference": "c36586dcf89a12315939e00ec9b4474adcb1d773",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=7.2",
+                "symfony/polyfill-intl-normalizer": "^1.10"
+            },
+            "suggest": {
+                "ext-intl": "For best performance"
+            },
+            "type": "library",
+            "extra": {
+                "thanks": {
+                    "url": "https://github.com/symfony/polyfill",
+                    "name": "symfony/polyfill"
+                }
+            },
+            "autoload": {
+                "files": [
+                    "bootstrap.php"
+                ],
+                "psr-4": {
+                    "Symfony\\Polyfill\\Intl\\Idn\\": ""
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Laurent Bassin",
+                    "email": "laurent@bassin.info"
+                },
+                {
+                    "name": "Trevor Rowbotham",
+                    "email": "trevor.rowbotham@pm.me"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Symfony polyfill for intl's idn_to_ascii and idn_to_utf8 functions",
+            "homepage": "https://symfony.com",
+            "keywords": [
+                "compatibility",
+                "idn",
+                "intl",
+                "polyfill",
+                "portable",
+                "shim"
+            ],
+            "support": {
+                "source": "https://github.com/symfony/polyfill-intl-idn/tree/v1.31.0"
+            },
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2024-09-09T11:45:10+00:00"
+        },
         {
             "name": "symfony/polyfill-intl-normalizer",
             "version": "v1.31.0",

src/Controller/HomeController.php

@@ -28,7 +28,7 @@ class HomeController extends AbstractController
 
         return $this->render('home.html.twig', [
             'content' => $fileSystemService->getDirs($dirs),
-            'fileForm' => $this->createForm(UploadFileForm::class),
+            'fileForm' => $this->createForm(UploadFileForm::class, data: ['dirs' => $dirs]),
         ]);
     }
 }

src/Controller/ServeFileController.php

@@ -0,0 +1,28 @@
+<?php declare(strict_types=1);
+
+namespace App\Controller;
+
+use App\Service\FileSystemService;
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\BinaryFileResponse;
+use Symfony\Component\HttpFoundation\ResponseHeaderBag;
+use Symfony\Component\Routing\Attribute\Route;
+
+class ServeFileController extends AbstractController
+{
+    public function __construct(private FileSystemService $fileSystemService)
+    {
+    }
+
+    #[Route("/serve/{filePath}", name: "serve_file")]
+    public function __invoke(string $filePath): BinaryFileResponse
+    {
+        $file = $this->fileSystemService->getFile($filePath);
+        $path = $file->getPath() . '/' . $file->getName();
+
+        $response = new BinaryFileResponse($path);
+        $response->setContentDisposition(ResponseHeaderBag::DISPOSITION_ATTACHMENT, $file->getName());
+
+        return $response;
+    }
+}

src/Controller/UploadController.php

@@ -13,17 +13,24 @@ use Symfony\Component\Routing\Attribute\Route;
 
 class UploadController extends AbstractController
 {
-    #[Route(path: '/upload', name: 'app_upload', methods: Request::METHOD_POST)]
+    #[Route(
+        path: '/upload/{dirs?}',
+        name: 'app_upload',
+        requirements: ['dirs' => '.+'],
+        defaults: ['dirs' => ''],
+        methods: Request::METHOD_POST,
+    )]
     public function __invoke(
         FileSystemService $fileSystemService,
         Request $request,
+        string $dirs,
     ): Response
     {
-        $fileData = new UploadedFileData();
-        $form  = $this->createForm(UploadFileForm::class, $fileData)->handleRequest($request);
+        $fileData = new UploadedFileData(dir: $dirs);
+        $form = $this->createForm(UploadFileForm::class, $fileData)->handleRequest($request);
 
         if ($form->isSubmitted() && $form->isValid()) {
-            $fileSystemService->uploadFile($fileData->files);
+            $fileSystemService->uploadFile($fileData);
         }
 
         return $this->redirectToRoute('app_home');

src/Forms/UploadFileForm.php

@@ -16,7 +16,7 @@ class UploadFileForm extends AbstractType
     public function buildForm(FormBuilderInterface $builder, array $options)
     {
         $builder
-            ->setAction($this->urlGenerator->generate('app_upload'))
+            ->setAction($this->urlGenerator->generate('app_upload', ['dirs' => $options['data']['dirs']]))
             ->add('files', FileType::class, [
             'attr' => ['class' => 'hidden'],
             'multiple' => true,

src/Objects/DirContent.php

@@ -14,6 +14,7 @@ readonly class DirContent
         private string $type,
         private string $path,
         private string $content,
+        private string $mimeType,
     ) {
     }
 
@@ -24,7 +25,8 @@ readonly class DirContent
             $fileInfo->getSize() ?? 0,
             $fileInfo->getType() ?? 'N/A',
             $fileInfo->getPath(),
-            $content
+            $content,
+            mime_content_type($fileInfo->getPath() . '/' . $fileInfo->getFilename()),
         );
     }
 
@@ -57,6 +59,11 @@ readonly class DirContent
         return $this->content;
     }
 
+    public function getMimeType(): string
+    {
+        return $this->mimeType;
+    }
+
     private function getHumanReadableSize(): string
     {
         $bytes = $this->size;

src/Objects/UploadedFileData.php

@@ -6,8 +6,13 @@ use Symfony\Component\HttpFoundation\File\UploadedFile;
 
 class UploadedFileData
 {
-    /**
-     * @var UploadedFile[] $files
-     */
-    public array $files;
+    public function __construct(
+        /**
+         * @var UploadedFile[] $files
+         */
+        public array $files = [],
+
+        public string $dir = '',
+    ) {
+    }
 }

src/Service/FileSystemService.php

@@ -3,18 +3,20 @@
 namespace App\Service;
 
 use App\Objects\DirContent;
+use App\Objects\UploadedFileData;
 use Symfony\Component\DependencyInjection\Attribute\Autowire;
 use Symfony\Component\Filesystem\Exception\IOException;
 use Symfony\Component\Filesystem\Filesystem;
 use Symfony\Component\Finder\Finder;
 use Symfony\Component\HttpFoundation\File\UploadedFile;
+use Symfony\Component\HttpFoundation\RequestStack;
 
 class FileSystemService
 {
     public function __construct(
         #[Autowire(env: 'DATA_DIR')]
         private readonly string $dir,
-         private readonly Filesystem $filesystem,
+        private readonly Filesystem $filesystem,
     ) {
     }
 
@@ -35,13 +37,11 @@ class FileSystemService
         return $contents;
     }
 
-    /**
-     * @param UploadedFile[] $files
-     */
-    public function uploadFile(array $files): void
+    public function uploadFile(UploadedFileData $files): void
     {
-        foreach ($files as $file) {
-            $this->filesystem->dumpFile($this->getTotalPath($file->getClientOriginalName()), $file->getContent());
+        dd($files);
+        foreach ($files->files as $file) {
+            $this->filesystem->dumpFile($files->dir . $this->getTotalPath($file->getClientOriginalName()), $file->getContent());
         }
     }
 

templates/file.html.twig

@@ -15,7 +15,11 @@
         </a>
 
         <div class="mt-6 text-gray-700 overflow-auto max-h-96">
-            <p class="whitespace-pre-wrap leading-relaxed break-all text-balance">{{ file.content|raw }}</p>
+            {% if file.mimeType starts with 'image' %}
+                <img src="{{ path('serve_file', {filePath: file.name}) }}" alt="">
+            {% else %}
+                <p class="whitespace-pre-wrap leading-relaxed break-all text-balance">{{ file.content|raw }}</p>
+            {% endif %}
         </div>
     </div>
 {% endblock %}

templates/home.html.twig

@@ -3,7 +3,7 @@
 {% block title %}Home{% endblock %}
 
 {% block body %}
-    <center class="container mt-5">
+    <center class="container mt-5 mx-auto">
         {% include '_partials/_table.html.twig' %}
     </center>
 {% endblock %}