assets/controllers/upload_file_controller.js

@@ -2,7 +2,6 @@ import { Controller } from '@hotwired/stimulus';
 
 export default class extends Controller {
     connect() {
-        console.log(this.element);
         this.element.querySelector('input').addEventListener('change', () => {
             this.element.querySelector('button[type="submit"]').click();
         });

src/Controller/HomeController.php

@@ -20,6 +20,12 @@ class HomeController extends AbstractController
     )]
     public function __invoke(FileSystemService $fileSystemService, string $dirs): Response
     {
+        if ($fileSystemService->isFile(substr_replace($dirs, '', -1))) {
+            return $this->render('file.html.twig', [
+                'file' => $fileSystemService->getFile((string) substr_replace($dirs, '', -1)),
+            ]);
+        }
+
         return $this->render('home.html.twig', [
             'content' => $fileSystemService->getDirs($dirs),
             'fileForm' => $this->createForm(UploadFileForm::class),

src/Controller/UploadController.php

@@ -23,7 +23,7 @@ class UploadController extends AbstractController
         $form  = $this->createForm(UploadFileForm::class, $fileData)->handleRequest($request);
 
         if ($form->isSubmitted() && $form->isValid()) {
-            $fileSystemService->uploadFile($fileData->file);
+            $fileSystemService->uploadFile($fileData->files);
         }
 
         return $this->redirectToRoute('app_home');

src/Forms/UploadFileForm.php

@@ -17,7 +17,7 @@ class UploadFileForm extends AbstractType
     {
         $builder
             ->setAction($this->urlGenerator->generate('app_upload'))
-            ->add('file', FileType::class, [
+            ->add('files', FileType::class, [
             'attr' => ['class' => 'hidden'],
             'multiple' => true,
         ]);

src/Objects/DirContent.php

@@ -6,22 +6,25 @@ namespace App\Objects;
 
 use SplFileInfo;
 
-class DirContent
+readonly class DirContent
 {
     private function __construct(
-        private readonly string $name,
-        private readonly int $size,
-        private readonly string $type,
-    )
-    {
+        private string $name,
+        private int $size,
+        private string $type,
+        private string $path,
+        private string $content,
+    ) {
     }
 
-    public static function make(SplFileInfo $fileInfo): DirContent
+    public static function make(SplFileInfo $fileInfo, string $content = ''): DirContent
     {
         return new self(
             $fileInfo->getBasename(),
             $fileInfo->getSize() ?? 0,
             $fileInfo->getType() ?? 'N/A',
+            $fileInfo->getPath(),
+            $content
         );
     }
 
@@ -44,10 +47,20 @@ class DirContent
         return $this->type;
     }
 
-    private function getHumanReadableSize()
+    public function getPath(): string
+    {
+        return $this->path;
+    }
+
+    public function getContent(): string
+    {
+        return $this->content;
+    }
+
+    private function getHumanReadableSize(): string
     {
         $bytes = $this->size;
-        $size = array('B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB');
+        $size = ['B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
         $factor = floor((strlen((string) $bytes) - 1) / 3);
 
         return sprintf("%.1f %s", $bytes / (1024 ** $factor), $size[$factor]);

src/Objects/UploadedFileData.php

@@ -7,7 +7,7 @@ use Symfony\Component\HttpFoundation\File\UploadedFile;
 class UploadedFileData
 {
     /**
-     * @var UploadedFile[] $file
+     * @var UploadedFile[] $files
      */
-    public array $file;
+    public array $files;
 }

src/Service/FileSystemService.php

@@ -4,6 +4,7 @@ namespace App\Service;
 
 use App\Objects\DirContent;
 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;
@@ -23,7 +24,7 @@ class FileSystemService
     public function getDirs(string $dirs): array
     {
         $finder = new Finder();
-        $finder->in($this->dir . '/' . $dirs);
+        $finder->in($this->getTotalPath($dirs));
 
         $contents = [];
 
@@ -40,7 +41,40 @@ class FileSystemService
     public function uploadFile(array $files): void
     {
         foreach ($files as $file) {
-            $this->filesystem->dumpFile($this->dir . '/' . $file->getClientOriginalName(), $file->getContent());
+            $this->filesystem->dumpFile($this->getTotalPath($file->getClientOriginalName()), $file->getContent());
         }
     }
+
+    public function isFile(string $dirs): bool
+    {
+        try {
+            $this->filesystem->readFile($this->getTotalPath($dirs));
+        } catch (IOException) {
+            return false;
+        }
+
+        return true;
+    }
+
+    public function getFile(string $filePath): DirContent
+    {
+        $dirs = explode('/', $filePath);
+        $fileName = array_pop($dirs);
+
+        $finder = new Finder();
+        $finder->in($this->getTotalPath(implode('/', $dirs)));
+
+        foreach ($finder as $file) {
+            if ($file->getFilename() === $fileName) {
+                return DirContent::make($file, $this->filesystem->readFile($this->getTotalPath($filePath)));
+            }
+        }
+
+        throw new \RuntimeException('File not found');
+    }
+
+    private function getTotalPath(string $filePath): string
+    {
+        return $this->dir . '/' . $filePath;
+    }
 }

src/Service/Twig/RoutingService.php

@@ -16,7 +16,9 @@ class RoutingService
     {
         $dirsString = $request->attributes->get('dirs', '');
         $dirs = explode('/', $dirsString);
-        array_pop($dirs);
+        if (array_pop($dirs) === '') {
+            array_pop($dirs);
+        }
 
         return $this->urlGenerator->generate('app_home', ['dirs' => implode('/', $dirs)]);
     }

templates/_partials/_table.html.twig

@@ -27,14 +27,14 @@
 
 {{ 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"
+    <label for="upload_file_form_files"
            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>
         </div>
-        {{ form_widget(fileForm.file) }}
+        {{ form_widget(fileForm.files) }}
         <button type="submit" class="hidden"></button>
     </label>
 </div>

templates/file.html.twig

@@ -0,0 +1,21 @@
+{% extends 'base.html.twig' %}
+
+{% block title %}
+    {{ file.name }}
+{% endblock %}
+
+{% block body %}
+    <div class="max-w-2xl mx-auto my-8 p-6 bg-white shadow-lg rounded-lg border">
+        <a href="{{ routing_service.goBack(app.request) }}" class="inline-flex items-center text-blue-600 hover:text-blue-800 font-medium transition-colors">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
+                 stroke="currentColor" class="w-5 h-5 mr-2">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/>
+            </svg>
+            Back
+        </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>
+        </div>
+    </div>
+{% endblock %}