Download image from cloudinary url

Question

I have my react project where I edit images and generate a new one. Now I want to download the generated image. I am using cloudinary for that and I have the url of the image.

But the main problem is that I am unable to download the image. I tried

<a href="link" download> Download </a>

But it didn't work. It just opens the image but does not downloads it.

I want to only download the image, nothing more.

If you have any idea please do share

Live sandbox https://codesandbox.io/s/interesting-mountain-lf4lk?file=/src/App.js

Answer 1

You won't need an external library to achieve that functionality. Just add the Cloudinary flags => attachment transformation (fl_attachment in URLs) and that will set the Content-Disposition header with value 'attachment' and the file will download.

<a href="https://res.cloudinary.com/demo/image/upload/fl_attachment/sample.jpg">Download</a>

You can optionally set a custom filename of the downloaded file by using the format fl_attachment:my_custom_filename.

<a href="https://res.cloudinary.com/demo/image/upload/fl_attachment:my_custom_filename/sample.jpg">Download</a>

Answer 2

I used js-file-download. Working sample: https://codesandbox.io/s/confident-monad-pc6l9?file=/src/App.js:76-92

import fileDownload from "js-file-download";

fileDownload(url, filename);

Answer 3

You won't need an external library to achieve that functionality. Just add the Cloudinary flags => attachment transformation (fl_attachment in URLs) and that will set the Content-Disposition header with value 'attachment' and the file will download.

<a href="https://res.cloudinary.com/demo/image/upload/fl_attachment/sample.jpg">Download</a>

You can optionally set a custom filename of the downloaded file by using the format fl_attachment:my_custom_filename.

<a href="https://res.cloudinary.com/demo/image/upload/fl_attachment:my_custom_filename/sample.jpg">Download</a>