Download button with dynamic links

Design help Custom code
1

Hi there, I have a question currently I have connected a webflow to a backend that after its done with the request I get a URL. I can successfully view the image it returns. However, when I linked it with a button to download the image. It just opens the link. I say it is dynamic because each new backend/API request comes back with a different URL.

Currently I am using this code

function handleDownload() { } if (!upscaledImageUrl) { alert('No upscaled image to download.') return; } const link = document.createElement('a'); link.href = upscaledImageUrl; link.download = originalFilename || 'upscaled_image.png'; document.body.appendChild(link); link.click(); document.body.removeChild(link) console.log('Upscaled image downloaded.') } `

Any suggestions?

2

If the link is to an image, you can try adding the download custom attribute, usually with a filename to use. Most browsers support it.

Another approach is that if you control the host for the file, e.g. an S3 bucket, you could change the mime type it returns with the image as octet/stream. The browser will see it as binary and will just offer to save it since it has no viewer for that MIME type.