get the download status of the plugin file file-saver in react

April 12, 2024

In react, I use the file-saver plugin to download PDF and it works well for me. But I want to get the state or status of the download process, so that I can change the text on the download button. Here is the import of the plugin:

import { saveAs } from "file-saver";

This is initializatio:

const GetPDF = async (event) => {
  event.preventDefault();
  const blob = await pdf(<DocumentPDF />).toBlob();
  saveAs(blob, "custom-court-tool.pdf");
}

But like I said above, I want to get the download status of the file to change the text for the download button, similar to this:

<button>{Downloading ? "In the process..." : "Download"}</button>

Downloading – is a conditional value for understanding what I want to get.

But how do I do this with the file-saver plugin?

Thanks!

>Solution :

Seems that the documentation doesn’t explain how to do it, but you can make it using a "Download" react state to handle the download options, something like:

const [isDownloading, setIsDownloading] = useState(false);

And, in the GetPDF function handle the state change

const GetPDF = async (event) => {
  event.preventDefault();
  setIsDownloading(true);
  const blob = await pdf(<DocumentPDF />).toBlob();
  saveAs(blob, "custom-court-tool.pdf");
  setIsDownloading(false);
}