0

Image is in AWS S3:

<a
  data-lightbox-anima="fade-top"
  className={`btn`}
  download={`${organizationShortId}-${programId}`}
  href={`https://t44-post-cover.s3.eu-central-1.amazonaws.com/${organizationShortId}-${programId}`}
>
  Insta
</a>

How can I make it downloadable with button / link and not opening in browser?

Checked this, found no solution: Chrome Download Attribute not working

In S3 I do not control Content-Disposition header.

János
  • 32,867
  • 38
  • 193
  • 353
  • https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/download – GrafiCode Sep 02 '22 at 10:41
  • yes, I did set `download` field, it does not help – János Sep 02 '22 at 10:42
  • Yes but according to documentation you don't have to pass the download attribute link url as value, that is specified in href – GrafiCode Sep 02 '22 at 10:45
  • Ah, "Download Restrictions The download attribute only works for same-originl URLs. So if the href is not the same origin as the site, it won't work. In other words, you can only download files that belongs to that website. This attribute follows the same rules outline in the same-origin policy." https://www.samanthaming.com/tidbits/38-html-download-attribute/ – GrafiCode Sep 02 '22 at 10:47
  • Do you have any idea what to do? Image is not "malicious document", but we store images not in Next.js's public folder but in AWS S3? – János Sep 02 '22 at 10:51
  • 1
    you could create a "downloader" route, something like `yoursite.com/download?resource`, fetch the external file server-side and then use `header` to pass the file as download. Check this answers, server-side code is in PHP (and it's about pdf files) but the concept is the same https://stackoverflow.com/a/3802607/5334486 – GrafiCode Sep 02 '22 at 11:05
  • I use a `middleware` to do it, but get stuck with an other issue: https://stackoverflow.com/questions/73581788/how-to-get-noticed-image-was-downloaded-to-be-able-to-start-a-new-task – János Sep 02 '22 at 11:24

0 Answers0