Download Attachments via Link

[Brrrradley]

I have an attachments field that can hold multiple attachmemts. These attachments subsequently need to be presented for download. When using a table presentation, the list of attachments gets truncated (+ 4 more ) and are no longer accessible. As below.

I have played around with nested repeater blocks and array fields to iterate over all of the files in an attachment field and present them differently as links (see below). This is fine, but I can't seem to be able to download the file using this approach, which is my desired outcome.

Any ideas? Either displaying all attachments in tabular format (eliminating the +4 more) or allowing a file to be downloaded via link component would be great.

Thanks.

[ConorWebb96]

Hey @Brrrradley,

I think i've achieved what you are after with some minor JS plus the use of the repeater and embed component. Below is the component tree as well as the JS code used within the binding to achieve the desired effect.

Component tree

JS Code

const attachments = $("New Repeater block.test.attachments");

if(attachments) {
  let html = '';
    for (const attachment of attachments) {
      html += `<a href="${attachment.url}" download>${attachment.name}</a><br>`;
    }

  return html;
}
return 'No attachments here';

Output

I hope this makes sense and is helpful, if you have any questions around this let me know.

[Brrrradley]

Thanks @ConorWebb96 -- this worked exactly as needed.

[melohagan]

There is also the Link component which may work with the repeater block as well, but this solution is nice because it makes it convenient to add a message if there are no attachments!

Great answer! 👍

[NicolasFabre81]

Hello @melohagan ,
I just tried this approach with the link component but can't make it work.
The URL I get is :
https://bb-stg.fr.mybbhost.lcl/app_dev_519ffbdd536b4325b53066675b3b67bb#/files/signed/prod-budi-app-assets/app_519ffbdd536b4325b53066675b3b67bb/attachments/488f5f4a-24bf-497e-8397-c11b44b719ca.xlsx?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=y6s2WUi6rJCktMo3fEfJEHoEPyoHnGew%2F20231002%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231002T094458Z&X-Amz-Expires=3600&X-Amz-Signature=75d81911ee212199b76ffe35e446b11c0455e901e5246b5a6055a5d70284f216&X-Amz-SignedHeaders=host

It opens a new tab but I get the app default page, my XSLX file does not download.

[SaschaValentin]

Hello @NicolasFabre81, I have the same problem, even if I use "key" attribute to reference the PDF file in the bindings. Strange thing is it shows the right link (https://dataapps.mediacomvalentin.de/app/app_b46f6a00e4934fe29b11d903a253c2fb/attachments/8d2adad3-60c7-4c00-bc21-24ef86fc699a.pdf) to the file but it doesn´t open it. Instead the homepage of the app is opened.

I hope someone can explain what we are doing wrong.

[spitoutzi]

Hi! How to download files with the original file names ( like foto1.jpg) and not like 8d44rf-frefw7e87rw6-fewu437f.jpg?

[melohagan]

You can't at the moment. There's a related issue here: #11301

[spitoutzi]

I managed to implement it as follows.
Via Handlebars (using the download="{{name}}" parameter):

{{# forEach Repeater.Table.file }}
<br>
<a href="{{url}}" target="_blank" class="download" download="{{name}}">Download</a>
</br>
{{/forEach}}

[melohagan]

Awesome, thanks for sharing!