Add extremely simple upload files example

Author: Lustmored

ux.symfony.com/src/Controller/LiveComponentDemoController.php

@@ -108,4 +108,12 @@ public function productForm(LiveDemoRepository $liveDemoRepository): Response
             'demo' => $liveDemoRepository->find('product_form'),
         ]);
     }
+
+    #[Route('/upload', name: 'app_live_components_upload')]
+    public function uploadFiles(LiveDemoRepository $liveDemoRepository): Response
+    {
+        return $this->render('live_component_demo/upload.html.twig', parameters: [
+            'demo' => $liveDemoRepository->find('upload'),
+        ]);
+    }
 }

ux.symfony.com/src/Service/LiveDemoRepository.php

@@ -98,6 +98,15 @@ public function findAll(): array
                 route: 'app_live_components_product_form',
                 longDescription: <<<EOF
 Open a child modal component to create a new Category.
+EOF
+            ),
+            new LiveDemo(
+                'upload',
+                name: 'Uploading files',
+                description: 'Upload files to live component.',
+                route: 'app_live_components_upload',
+                longDescription: <<<EOF
+Send files to be handled by live component.
 EOF
             ),
         ];

ux.symfony.com/src/Twig/UploadFiles.php

@@ -0,0 +1,27 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Twig;
+
+use Symfony\Component\HttpFoundation\File\UploadedFile;
+use Symfony\Component\HttpFoundation\Request;
+use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
+use Symfony\UX\LiveComponent\Attribute\LiveAction;
+use Symfony\UX\LiveComponent\DefaultActionTrait;
+
+#[AsLiveComponent()]
+class UploadFiles
+{
+    use DefaultActionTrait;
+
+    public ?UploadedFile $single = null;
+    public array $multiple = [];
+
+    #[LiveAction]
+    public function sendFiles(Request $request): void
+    {
+        $this->single = $request->files->get('single');
+        $this->multiple = $request->files->all('multiple');
+    }
+}

ux.symfony.com/templates/components/UploadFiles.html.twig

@@ -0,0 +1,26 @@
+<div
+        {{ attributes }}
+>
+    <p><strong>Note:</strong> files aren't persisted and will be lost on each rerender if not stored.</p>
+    <p>
+        Single file: <input type="file" name="single" autocomplete="off" /> <br>
+        Current file:
+        {% if single %}
+            {{ single.clientOriginalName }} ({{ single.clientMimeType }})
+        {% else %}
+            none
+        {% endif %}
+    </p>
+    <div>
+        Multiple files: <input type="file" name="multiple[]" autocomplete="off" multiple /> <br>
+        Current files:
+        <ul>
+            {% for file in multiple %}
+                <li>{{ file.clientOriginalName }} ({{ file.clientMimeType }})</li>
+            {% else %}
+                <li>none</li>
+            {% endfor %}
+        </ul>
+    </div>
+    <button data-action="live#action" data-action-name="files|sendFiles">Send files!</button>
+</div>

ux.symfony.com/templates/live_component_demo/upload.html.twig

@@ -0,0 +1,13 @@
+{% extends 'liveDemoBase.html.twig' %}
+
+{% block code_block_left %}
+    <twig:CodeBlock filename="src/Twig/UploadFiles.php" height="400px" />
+{% endblock %}
+
+{% block code_block_right %}
+    <twig:CodeBlock filename="templates/components/UploadFiles.html.twig" height="400px" />
+{% endblock %}
+
+{% block demo_content %}
+    {{ component('UploadFiles') }}
+{% endblock %}