Want users to be able to download an image

Hi, I have a field on a user’s record with a digital certificate (the Airtable field is of type Attachment and the attachment is a PNG file). I need our users to be able to easily download the PNG file. I’m using a list-details block with an Image field to display the certificate and then a File field to attach the file. While clicking on the file name does open up the PNG in a new window, I’m concerned less tech-savvy users won’t know how to then save that image and I don’t want to have to deal with browser specific instructions. Is there a way to provide the user with a link/button that on click, downloads the PNG file?

I did a little digging and I don’t know if there’s a good way to do this.

Apparently you can add a download attribute to an <a> tag but it onliy works if the file is served from the same domain as the web page, which is not the case in this scenario.

The other way that people have gotten this to work is by rendering the PNG in a canvas and then making a link that downloads that canvas. This has the downside of wiping out any metadata that might have been in the PNG file, and might also affect the image quality.

Hoping someone else knows another trick!

2 Likes

Depending on the user experience you are looking for, you could send the certificate directly to the user’s email.

You can set up a 2 or 1 steps airtable automation that gets triggered with the click of a button in your softr app.

Simply use a form block, with a hidden field type and enter the LOGGED_IN _SERS_EMAIL (or record id) as value.
Then when the users click the button reading ‘Get certificate’, a successful message will read ‘certificate has been sent to your email’

Now on your airtable you will have this request listed on a table, and automation should take care of the rest.

If you need help with this automation setup you can DM.

1 Like

Hi guys, did anyone found a simple workaround for that use case ? At the moment I’m stuck at the CORS limitations mentioned by @dcoletta, since the pictures are served from an airtableusercontent.com URL, obviously different from the site’s.

I’ve fallen down the rabbit hole of going around the CORS limitations with some stuff like cors.sh, but it feels like a pain to set up and quite unsafe in the long run.

Any suggestions ?

Strictly speaking this is not actually a CORS issue. CORS (cross-origin resource sharing) refers specifically to when you write JavaScript code that makes an HTTP(S) request to an endpoint that has a different origin from that which served the web page the JS is on.

The distinction is important because as far as I know there is no way to make the download attribute work cross-domain simply through the use of CORS headers.

1 Like