CODEWITHSUNDEEP
reactjsfiledownload
N8BIZ
N8BIZ

Reputation: 151

Initiate download onClick not working on any browser?

I'm attempting to initiate a download onclick with Firefox or any browser for that matter, but cannot seem to get it working appropriately. I've confirmed that my network request is working because it's posting a 200 and I can see the data in the response. Here is how I'm handling my request:

 await fetch (params)
            .then(async (data) => {
                data.blob();
            })
            .then((blob) => {
                const url = window.URL.createObjectURL(new Blob(blob));
                const link = document.createElement('a');
                setSuccess('Success');
                link.href = url;
                link.setAttribute(
                    'download',
                    modelName + formatName,
                );
                document.body.appendChild(link);
                link.click();
            });

Additionally, here is my React UI component code where my request is being called:

 React.useEffect(() => {
        if (clicked === true) {
             fetchData();
        }
    }, [clicked]);

    const handleExport = () => {
        setClick(true);
    };
    return (
        <Col id="exportColumn" className="col-lg-6 text-center">
            <Suspense fallback={<div> Loading . . . </div>}>
                <Button id="exportButton" onClick={handleExport} variant="dark">
                    Export
                </Button>
            </Suspense>
        </Col>
    );

Any ideas why this isn't working on Firefox?

Upvotes: 0

Views: 88

Answers (1)

fadfa
fadfa

Reputation: 76

Something I see is that you're chaining then methods, but the first one isn't returning anything. If you want your first then to return data.blob(); you need to remove the brackets or replace them with parentheses.

Like this:

 await fetch(params).then(async (data) => data.blob())...

Upvotes: 1

Related Questions