Handle downloads in Component.js

Author: smnandre

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

@@ -300,15 +300,60 @@ 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')) {
+                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);
+
+                // 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')