Doesn't work in React 18

[72gm]

Hi,

Code worked perfectly when I ran your version locally. When I tried to incorporate your changes into my project I was getting weird results - looked like it was working but throwing a network error for the download

My project is React 18. I upgraded your project to 18 and it no longer worked and gave me the same issue I was facing.. Can't see anything obvious

Any ideas?

[anubhavgoel-se-01]

Hey!
I didn't upgrade to v18.

Although I checked your code (https://github.com/72gm/download-v18).

You are trying to download a csv file:

But giving the file extension as .pdf

Try making these changes:

1. Correct the API url:

const apiUrl =
  "https://raw.githubusercontent.com/anubhav-goel/react-download-file-axios/main/sampleFiles/pdf-sample.pdf";

2. Wrap clicking the ref inside a setTimeout

setTimeout(() => {
        ref.current?.click();
        URL.revokeObjectURL(url);
      }, 100);

[72gm]

Hi, the extension should be irrelevant as it works fine in v17 ... but I'll change it and see

[72gm]

setTimeout(() => {
ref.current?.click();
URL.revokeObjectURL(url);
}, 100);

solves the problem thanks very much

why is this, can you advise?

[BriHav]

Replacing setFileUrl(url) with ref.current.href = url will fix it for React 18. You need to set the download filename as well link.current.download = getFileName()

The issue is that the state is not updated by the time that the click event on the ref is called, adding a timeout will also solve it, but might brake if rendering takes longer than the timeout amount.
The states for filename and url can be omitted after the modifications.

Thanks for the complete code and walkthrough, create work, helped me build a hook I could use :)