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

src/LiveComponent/CHANGELOG.md

@@ -3,6 +3,8 @@
 ## 2.23.0
 
 -   Allow configuring the secret used to compute fingerprints and checksums.
+-   [EXPERIMENTAL] Add `LiveDownloadResponse` and enable file downloads from
+    a `LiveAction`. 
 
 ## 2.22.0
 

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

@@ -3,4 +3,5 @@ export default class {
     private body;
     constructor(response: Response);
     getBody(): Promise<string>;
+    getBlob(): Promise<Blob>;
 }

src/LiveComponent/assets/dist/live_controller.js

@@ -111,6 +111,9 @@ class BackendResponse {
         }
         return this.body;
     }
+    async getBlob() {
+        return await this.response.blob();
+    }
 }
 
 function getElementAsTagText(element) {
@@ -2119,11 +2122,43 @@ class Component {
         this.isRequestPending = false;
         this.backendRequest.promise.then(async (response) => {
             const backendResponse = new BackendResponse(response);
-            const html = await backendResponse.getBody();
             for (const input of Object.values(this.pendingFiles)) {
                 input.value = '';
             }
             const headers = backendResponse.response.headers;
+            if (headers.get('X-Live-Download')) {
+                if (!(headers.get('Content-Disposition')?.includes('attachment') ||
+                    headers.get('Content-Disposition')?.includes('inline')) ||
+                    !headers.get('Content-Disposition')?.includes('filename=')) {
+                    throw new Error('Invalid LiveDownload response');
+                }
+                const fileSize = Number.parseInt(headers.get('Content-Length') || '0');
+                if (fileSize > 10000000) {
+                    throw new Error('File is too large to download (10MB limit)');
+                }
+                const fileName = headers.get('Content-Disposition')?.split('filename=')[1];
+                if (!fileName) {
+                    throw new Error('No filename found in Content-Disposition header');
+                }
+                const blob = await backendResponse.getBlob();
+                const link = Object.assign(window.document.createElement('a'), {
+                    target: '_blank',
+                    style: 'display: none',
+                    href: window.URL.createObjectURL(blob),
+                    download: fileName,
+                });
+                this.element.appendChild(link);
+                link.click();
+                this.element.removeChild(link);
+                this.backendRequest = null;
+                thisPromiseResolve(backendResponse);
+                if (this.isRequestPending) {
+                    this.isRequestPending = false;
+                    this.performRequest();
+                }
+                return response;
+            }
+            const html = await backendResponse.getBody();
             if (!headers.get('Content-Type')?.includes('application/vnd.live-component+html') &&
                 !headers.get('X-Live-Redirect')) {
                 const controls = { displayError: true };

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

@@ -13,4 +13,8 @@ export default class {
 
         return this.body;
     }
+
+    async getBlob(): Promise<Blob> {
+        return this.response.blob();
+    }
 }

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

@@ -300,15 +300,59 @@ export default class Component {
 
         this.backendRequest.promise.then(async (response) => {
             const backendResponse = new BackendResponse(response);
-            const html = await backendResponse.getBody();
 
             // clear sent files inputs
             for (const input of Object.values(this.pendingFiles)) {
                 input.value = '';
             }
 
-            // if the response does not contain a component, render as an error
             const headers = backendResponse.response.headers;
+            if (headers.get('X-Live-Download')) {
+                const headerContentDisposition = headers.get('Content-Disposition');
+                if (
+                    !headerContentDisposition
+                    || !(headerContentDisposition?.includes('attachment') || headerContentDisposition?.includes('inline')) 
+                    || !headerContentDisposition?.includes('filename=')
+                ) {
+                    throw new Error('Invalid LiveDownload response');
+                }
+
+                const fileSize = Number.parseInt(headers.get('Content-Length') || '0');
+                if (fileSize > 10000000) {
+                    throw new Error('File is too large to download (10MB limit)');
+                }
+
+                const fileName = headerContentDisposition.split('filename=')[1];
+                if (!fileName) {
+                    throw new Error('No filename found in Content-Disposition header');
+                }
+
+                const blob = await backendResponse.getBlob();
+                const link = Object.assign(window.document.createElement('a'), {
+                    target: '_blank',
+                    style: 'display: none',
+                    href: window.URL.createObjectURL(blob),
+                    download: fileName,
+                });
+                this.element.appendChild(link);
+                link.click();
+                this.element.removeChild(link);
+
+                this.backendRequest = null;
+                thisPromiseResolve(backendResponse);
+
+                // do we already have another request pending?
+                if (this.isRequestPending) {
+                    this.isRequestPending = false;
+                    this.performRequest();
+                }
+
+                return response;
+            }
+
+            const html = await backendResponse.getBody();
+
+            // if the response does not contain a component, render as an error
             if (
                 !headers.get('Content-Type')?.includes('application/vnd.live-component+html') &&
                 !headers.get('X-Live-Redirect')

src/LiveComponent/src/EventListener/LiveComponentSubscriber.php

@@ -13,6 +13,7 @@
 
 use Psr\Container\ContainerInterface;
 use Symfony\Component\EventDispatcher\EventSubscriberInterface;
+use Symfony\Component\HttpFoundation\BinaryFileResponse;
 use Symfony\Component\HttpFoundation\Exception\JsonException;
 use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
@@ -43,7 +44,9 @@
 class LiveComponentSubscriber implements EventSubscriberInterface, ServiceSubscriberInterface
 {
     private const HTML_CONTENT_TYPE = 'application/vnd.live-component+html';
+
     private const REDIRECT_HEADER = 'X-Live-Redirect';
+    private const DOWNLOAD_HEADER = 'X-Live-Download';
 
     public function __construct(
         private ContainerInterface $container,
@@ -255,6 +258,13 @@ public function onKernelView(ViewEvent $event): void
             return;
         }
 
+        if ($event->getControllerResult() instanceof BinaryFileResponse) {
+            if (!$event->getControllerResult()->headers->has(self::DOWNLOAD_HEADER)) {
+
+            }
+            $event->setResponse(new Response());
+        }
+
         $event->setResponse($this->createResponse($request->attributes->get('_mounted_component')));
     }
 

src/LiveComponent/src/LiveDownloadResponse.php

@@ -0,0 +1,38 @@
+<?php
+
+namespace Symfony\UX\LiveComponent;
+
+use SplFileInfo;
+use SplTempFileObject;
+use Symfony\Component\HttpFoundation\BinaryFileResponse;
+use Symfony\Component\HttpFoundation\HeaderUtils;
+
+/**
+ * @author Simon André <[email protected]>
+ */
+final class LiveDownloadResponse extends BinaryFileResponse
+{
+    public const HEADER_LIVE_DOWNLOAD = 'X-Live-Download';
+
+    public function __construct(string|SplFileInfo $file, ?string $filename = null)
+    {
+        if (\is_string($file)) {
+            $file = new SplFileInfo($file);
+        }
+
+        if ((!$file instanceof SplFileInfo)) {
+            throw new \InvalidArgumentException(sprintf('The file "%s" does not exist.', $file));
+        }
+
+        if ($file instanceof SplTempFileObject) {
+            $file->rewind();
+        }
+
+        parent::__construct($file, 200, [
+            self::HEADER_LIVE_DOWNLOAD => 1,
+            'Content-Disposition' => HeaderUtils::makeDisposition(HeaderUtils::DISPOSITION_ATTACHMENT, $filename ?? basename($file)),
+            'Content-Type' => 'application/octet-stream',
+            'Content-Length' => $file instanceof SplTempFileObject ? 0 : $file->getSize(),
+        ], false, HeaderUtils::DISPOSITION_ATTACHMENT);
+    }
+}

src/LiveComponent/tests/Fixtures/Component/DownloadFileComponent.php

@@ -0,0 +1,56 @@
+<?php
+
+/*
+ * This file is part of the Symfony package.
+ *
+ * (c) Fabien Potencier <[email protected]>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace Symfony\UX\LiveComponent\Tests\Fixtures\Component;
+
+use Symfony\Component\HttpFoundation\BinaryFileResponse;
+use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
+use Symfony\UX\LiveComponent\Attribute\LiveAction;
+use Symfony\UX\LiveComponent\Attribute\LiveArg;
+use Symfony\UX\LiveComponent\DefaultActionTrait;
+use Symfony\UX\LiveComponent\LiveDownloadResponse;
+
+/**
+ * @author Simon André <[email protected]>
+ */
+#[AsLiveComponent('download_file', template: 'components/download_file.html.twig')]
+class DownloadFileComponent
+{
+    use DefaultActionTrait;
+
+    private const FILE_DIRECTORY = __DIR__.'/../files/'; 
+
+    #[LiveAction]
+    public function download(): BinaryFileResponse
+    {
+        $file = new \SplFileInfo(self::FILE_DIRECTORY.'/foo.json');
+
+        return new LiveDownloadResponse($file);
+    }
+
+    #[LiveAction]
+    public function generate(): BinaryFileResponse
+    {
+        $file = new \SplTempFileObject();
+        $file->fwrite(file_get_contents(self::FILE_DIRECTORY.'/foo.json'));
+
+        return new LiveDownloadResponse($file, 'foo.json');
+    }
+
+    #[LiveAction]
+    public function heavyFile(#[LiveArg] int $size): BinaryFileResponse
+    {
+        $file = new \SplFileInfo(self::FILE_DIRECTORY.'heavy.txt');
+
+        $response = new BinaryFileResponse($file);
+        $response->headers->set('Content-Length', 10000000); // 10MB
+    }
+}

src/LiveComponent/tests/Fixtures/files/foo.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Foo</title>
+</head>
+<body>
+    <h1>Bar</h1>
+</body>
+</html>

src/LiveComponent/tests/Fixtures/files/foo.json

@@ -0,0 +1,3 @@
+{
+    "foo": "bar"
+}

src/LiveComponent/tests/Fixtures/files/foo.md

@@ -0,0 +1,3 @@
+# Foo
+
+## Bar

src/LiveComponent/tests/Fixtures/templates/components/download_file.html.twig

@@ -0,0 +1,3 @@
+<div {{ attributes }}>
+
+</div>