React download image instead of showing in a new tab

Question

In my react component I have a function which use file-saver package to save an array of files.

File-saver package installation:

npm i file-saver

My react component:

import { saveAs } from 'file-saver'

saveImg(urlArr){
    urlArr[0];
    let name = 'img' + 0 + '.jpg';
    saveAs(urlArr[0], name)
    urlArr[2];
    let name2 = 'img' + 2 + '.jpg';
    saveAs(urlArr[2], name2)
}

, and it works but my expectation was downloading files instead of opening images in new browser tabs. I would like to trigger downloading from react component. How to force downloading? What are others libraries used for downloading?

score 2 · Accepted Answer · answered Aug 06 '21 at 08:01

2

Yes I tried on codesandbox and in case of URL, file-saver will open a new tab instead of download image. But, you could try to use the blob way:

import { saveAs } from 'file-saver'

saveImg(urlArr){
    (async () => {
       let name = 'img' + 0 + '.jpg';
       let blob = await fetch(urlArr[0]).then((r) => r.blob());
       saveAs(blob, name);
    })();
    (async () => {
       let name2 = 'img' + 2 + '.jpg';
       let blob2 = await fetch(urlArr[2]).then((r) => r.blob());
       saveAs(blob2, name2);
    })();  
}

answered Aug 06 '21 at 08:01

Giovanni Esposito

10,696
1
14
30

1

It makes sense, I will try it. One more question, are you using fetch from this: import * as fetch from 'node-fetch'; ? – ElConrado Aug 06 '21 at 11:40
@ElConrado I'm using the classic `fetch` provided by React. I don't use `node-fetch` (but I think is the same...) – Giovanni Esposito Aug 06 '21 at 11:48
Yes, it is the same. Your soultion is working for me, so I accept it. However, on my side, other problem occurs. After downloading blob with new file name, a downloaded file is 0kB size, and it is not opening, do you know how to handle this problem? – ElConrado Aug 06 '21 at 12:08
@ElConrado if you try to `console.log(blob)` you see that blob has a dimension different from 0? – Giovanni Esposito Aug 06 '21 at 12:10
1

I have: Blob {size: 0, type: ""} – ElConrado Aug 06 '21 at 12:12
That's the reason why file is empty. I tried with an image from internet and I got a size different from 0. Check your url, the problem could be there. – Giovanni Esposito Aug 06 '21 at 12:17
1

Yes, it was a problem with internal resource. An image from internet was loaded fine. – ElConrado Aug 06 '21 at 15:02
1

@ElConrado happy to ear that. Have a nice coding =) – Giovanni Esposito Aug 06 '21 at 15:03

score 1 · Answer 2 · answered Jul 18 '22 at 14:35

Building upon @Giovanni Esposito answer above,

Thank you Giovanni for answer, however, The fetch requests i made to firebase storage were blocked by CORS and so the method failed to work at first.

In case anyone else experiences the issue, being blocked by CORS. You will have make additional configuration with your Firebase Storage.

This post talks about the configuration you need to make with Google cloud to get the requests working.

For my case, i was making requests from localhost with react.js. below is the snippet i had to add to my cors.json file.

[
    {
      "origin": ["http://localhost:3000"],
      "method": ["GET"],
      "maxAgeSeconds": 3600
    }
]

I hope this helps anyone else who came across my issue.

React download image instead of showing in a new tab

2 Answers2