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/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>