✨(frontend) fix attachment download filename

use the document title instead of the uuid when downloading attachments

Signed-off-by: Cyril <c.gromoff@gmail.com>

Author: Ovgodd

CHANGELOG.md

@@ -26,7 +26,7 @@ and this project adheres to
   - ♿ remove redundant aria-label on hidden icons and update tests #1432
   - ♿ improve semantic structure and aria roles of leftpanel #1431
   - ♿ add default background to left panel for better accessibility #1423
-  - ♿ restyle checked checkboxes: removing strikethrough #1439  
+  - ♿ restyle checked checkboxes: removing strikethrough #1439
   - ♿ add h1 for SR on 40X pages and remove alt texts #1438
   - ♿ update labels and shared document icon accessibility #1442
 
@@ -38,6 +38,7 @@ and this project adheres to
 - 🐛(frontend) fix legacy role computation #1376
 - 🛂(frontend) block editing title when not allowed #1412
 - 🐛(frontend) scroll back to top when navigate to a document #1406
+- 🐛(frontend) fix attachment download filename #1447
 - 🐛(frontend) exclude h4-h6 headings from table of contents #1441
 - 🔒(frontend) prevent readers from changing callout emoji #1449
 

src/frontend/apps/e2e/__tests__/app-impress/doc-editor.spec.ts

@@ -846,6 +846,7 @@ test.describe('Doc Editor', () => {
 
     await page.getByText('Add PDF').click();
     const fileChooserPromise = page.waitForEvent('filechooser');
+    const downloadPromise = page.waitForEvent('download');
     await page.getByText('Upload file').click();
     const fileChooser = await fileChooserPromise;
 
@@ -866,5 +867,12 @@ test.describe('Doc Editor', () => {
 
     await expect(pdfEmbed).toHaveAttribute('type', 'application/pdf');
     await expect(pdfEmbed).toHaveAttribute('role', 'presentation');
+
+    // Check download with original filename
+    await page.locator('.bn-block-content[data-content-type="pdf"]').click();
+    await page.locator('[data-test="downloadfile"]').click();
+
+    const download = await downloadPromise;
+    expect(download.suggestedFilename()).toBe('test-pdf.pdf');
   });
 });

src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/FileDownloadButton.tsx

@@ -76,11 +76,23 @@ export const FileDownloadButton = ({
 
       if (!url.includes('-unsafe')) {
         const blob = (await exportResolveFileUrl(url)) as Blob;
-        downloadFile(blob, url.split('/').pop() || 'file');
+        downloadFile(
+          blob,
+          fileBlock.props.name || url.split('/').pop() || 'file',
+        );
       } else {
         const onConfirm = async () => {
           const blob = (await exportResolveFileUrl(url)) as Blob;
-          downloadFile(blob, url.split('/').pop() || 'file (unsafe)');
+
+          const baseName =
+            fileBlock.props.name || url.split('/').pop() || 'file';
+
+          const regFindLastDot = /(\.[^/.]+)$/;
+          const unsafeName = baseName.includes('.')
+            ? baseName.replace(regFindLastDot, '-unsafe$1')
+            : baseName + '-unsafe';
+
+          downloadFile(blob, unsafeName);
         };
 
         open(onConfirm);
@@ -100,6 +112,7 @@ export const FileDownloadButton = ({
     <>
       <Components.FormattingToolbar.Button
         className="bn-button --docs--editor-file-download-button"
+        data-test="downloadfile"
         label={
           dict.formatting_toolbar.file_download.tooltip[fileBlock.type] ||
           dict.formatting_toolbar.file_download.tooltip['file']