How can I provide user-friendly image download URLs

Developers Images
2

Hi, one suggestion would be is to use Cloudflare Worker in front of the Images.

And rewrite accept header on the request and add Content-Disposition header on the response, something like that:

export default {
	async fetch(request) {
		// You can find this in the dashboard, it should look something like this: ZWd9g1K7eljCn_KDTu_MWA
		const accountHash = '';

		const { pathname } = new URL(request.url);

		const headers = new Headers(request.headers)
		headers.set('Accept', 'image/jpeg, image/png')

		// A request to something like cdn.example.com/83eb7b2-5392-4565-b69e-aff66acddd00/public
		// will fetch "https://imagedelivery.net/<accountHash>/83eb7b2-5392-4565-b69e-aff66acddd00/public"
		const response = await fetch(`https://imagedelivery.net/${accountHash}${pathname}`, {
			method: 'GET',
			headers: headers
		});
        const filename = pathname.substring(1);
		response.headers.set('Content-Disposition', `attachment; filename="${filename}"`);
		return response
	}
};
1 Like