Skip to content

[LiveComponent] - Live component and Input File #877

Closed
@Laguigue

Description

@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 !

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions