[LiveComponent][RFC] Simple file upload handling

src/LiveComponent/assets/dist/live_controller.js

@@ -1024,6 +1024,7 @@ class default_1 extends Controller {
         this.renderDebounceTimeout = null;
         this.actionDebounceTimeout = null;
         this.renderPromiseStack = new PromiseStack();
+        this.fileInputs = {};
         this.pollingIntervals = [];
         this.isWindowUnloaded = false;
         this.originalDataJSON = '{}';
@@ -1070,16 +1071,27 @@ class default_1 extends Controller {
     updateDefer(event) {
         this._updateModelFromElement(event.target, this._getValueFromElement(event.target), false);
     }
-    action(event) {
+    uploadFile(event) {
+        this._updateModelFromElement(event.target, this._getValueFromElement(event.target), false);
+        const model = event.target.dataset.model || event.target.getAttribute('name');
+        const modifier = {
+            name: 'upload_files',
+            value: model
+        };
+        this.action(event, [modifier]);
+    }
+    action(event, autoModifiers = []) {
         const rawAction = event.currentTarget.dataset.actionName;
         const directives = parseDirectives(rawAction);
+        const files = {};
         directives.forEach((directive) => {
             const _executeAction = () => {
                 this._clearWaitingDebouncedRenders();
-                this._makeRequest(directive.action, directive.named);
+                this._makeRequest(directive.action, directive.named, files);
             };
             let handled = false;
-            directive.modifiers.forEach((modifier) => {
+            const modifiers = [...autoModifiers, ...directive.modifiers];
+            modifiers.forEach((modifier) => {
                 switch (modifier.name) {
                     case 'prevent':
                         event.preventDefault();
@@ -1105,6 +1117,27 @@ class default_1 extends Controller {
                         handled = true;
                         break;
                     }
+                    case 'upload_files':
+                        if (modifier.value) {
+                            const input = this.fileInputs[modifier.value];
+                            if (input && input.files) {
+                                files[modifier.value] = input.files;
+                            }
+                            else if (input) {
+                                delete this.fileInputs[modifier.value];
+                            }
+                        }
+                        else {
+                            for (const [key, input] of Object.entries(this.fileInputs)) {
+                                if (input && input.files) {
+                                    files[key] = input.files;
+                                }
+                                else if (input) {
+                                    delete this.fileInputs[key];
+                                }
+                            }
+                        }
+                        break;
                     default:
                         console.warn(`Unknown modifier ${modifier.name} in action ${rawAction}`);
                 }
@@ -1130,7 +1163,12 @@ class default_1 extends Controller {
             throw new Error(`The update() method could not be called for "${clonedElement.outerHTML}": the element must either have a "data-model" or "name" attribute set to the model name.`);
         }
         let finalValue = value;
-        if (/\[]$/.test(model)) {
+        if (element instanceof HTMLInputElement
+            && element.type === 'file') {
+            this.fileInputs[model] = element;
+            return;
+        }
+        else if (/\[]$/.test(model)) {
             const { currentLevelData, finalKey } = parseDeepData(this.dataValue, normalizeModelName(model));
             const currentValue = currentLevelData[finalKey];
             finalValue = updateArrayDataFromChangedElement(element, value, currentValue);
@@ -1182,7 +1220,7 @@ class default_1 extends Controller {
             }, this.debounceValue || DEFAULT_DEBOUNCE);
         }
     }
-    _makeRequest(action, args) {
+    _makeRequest(action, args, files = {}) {
         const splitUrl = this.urlValue.split('?');
         let [url] = splitUrl;
         const [, queryString] = splitUrl;
@@ -1210,9 +1248,16 @@ class default_1 extends Controller {
             }
         }
         if (!dataAdded) {
+            const formData = new FormData();
+            formData.append('data', JSON.stringify(this.dataValue));
             fetchOptions.method = 'POST';
-            fetchOptions.body = JSON.stringify(this.dataValue);
-            fetchOptions.headers['Content-Type'] = 'application/json';
+            fetchOptions.body = formData;
+            for (const [key, value] of Object.entries(files)) {
+                const length = value.length;
+                for (let i = 0; i < length; ++i) {
+                    formData.append(key, value[i]);
+                }
+            }
         }
         this._onLoadingStart();
         const paramsString = params.toString();

src/LiveComponent/assets/src/directives_parser.ts

@@ -1,7 +1,7 @@
 /**
  * A modifier for a directive
  */
-interface DirectiveModifier {
+export interface DirectiveModifier {
     /**
      * The name of the modifier (e.g. delay)
      */

src/LiveComponent/assets/src/live_controller.ts

@@ -1,6 +1,6 @@
 import { Controller } from '@hotwired/stimulus';
 import morphdom from 'morphdom';
-import { parseDirectives, Directive } from './directives_parser';
+import { parseDirectives, Directive, DirectiveModifier } from './directives_parser';
 import { combineSpacedArray } from './string_utils';
 import { setDeepData, doesDeepPropertyExist, normalizeModelName, parseDeepData } from './set_deep_data';
 import { haveRenderedValuesChanged } from './have_rendered_values_changed';
@@ -54,6 +54,8 @@ export default class extends Controller {
      */
     renderPromiseStack = new PromiseStack();
 
+    fileInputs: Record<string, HTMLInputElement> = {}
+
     pollingIntervals: NodeJS.Timer[] = [];
 
     isWindowUnloaded = false;
@@ -121,7 +123,17 @@ export default class extends Controller {
         this._updateModelFromElement(event.target, this._getValueFromElement(event.target), false);
     }
 
-    action(event: any) {
+    uploadFile(event: any) {
+        this._updateModelFromElement(event.target, this._getValueFromElement(event.target), false);
+        const model = event.target.dataset.model || event.target.getAttribute('name');
+        const modifier = {
+            name: 'upload_files',
+            value: model
+        }
+        this.action(event, [modifier]);
+    }
+
+    action(event: any, autoModifiers: DirectiveModifier[] = []) {
         // using currentTarget means that the data-action and data-action-name
         // must live on the same element: you can't add
         // data-action="click->live#action" on a parent element and
@@ -132,6 +144,8 @@ export default class extends Controller {
         // data-action-name="prevent|debounce(1000)|save"
         const directives = parseDirectives(rawAction);
 
+        const files: Record<string, FileList> = {};
+
         directives.forEach((directive) => {
             // set here so it can be delayed with debouncing below
             const _executeAction = () => {
@@ -144,11 +158,12 @@ export default class extends Controller {
                 // taking precedence
                 this._clearWaitingDebouncedRenders();
 
-                this._makeRequest(directive.action, directive.named);
+                this._makeRequest(directive.action, directive.named, files);
             }
 
             let handled = false;
-            directive.modifiers.forEach((modifier) => {
+            const modifiers: DirectiveModifier[] = [...autoModifiers, ...directive.modifiers];
+            modifiers.forEach((modifier) => {
                 switch (modifier.name) {
                     case 'prevent':
                         event.preventDefault();
@@ -179,6 +194,25 @@ export default class extends Controller {
 
                         break;
                     }
+                    case 'upload_files':
+                        if (modifier.value) {
+                            const input = this.fileInputs[modifier.value];
+                            if (input && input.files) {
+                                files[modifier.value] = input.files;
+                            } else if (input) {
+                                delete this.fileInputs[modifier.value];
+                            }
+                        } else {
+                            for (const [key, input] of Object.entries(this.fileInputs)) {
+                                if (input && input.files) {
+                                    files[key] = input.files;
+                                } else if (input) {
+                                    delete this.fileInputs[key];
+                                }
+                            }
+                        }
+
+                        break;
 
                     default:
                         console.warn(`Unknown modifier ${modifier.name} in action ${rawAction}`);
@@ -215,7 +249,15 @@ export default class extends Controller {
         // we need to handle addition and removal of values from it to send
         // back only required data
         let finalValue : string|null|string[] = value
-        if (/\[]$/.test(model)) {
+        if (
+            element instanceof HTMLInputElement
+            && element.type === 'file'
+        ) {
+            // Save file input reference for later and don't upload immediately
+            this.fileInputs[model] = element;
+
+            return;
+        } else if (/\[]$/.test(model)) {
             // Get current value from data
             const { currentLevelData, finalKey } = parseDeepData(this.dataValue, normalizeModelName(model))
             const currentValue = currentLevelData[finalKey];
@@ -318,7 +360,7 @@ export default class extends Controller {
         }
     }
 
-    _makeRequest(action: string|null, args: Record<string, string>) {
+    _makeRequest(action: string|null, args: Record<string, string>, files: Record<string, FileList> = {}) {
         const splitUrl = this.urlValue.split('?');
         let [url] = splitUrl
         const [, queryString] = splitUrl;
@@ -353,9 +395,17 @@ export default class extends Controller {
 
         // if GET can't be used, fallback to POST
         if (!dataAdded) {
+            const formData = new FormData();
+            formData.append('data', JSON.stringify(this.dataValue));
             fetchOptions.method = 'POST';
-            fetchOptions.body = JSON.stringify(this.dataValue);
-            fetchOptions.headers['Content-Type'] = 'application/json';
+            fetchOptions.body = formData;
+
+            for (const [key, value] of Object.entries(files)) {
+                const length = value.length;
+                for (let i=0; i < length; ++i) {
+                    formData.append(key, value[i]);
+                }
+            }
         }
 
         this._onLoadingStart();

src/LiveComponent/assets/test/controller/action.test.ts

@@ -65,7 +65,7 @@ describe('LiveController Action Tests', () => {
         await waitFor(() => expect(element).toHaveTextContent('Comment Saved!'));
         expect(getByLabelText(element, 'Comments:')).toHaveValue('hi weaver');
 
-        const bodyData = JSON.parse(postMock.lastOptions().body);
+        const bodyData = JSON.parse(postMock.lastOptions().body.get('data'));
         expect(bodyData.comments).toEqual('hi WEAVER');
     });
 

src/LiveComponent/src/Attribute/LiveFileArg.php

@@ -0,0 +1,75 @@
+<?php
+
+/*
+ * This file is part of the Symfony package.
+ *
+ * (c) Fabien Potencier <fabien@symfony.com>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace Symfony\UX\LiveComponent\Attribute;
+
+/**
+ * @author Jakub Caban <kuba.iluvatar@gmail.com>
+ *
+ * @experimental
+ */
+#[\Attribute(\Attribute::TARGET_PARAMETER)]
+final class LiveFileArg
+{
+    private ?array $types = null;
+
+    public function __construct(public ?string $name = null)
+    {
+    }
+
+    public function isValueCompatible(mixed $value): bool
+    {
+        if (null === $this->types) {
+            return true;
+        }
+        $type = \gettype($value);
+        if ('object' === $type) {
+            $type = $value::class;
+        }
+
+        return \in_array($type, $this->types, true);
+    }
+
+    /**
+     * @internal
+     *
+     * @return array<string, self>
+     */
+    public static function liveFileArgs(object $component, string $action): array
+    {
+        $method = new \ReflectionMethod($component, $action);
+        $liveFileArgs = [];
+
+        foreach ($method->getParameters() as $parameter) {
+            foreach ($parameter->getAttributes(self::class) as $liveArg) {
+                /** @var LiveFileArg $attr */
+                $attr = $liveArg->newInstance();
+                $parameterName = $parameter->getName();
+
+                $attr->name ??= $parameterName;
+                if ($type = $parameter->getType()) {
+                    if ($type instanceof \ReflectionNamedType) {
+                        $attr->types = [$type->getName()];
+                    } else {
+                        $attr->types = array_map(
+                            static fn (\ReflectionNamedType $type) => $type->getName(),
+                            $type->getTypes()
+                        );
+                    }
+                }
+
+                $liveFileArgs[$parameterName] = $attr;
+            }
+        }
+
+        return $liveFileArgs;
+    }
+}

src/LiveComponent/src/ComponentWithFormTrait.php

@@ -16,6 +16,7 @@
 use Symfony\Component\Form\FormView;
 use Symfony\Component\HttpKernel\Exception\UnprocessableEntityHttpException;
 use Symfony\UX\LiveComponent\Attribute\LiveProp;
+use Symfony\UX\LiveComponent\Attribute\PostHydrate;
 use Symfony\UX\LiveComponent\Attribute\PreReRender;
 use Symfony\UX\LiveComponent\Util\LiveFormUtility;
 use Symfony\UX\TwigComponent\Attribute\ExposeInTemplate;
@@ -44,6 +45,11 @@ trait ComponentWithFormTrait
     #[LiveProp(writable: true, fieldName: 'getFormName()')]
     public ?array $formValues = null;
 
+    /**
+     * Holds the raw submitted files.
+     */
+    protected array $uploadedFiles = [];
+
     /**
      * Tracks whether this entire component has been validated.
      *
@@ -94,6 +100,14 @@ public function initializeForm(array $data): array
         return $data;
     }
 
+    #[PostHydrate]
+    public function extractFiles(array $data): void
+    {
+        if (isset($data[LiveComponentHydrator::FILES_KEY][$this->formName])) {
+            $this->uploadedFiles = $data[LiveComponentHydrator::FILES_KEY][$this->formName];
+        }
+    }
+
     /**
      * Make sure the form has been submitted.
      *
@@ -138,8 +152,14 @@ private function submitForm(bool $validateAll = true): void
             throw new \LogicException('The submitForm() method is being called, but the FormView has already been built. Are you calling $this->getForm() - which creates the FormView - before submitting the form?');
         }
 
+        if (\is_array($this->formValues)) {
+            $data = array_replace_recursive($this->formValues, $this->uploadedFiles);
+        } else {
+            $data = $this->uploadedFiles;
+        }
+
         $form = $this->getFormInstance();
-        $form->submit($this->formValues);
+        $form->submit($data);
 
         if ($validateAll) {
             // mark the entire component as validated