feat: add image rendering in file display template

composer.json

@@ -23,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": {

src/Controller/ServeFileController.php

@@ -5,7 +5,6 @@ namespace App\Controller;
 use App\Service\FileSystemService;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 use Symfony\Component\HttpFoundation\BinaryFileResponse;
-use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\HttpFoundation\ResponseHeaderBag;
 use Symfony\Component\Routing\Attribute\Route;
 

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;

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 %}