[LiveComponent] Add support for downloading files from LiveActions (Experimental) #2483

smnandre · 2025-01-05T02:48:04Z

Q	A
Bug fix?	no
New feature?	yes
Issues	Close #1516
License	MIT

This pull request introduces a new experimental feature for handling file downloads in LiveActions.

Caution

As stated here, this feature -if merged- will keep an experimental status, for everyone to test and see how it goes. We cannot ensure BC promise on features without testing it IRL first.

TL;DR;

Send file

 #[LiveAction]
public function getDocument(): Response
{
    $file = $this->projectDir . '/docs/legals/terms.pdf');

    return LiveResponse::file($file);
}

Stream files

 #[LiveAction]
public function streamThisReport(): StreamedResponse
{
    // Get a stream, or generate
    $resource =  $this->readStream('file/big/report.csv');

    return LiveResponse::streamFile($resource, 'report.csv');
}

⚠️ We are working to keep state synchronization and stream working together.

Also

I started the demo, just need to complete some texts + add a bit of style

Scope of this

This PR taks a very narrow scope on this thing, i already started working on cool things for upload (as I also needed to for work..)

Let's stay focus on this here (discussions / issues open for any new idea / MR)

github-actions · 2025-01-05T02:48:39Z

📊 Packages dist files size difference

Thanks for the PR! Here is the difference in size of the packages dist files between the base branch and the PR.
Please review the changes and make sure they are expected.

File	Before (Size / Gzip)	After (Size / Gzip)
LiveComponent
`Backend/BackendResponse.d.ts`	`136 B` / `139 B`	`166 B`^{+22% 📈} / `148 B`^{+6% 📈}
`live_controller.js`	`119.92 kB` / `23.37 kB`	`120.96 kB`^{+1% 📈} / `23.6 kB`^{+1% 📈}

Kocal

This solution is so simple 🤩

src/LiveComponent/assets/src/Backend/BackendResponse.ts

src/LiveComponent/assets/src/Component/index.ts

src/LiveComponent/src/EventListener/LiveComponentSubscriber.php

src/LiveComponent/src/LiveDownloadResponse.php

Kocal · 2025-01-05T11:03:10Z

src/LiveComponent/src/LiveDownloadResponse.php

+        parent::__construct($file, 200, [
+            self::HEADER_LIVE_DOWNLOAD => 1,
+            'Content-Disposition' => HeaderUtils::makeDisposition(HeaderUtils::DISPOSITION_ATTACHMENT, $filename ?? basename($file)),
+            'Content-Type' => 'application/octet-stream',


Shouldn't we use the $file's mime type?

I hesitated (keep dep light) and chose not to...

But in fact it's a good idea and Mime is a very small component.

So let's make it a requirement for LiveComponent ? Or only when using downloads / uploads ?

wdyt ?

I suggest to put it in suggest composer.json section (I don't remember what is the rule in Symfony, cc @nicolas-grekas), and then runtime check if symfony/mime exists (when using downloads/uploads)

Pretty sure there is no suggest in Symfony composer packages..

We have other situations in UX where we do not require a package (i.e. in Autocomplete for Form ..)

My question was more: should we require it for everyone, or keep it as an "runtime" dependency ?

runtime dependency

Why aren't you deferring to BinaryFileResponse for this logic?

What's the reason for the header?

In the frontend, if not a standard/known content type, but has a content disposition (and an other requirements), trigger the download? This way we could say "to enable file downloads, return a response that has a content disposition"

src/LiveComponent/src/LiveDownloadResponse.php

Co-authored-by: Hugo Alliaume <[email protected]>

norkunas · 2025-01-06T05:34:47Z

What about streams from flysystem? We'll need to always load files into memory?

smnandre · 2025-01-07T01:10:51Z

What about streams from flysystem? We'll need to always load files into memory?

With that method, i fear yes. That's why the limit. And browsers can change their policy soon to prevent abuse.

We also can ask for a Filesystem API grant.

Again, will need to test one way or the other, locally i can stream a full 8GB file in one second so ... :|

kbond

This is awesome! I'll let someone else review the frontend code.

For the back end:

I wish we weren't restricted to BinaryFileResponse - I'd like to be able to use with StreamedResponse and a resource.
What are the requirements for a response to trigger as a download on the frontend? Just the special header? Could we add this header in the response event listener (detect if it's a download)?

kbond · 2025-01-08T22:01:36Z

src/LiveComponent/src/LiveDownloadResponse.php

+        parent::__construct($file, 200, [
+            self::HEADER_LIVE_DOWNLOAD => 1,
+            'Content-Disposition' => HeaderUtils::makeDisposition(HeaderUtils::DISPOSITION_ATTACHMENT, $filename ?? basename($file)),
+            'Content-Type' => 'application/octet-stream',


Why aren't you deferring to BinaryFileResponse for this logic?

smnandre · 2025-01-08T22:32:13Z

Why aren't you deferring to BinaryFileResponse for this logic?

How so ? BinaryFile does not add content disposition different than what you pass here as argument.

smnandre · 2025-01-08T22:36:28Z

I wish we weren't restricted to BinaryFileResponse - I'd like to be able to use with StreamedResponse and a resource.

I need to continue looking, but the restriction is not here at all, there is just an helper we can provide to offer the best DX possible.

The difficulty is to ensure a ResponseStream will work (without crashing the LiveComponent thread) and this is where problems come from:

unknown size is a bad signal
content type must be set and be legit

And regarding streaming. I made it work perfectly at home. But i have still not see any use case where downloading a 500MB file via a LiveComponent is a good idea 😅

Anyway we'll need to test IRL a bit to get feedback, issues, etc etc

smnandre · 2025-01-08T22:40:13Z

src/LiveComponent/assets/src/Component/index.ts

+                    throw new Error('No filename found in Content-Disposition header');
+                }
+
+                const blob = await backendResponse.getBlob();


It depends... if you trigger the "click" and the file start downloading I think browser play the "pipe" role here.

But during my test I managed to crashed pretty violently Chrome and Safari multiple times.

norkunas · 2025-01-09T04:42:48Z

And regarding streaming. I made it work perfectly at home. But i have still not see any use case where downloading a 500MB file via a LiveComponent is a good idea 😅

But it's a good idea to reduce resource usage in case memory limit is low.

javiereguiluz · 2025-01-10T09:07:44Z

Simon, thanks for this nice new feature!

My only concern is about the name of this class:

return new LiveDownloadResponse($file);

LiveDownloadResponse is related to files but its name has nothing to do with files. Also, download is not strictly correct, because we can download files, embed files in the browser and stream files.

Here are some proposals for your consideration:

return new LiveFileResponse($file);
return new FileLiveResponse($file);
return new FileResponse($file);
return new StreamResponse($file);
return new ResourceResponse($file);

smnandre · 2025-01-10T11:17:53Z

We've been working on it with @kbond and decided not to extend Response at all... (users can use whatever Response they want in term of implementation.

...but we would provide a static helper to create the best DX possible.

    // ... 

    return LiveResponse::file($myFile);
}

That way we can also offer

    // ... 

    return LiveResponse::streamFile($myFile);
}

And this would be perfect for other ideas we have next (no content, refresh...)

We are now trying to see the best way to send files and save component state/update the DOM (not the case in my PR)

javiereguiluz · 2025-01-10T14:07:06Z

Very nice! Thanks for the insights.

mahono · 2025-01-12T11:06:01Z

Would it be possible to use a redirect? I would like to do pre-signed urls and let the download be directly handled by an S3 bucket.

kbond · 2025-01-12T12:47:38Z

Would it be possible to use a redirect? I would like to do pre-signed urls and let the download be directly handled by an S3 bucket.

Yes, that's possible now!

FluffyDiscord · 2025-01-14T07:19:33Z

Can yield be used/supported instead of echo for streamed response? Asking for a support of running Symfony in worker mode, where echoes are forbidden.

smnandre · 2025-01-17T21:14:16Z

So how do we move on here? @kbond your work on the streams can be added right now ? do we need more tests before opening an alpha/experimental phase ?

smnandre added 7 commits January 5, 2025 03:31

Add getBlob method on BackendResponse

bd6b8bd

Handle downloads in Component.js

61cee45

Build dist files

2f34d71

Add LiveDownloadResponse + checks in Subscriber

f24dea6

Add entry in CHANGELOG

d7d6bb5

Add demo on website

dd75be0

CS fixes

fe92cc7

carsonbot added Feature New Feature LiveComponent Status: Needs Review Needs to be reviewed labels Jan 5, 2025

smnandre requested review from kbond, Kocal and WebMamba January 5, 2025 02:48

Kocal reviewed Jan 5, 2025

View reviewed changes

smnandre and others added 3 commits January 6, 2025 00:09

Prefer return instead of return await

f81dcff

Co-authored-by: Hugo Alliaume <[email protected]>

Reuse 'Content-Disposition' header value

4f6f869

Co-authored-by: Hugo Alliaume <[email protected]>

Reuse 'Content-Disposition' header value

36143e6

Co-authored-by: Hugo Alliaume <[email protected]>

kbond reviewed Jan 8, 2025

View reviewed changes

smnandre commented Jan 8, 2025

View reviewed changes

smnandre added 2 commits January 9, 2025 01:58

Simplify header checks

32cd824

rework

456c0e2

loicsapone mentioned this pull request Jan 15, 2025

Downloading files Mezcalito/ux-filemanager#10

Open

smnandre mentioned this pull request Jan 17, 2025

[LiveComponent] Live Actions cannot handle file downloads #1516

Open

smnandre added Status: Reviewing Review is ongoing, refining with author and removed Status: Needs Review Needs to be reviewed labels Jan 19, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[LiveComponent] Add support for downloading files from LiveActions (Experimental) #2483

[LiveComponent] Add support for downloading files from LiveActions (Experimental) #2483

smnandre commented Jan 5, 2025 •

edited

Loading

github-actions bot commented Jan 5, 2025 •

edited

Loading

Kocal left a comment

Kocal Jan 5, 2025

smnandre Jan 5, 2025

Kocal Jan 5, 2025 •

edited

Loading

smnandre Jan 6, 2025

Kocal Jan 6, 2025

kbond Jan 8, 2025

kbond Jan 8, 2025

norkunas commented Jan 6, 2025

smnandre commented Jan 7, 2025

kbond left a comment

kbond Jan 8, 2025

smnandre commented Jan 8, 2025

smnandre commented Jan 8, 2025

smnandre Jan 8, 2025

norkunas commented Jan 9, 2025

javiereguiluz commented Jan 10, 2025 •

edited

Loading

smnandre commented Jan 10, 2025

javiereguiluz commented Jan 10, 2025

mahono commented Jan 12, 2025

kbond commented Jan 12, 2025

FluffyDiscord commented Jan 14, 2025

smnandre commented Jan 17, 2025

[LiveComponent] Add support for downloading files from LiveActions (Experimental) #2483

Are you sure you want to change the base?

[LiveComponent] Add support for downloading files from LiveActions (Experimental) #2483

Conversation

smnandre commented Jan 5, 2025 • edited Loading

TL;DR;

Also

Scope of this

github-actions bot commented Jan 5, 2025 • edited Loading

📊 Packages dist files size difference

Kocal left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Kocal Jan 5, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

norkunas commented Jan 6, 2025

smnandre commented Jan 7, 2025

kbond left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

smnandre commented Jan 8, 2025

smnandre commented Jan 8, 2025

Choose a reason for hiding this comment

norkunas commented Jan 9, 2025

javiereguiluz commented Jan 10, 2025 • edited Loading

smnandre commented Jan 10, 2025

javiereguiluz commented Jan 10, 2025

mahono commented Jan 12, 2025

kbond commented Jan 12, 2025

FluffyDiscord commented Jan 14, 2025

smnandre commented Jan 17, 2025

smnandre commented Jan 5, 2025 •

edited

Loading

github-actions bot commented Jan 5, 2025 •

edited

Loading

Kocal Jan 5, 2025 •

edited

Loading

javiereguiluz commented Jan 10, 2025 •

edited

Loading