@thestartupfactory/file-progress-hook

File Download Hook

This library offers a useDownloadFile hook which tracks the progress of the file download. In order for the download % to be determined then the file size needs to be known when mutate is called.

Installation

npm install @thestartupfactory/file-progress-hook

Example hook usage

const [downloadProgress, setDownloadProgress] = useState<ProgressState>({
  state: 'awaiting',
});

const downloadFile = useDownloadFile({
  errorMessage: (fileName) => `Failed to download ${fileName}`,
  downloadingMessage: (fileName) => `Downloading ${fileName}`,
  completeMessage: (fileName) => `${fileName} successfully downloaded`,
});

downloadFile.mutate({
  setProgress,
  url: 'https://localhost:4200/file',
  fileName: 'myImage.png',
  fileSize: 154242, // in bytes
});

Building

Run nx build open-file-download-hook to build the library.

Troubleshooting

When using the hook exported by this library it is common to get an error similar to this:

Error
No QueryClient set, use QueryClientProvider to set one
Call Stack
 ...

A solution to this issue is to set up the correct path resolution in your tsconfig.json. This ensures that TypeScript recognizes the package correctly, which can help eliminate related issues:

{
  "compilerOptions": {
    "paths": {
      "@tanstack/react-query": ["./node_modules/@tanstack/react-query"],
    }
  },
}