Download images from assets from HTML Anchor tag

Suppose the front-end code wants supply a way to download images from the assets folder. Consider the following code:

<a href="http://127.0.0.1:5500/globalassets/images/sample.png" download="sample.png">Download this file</a>

Assuming that 127.0.0.1:5500 is your EPiServer instance, you can say that the image will be downloaded.

Note that download anchor attribute will work if the url is from the same origin of the http request.

For Internet Explorer, the download attribute is not supported, so the image is open on the same tab.

We want to ensure that the response header Content-Disposition: attachment; filename="sample.png"; filename*=UTF-8''sample.png is returned, so each browser saves the image instead of present it on the same tab.

Using the DownloadMediaRouter.DownloadSegment on the request, EPiServer will return the image with the Content-Disposition with attachment value.

So, we can replace the html anchor definition by:

<a href="http://127.0.0.1:5500/globalassets/images/sample.png/download">Download this file</a>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: