Downloading an image without direct backend server access

Hi,

I have a button to download an image. this image is not a file on the server but its stored in a database.

When the user clicks the button I could, of course, call a backend function which loads the data from the database and stores it into a file and then give back the URL to this file, but I don’t like the idea of direct access to my backend server from the user.
So I thought I just call the backend, which is then loading the image data, do a base64 encoding and give it back to the front end.
My problem now is how can I start an automated download of this image? For a text file I have found a solution that looks like this:

const downloadLink = document.createElement("a");
        downloadLink.href = "data:x-application/xml;charset=utf-8," + document.getElementById("progressPanelProtocol").value.replaceAll(/\r\n|\r|\n/g, "<br>"));
        downloadLink.download = "Filename_" + Date.now().valueOf() + ".html";

        document.body.appendChild(downloadLink);
        downloadLink.click();
        document.body.removeChild(downloadLink);

but how can I do this with an image instead?

Can you not just have your backend api send the appropriate headers (Content-disposition) to download the image and then do a simple redirect to that endpoint?

I… uhhh… what? That’s still the browser directly accessing your backend server.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.