add file preview

assets/controllers/file_preview_controller.js

@@ -0,0 +1,8 @@
+import {Controller} from "@hotwired/stimulus";
+
+
+export default class extends Controller {
+    connect() {
+
+    }
+}

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

@@ -13,16 +13,18 @@ readonly class DirContent
         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
         );
     }
 
@@ -50,6 +52,11 @@ readonly class DirContent
         return $this->path;
     }
 
+    public function getContent(): string
+    {
+        return $this->content;
+    }
+
     private function getHumanReadableSize(): string
     {
         $bytes = $this->size;

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