Skip to content

Commit b65677e

Browse files
committed
Add file upload info to docs
1 parent a782926 commit b65677e

File tree

1 file changed

+31
-0
lines changed

1 file changed

+31
-0
lines changed

src/LiveComponent/src/Resources/doc/index.rst

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -590,6 +590,7 @@ Actions & Arguments
590590
You can also provide custom arguments to your action::
591591

592592
.. code-block:: twig
593+
593594
<form>
594595
<button data-action="live#action" data-action-name="addItem(id={{ item.id }}, name=CustomItem)">Add Item</button>
595596
</form>
@@ -616,6 +617,36 @@ args but inject to your defined parameter with another name.::
616617
}
617618
}
618619

620+
Actions and file uploads
621+
~~~~~~~~~~~~~~~~~~~~~~~~
622+
623+
.. versionadded:: 2.2
624+
625+
The ability to pass arguments to actions was added in version 2.2.
626+
627+
If you want live component to track and send files you first need
628+
to mark file upload inputs as ``file`` Stimulus target.::
629+
630+
.. code-block:: twig
631+
632+
<input type="file" {{ stimulus_target('live', 'file') }} name="my_file" />
633+
634+
Then, when defining action you need to use special ``files(name)`` modifier.::
635+
636+
.. code-block:: twig
637+
638+
<div
639+
data-action="change->live#action"
640+
data-action-name="prevent|files(my_file)|upload"
641+
<input type="file" {{ stimulus_target('live', 'file') }} name="my_file" />
642+
</div>
643+
644+
This will send files from ``my_file`` file input. When used without argument
645+
it would send all files from all ``file`` targets of the controller.
646+
647+
If you want to send multiple files from a single input remember to suffix its' name
648+
with ``[]`` - both in HTML name attribute and ``files`` modifier argument.
649+
619650
Actions and CSRF Protection
620651
~~~~~~~~~~~~~~~~~~~~~~~~~~~
621652

0 commit comments

Comments
 (0)