Dockerfile

@@ -17,4 +17,4 @@ RUN docker-php-ext-install pdo pdo_mysql mysqli gd opcache intl zip calendar dom
 RUN pecl install apcu && docker-php-ext-enable apcu
 
 WORKDIR /var/www/project
-RUN composer install --no-dev --optimize-autoloader --no-suggest --no-progress
+RUN composer install --optimize-autoloader --no-suggest --no-progress

assets/styles/app.css

@@ -1,3 +1,8 @@
 body {
     background-color: transparent;
 }
+
+a:hover {
+    color: deepskyblue;
+    text-decoration: underline;
+}

config/packages/twig.yaml

@@ -1,5 +1,7 @@
 twig:
     file_name_pattern: '*.twig'
+    globals:
+        routing_service: '@App\Service\Twig\RoutingService'
 
 when@test:
     twig:

src/Controller/HomeController.php

@@ -11,11 +11,17 @@ use Symfony\Component\Routing\Attribute\Route;
 
 class HomeController extends AbstractController
 {
-    #[Route(path: '/files', name: 'app_home', methods: [Request::METHOD_GET])]
-    public function __invoke(FileSystemService $fileSystemService): Response
+    #[Route(
+        path: '/files/{dirs?}',
+        name: 'app_home',
+        requirements: ['dirs' => '.+'],
+        defaults: ['dirs' => ''],
+        methods: [Request::METHOD_GET]
+    )]
+    public function __invoke(FileSystemService $fileSystemService, string $dirs): Response
     {
         return $this->render('home.html.twig', [
-            'content' => $fileSystemService->getDirs(),
+            'content' => $fileSystemService->getDirs($dirs),
             'fileForm' => $this->createForm(UploadFileForm::class),
         ]);
     }

src/Service/FileSystemService.php

@@ -20,10 +20,10 @@ class FileSystemService
     /**
      * @return DirContent[]
      */
-    public function getDirs(): array
+    public function getDirs(string $dirs): array
     {
         $finder = new Finder();
-        $finder->in($this->dir);
+        $finder->in($this->dir . '/' . $dirs);
 
         $contents = [];
 

src/Service/Twig/RoutingService.php

@@ -0,0 +1,23 @@
+<?php
+declare(strict_types=1);
+
+namespace App\Service\Twig;
+
+use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\Routing\Generator\UrlGeneratorInterface;
+
+class RoutingService
+{
+    public function __construct(private UrlGeneratorInterface $urlGenerator)
+    {
+    }
+
+    public function goBack(Request $request): string
+    {
+        $dirsString = $request->attributes->get('dirs', '');
+        $dirs = explode('/', $dirsString);
+        array_pop($dirs);
+
+        return $this->urlGenerator->generate('app_home', ['dirs' => implode('/', $dirs)]);
+    }
+}

templates/_partials/_row.html.twig

@@ -1,13 +1,24 @@
+{% if file.name == '..' %}
+    {% set link = routing_service.goBack(app.request) %}
+{% else %}
+    {% set link = path('app_home', {dirs: app.request.attributes.get('dirs', '/') ~ file.name ~ '/'}) %}
+{% endif %}
+
+
 <tr class="border-b">
     <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+        <a href="{{ link }}">
             {% if file.type == 'dir' %}
                 {{ ux_icon('folder:closed', {height: '32px', width: '32px'}) }}
             {% else %}
                 {{ ux_icon('file:default', {height: '32px', width: '32px'}) }}
             {% endif %}
+        </a>
     </th>
     <td class="px-6 py-4">
+        <a href="{{ link }}">
             {{ file.name }}
+        </a>
     </td>
     <td class="px-6 py-4">
         {{ file.size }}

templates/_partials/_table.html.twig

@@ -14,6 +14,9 @@
         </tr>
         </thead>
         <tbody>
+        {% if app.request.requestUri != '/files' %}
+            {% include '_partials/_row.html.twig' with {file: {name: '..', size: '-', type: 'dir'}} %}
+        {% endif %}
         {% for dirContent in content %}
             {% include '_partials/_row.html.twig' with {file: dirContent} %}
         {% endfor %}
@@ -24,10 +27,12 @@
 
 {{ form_start(fileForm, {'attr': {'data-controller': 'upload-file'}}) }}
 <div class="flex items-center justify-center max-w-4xl mt-5">
-    <label for="upload_file_form_file" class="flex flex-col items-center justify-center w-full h-64 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:hover:bg-gray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600">
+    <label for="upload_file_form_file"
+           class="flex flex-col items-center justify-center w-full h-64 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:hover:bg-gray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600">
         <div class="flex flex-col items-center justify-center pt-5 pb-6">
             {{ ux_icon('file:upload', {height: '64px', width: '64px'}) }}
-            <p class="mb-2 text-sm text-gray-500 dark:text-gray-400"><span class="font-semibold">Click to upload</span> or drag and drop</p>
+            <p class="mb-2 text-sm text-gray-500 dark:text-gray-400"><span class="font-semibold">Click to upload</span>
+                or drag and drop</p>
         </div>
         {{ form_widget(fileForm.file) }}
         <button type="submit" class="hidden"></button>