JS file download using API endpoint

[igorbumba]

import { AxiosError } from 'axios';
import { NextApiRequest, NextApiResponse } from 'next';
import instance from '@libs/wordpress';

const handler = async (req: NextApiRequest, res: NextApiResponse) => {
    if (req.method === 'POST') {
        try {
            const { data, status } = await instance.post('/download-route', { ids: req.body });
            const { data: file } = await instance.get(data.url, { responseType: 'arraybuffer' });
            res.setHeader('Content-Type', data.contentType);
            res.setHeader('Filename', data.basename);
            return res.status(status).send(file);
        } catch (e) {
            const err = e as AxiosError;
            const status = err?.response?.data?.statusCode || 400;
            return res.status(status).json({ ...err?.response?.data });
        }
    } else {
        return res.status(400).json({ message: 'Bad request!' });
    }
};

export default handler;

[igorbumba]

import { useCallback, useState } from 'react';
import axios from 'axios';
import fileDownload from 'js-file-download';
import routes from '@libs/routes';

const useFileDownload = () => {
    const [downloading, setDownloading] = useState<boolean>(false);

    const downloadFiles = useCallback(
        files => {
            setDownloading(true);
            axios
                .post(routes.api.download, files, { responseType: 'blob' })
                .then(results => {
                    const file = new Blob([results.data]);
                    fileDownload(file, results.headers.filename);
                })
                .finally(() => setDownloading(false));
        },
        [setDownloading]
    );

    return {
        downloading,
        downloadFiles,
    };
};

export default useFileDownload;