[LiveComponent] - Live component and Input File

[Laguigue]

I'm working on a project where you can add multiple attachments to an event. I use the LiveCollectionType in my form for this.

I render the form via a LiveComponent, for each attachment you add, you can upload a picture via an input file.
`<div {{ attributes }}>
{{ form_start(form) }}
{{ form_row(form.name) }}

{% for key, attachment in form.attachments %}
	<div class="flex justify-between">
                  //...
                  {{form_widget(attachment.file) }}

		<button data-action="live#action" data-action-name="removeAttachment(index={{ key }})" type="button">X</button>
	</div>
{% endfor %}

<button data-action="live#action" data-action-name="addAttachment" type="button">+ Add Attachment</button>

<button type="submit">Save</button>
{{ form_end(form) }}

`

This works great when i submit the form and the request goes through a regular controller. However, i can't get it working when i redirect the submit to the php component.

I change that in the Twig
{{ form_start(form, { attr: { 'data-action': 'live#action', 'data-action-name': 'prevent|save' } }) }}

If i dmp $this->formValues in the "save" method of my php component, i can see regular fields (like name, description) are filled, but the files of my attachments is empty.
I have also noticed that you can't simply bind an input type "file" in a normal component, out of a "form" context.

For instance, i can do:
<input type="file" data-model="myFile" />
and get the file data in my php component when i upload something. It works great with all other fields, but it seems like file input has trouble working with live component, and i really didn't see a lot of responses on the matter. Anyone else had the same issue ?

Thank you so much in advance !

[weaverryan]

Hi @Laguigue!

Unfortunately, right now, file uploads simply don't work with LiveComponents. @Lustmored is working on that in #834... which I see now I need to give another round of review! Hopefully we'll have something shortly - right now, if you have upload fields in your form, they need to have data-live-ignore so that they are completely ignored by the live component. Basically, they don't work yet :/.