✨(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

@@ -25,18 +25,18 @@ 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
 
-
 ### Fixed
 
 - 🐛(backend) duplicate sub docs as root for reader users
 - ⚗️(service-worker) remove index from cache first strategy #1395
 - 🐛(frontend) fix 404 page when reload 403 page #1402
 - 🐛(frontend) fix legacy role computation #1376
 - 🐛(frontend) scroll back to top when navigate to a document #1406
+- 🐛(frontend) fix attachment download filename #1447
 
 ### Changed
 

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

@@ -874,4 +874,38 @@ test.describe('Doc Editor', () => {
     await expect(pdfEmbed).toHaveAttribute('type', 'application/pdf');
     await expect(pdfEmbed).toHaveAttribute('role', 'presentation');
   });
+
+  test('it downloads PDF with original filename', async ({
+    page,
+    browserName,
+  }) => {
+    const [randomDoc] = await createDoc(page, 'doc-editor', browserName, 1);
+
+    const fileChooserPromise = page.waitForEvent('filechooser');
+    const downloadPromise = page.waitForEvent('download');
+    const responseCheckPromise = page.waitForResponse(
+      (response) =>
+        response.url().includes('media-check') && response.status() === 200,
+    );
+
+    await verifyDocName(page, randomDoc);
+
+    await openSuggestionMenu({ page });
+    await page.getByText('Embed a PDF file').click();
+
+    await page.getByText('Add PDF').click();
+    await page.getByText('Upload file').click();
+
+    const fileChooser = await fileChooserPromise;
+    await fileChooser.setFiles(path.join(__dirname, 'assets/test-pdf.pdf'));
+
+    await responseCheckPromise;
+
+    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,19 @@ 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 as string) || url.split('/').pop() || 'file',
+        );
       } else {
         const onConfirm = async () => {
           const blob = (await exportResolveFileUrl(url)) as Blob;
-          downloadFile(blob, url.split('/').pop() || 'file (unsafe)');
+          downloadFile(
+            blob,
+            (fileBlock.props.name as string) ||
+              url.split('/').pop() ||
+              'file (unsafe)',
+          );
         };
 
         open(onConfirm);
@@ -100,6 +108,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']