[Live Component] Are file uploads supported?

[benr77]

Hello again. I'm trying to do a file upload in a Live Component. I've tried with both DropzoneType and the regular FileType but running into the same problem I think.

I have been reading related issues #354, #289, #299 etc but I'm unsure of the current state of play. I believe these discussions are only related to using a UX component such as Dropzone inside the Live Component.

Even with a standard FileType field in the form, as soon as I add a file to be uploaded to the form field, the component reloads and I think the file to be uploaded is lost, so when I then submit the form it sends empty data for the file field.

I can live without Dropzone support in the Live Component for the moment, but of course that would be great to have - but should the standard FileType field work?

How can I stop the Live Component re-rendering and losing the selected file as soon as I add the file to the field?

Thank you.

[talanon]

Hey, I tried many things to send file with Live Components. The only way I found is to force norender on my form and to send manually my file with stimulusJS.

{{ form_start(form, { attr: { 'data-action': 'live#action', 'data-action-name': 'prevent|save', 'data-model': 'norender|*' } }) }}

I personnaly wait DropzoneType or FileType to be supported before reuse Live Component

[kbond]

Hey @benr77,

Not officially supported yet. We want to support this in a way that allows using a filesystem abstractions (Flysystem). I've been hacking on a sort of symfony-flysystem bridge to help with this.

Long story, short, it's definitely on our radar!

[benr77]

OK, great thanks for the update. I'll just implement my file upload outside of a Live Component for the time being.

This will be a great feature - I'm finding Live Components are so powerful for decoupling my front end I'm trying to use them at every opportunity.

[Skarlax]

Hey, I am experiencing the same issue. Any news on this topic ?

[Skarlax]

Hey @kbond

Do you know when will this feature be supported ?

[kbond]

Hey! This is still on my radar but I've been busy with other things lately. Rest assured it hasn't been forgotten but I don't have an ETA at this time.

[Skarlax]

Thanks for your reply and good luck for this feature !

[talanon]

Hi!

Any news about this issue ?

[kbond]

https://github.com/symfony/ux/pull/834 is the latest iteration I think we'll be going with.

[lukepass]

Hello, I commented in #834 but it's a pull requst and not an issue. I tried to upload a file with version 2.9.1 (it should support files as in documentation) but an error appears in the console saying Unknown modifier files in action "files|prevent|save". Available modifiers are: prevent, stop, self, debounce.. Thanks.

[norkunas]

Hello, I commented in #834 but it's a pull requst and not an issue. I tried to upload a file with version 2.9.1 (it should support files as in documentation) but an error appears in the console saying Unknown modifier files in action "files|prevent|save". Available modifiers are: prevent, stop, self, debounce.. Thanks.

I think that's a wrong assumption in docs, because only v2.11 released file upload

[benr77]

Thanks for all the hard work getting this feature up and running!

I see there is an example on the UX site showing how to do file uploads inside Live Components, but it does not use Symfony Forms.

I have almost got it working using the Form component, but the file field in the form data class is always null. I have a hack to add it from the Request object directly:

$this->submitForm();

/** @var MyFormData $formData */
$formData = $this->getForm()->getData();

// Hack to put the actual UploadedFile object on to the form data class
$formData->mapFile = $request->files->all('form_name')['pdfFile'];

This seems to work OK, but I think it means that any validation constraints on the UploadedFile in the form data class are ignored.

Does all this sound about right based on the current state of support for file uploads inside Live Components?

Thanks!

[bastien70]

I agree, something is missing to properly manage uploads using the Symfony form.

In my case, I use VichUploader on a Media entity to store all my files. I have an entity that has a Media collection, and I use LiveCollectionType to render this media collection. I submit the form via the component

{{ form_start(form, {attr: {
        'data-action': 'live#action',
        'data-action-name': 'prevent|files|save',
    }}) }}

In the component, I'm doing something like this to handle files and place them in correct collection position :

    #[LiveAction]
    public function save(EntityManagerInterface $entityManager, Request $request): void
    {
        $files = $request->files->all();

        if (\array_key_exists('meeting_point', $files)) {
            foreach ($files['meeting_point']['medias'] as $key => $file) {
                $uploadedFile = $file['file']['file'];
                $this->formValues['medias'][$key]['file']['file'] = $uploadedFile;
            }
        }

        $this->submitForm();

        /** @var MeetingPoint $meetingPoint */
        $meetingPoint = $this->getForm()->getData();

        $entityManager->persist($meetingPoint);
        $entityManager->flush();
    }

It seems to work.

I wonder if we could set up something generic to automatically correctly map the submitted files with the entities to which they should belong, and therefore obtain the same operation as for a symfony form submitted and managed from the controller

[kbond]

Hello, I want to provide a bit of an update on this issue/feature - it is still very much on my radar.

What we need are some pieces in place before we can add this feature in a robust way. Let me explain:

• Standard uploaded files are temporary and deleted after the request (or at least can't be counted on to exist on subsequent requests)
• This is a problem for live components as we need the file to be persisted between requests
• So, we need a way to write/persist/cleanup temporary files
• Now, we need a filesystem abstraction (to handle environments with readonly filesystems).
• Flysystem to the rescue?
• Not quite, Flysystem is awesome, don't get me wrong but it's abstraction is too low level for what we want.
• What we need is a File object that can be added as a property to your live components. Flysystem does not provide this.
• zenstruck/filesystem is a library I've been working on for a few years now. You can think of it as the "ORM" with Flysystem (which this library requires) as the "DBAL" layer. In addition to a slew of additional features, the fundamental thing it provides is a File object that can be passed around (to twig or as an object property). This object is lazy (like ORM entities) and has access to all the underlying values Flysystem provides (content, metadata).
• This is almost ready for a 1.0 release (I've been using it heavily in production for a long time now). I really just need to finalize and add documentation.
• I can't say for sure this is what we'd use in live components but in my opinion, it's a good candidate to achieve what is required.