reactjsimagedownloadcloudinary

Download image from cloudinary url


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


Solution

  • 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>