Skip to content

Bug Fix: Robust Image Download Implementation #2

@codeCraft-Ritik

Description

@codeCraft-Ritik

Issue: In Result.jsx, the download button uses a static href to the image URL. This often results in the image opening in a new tab rather than downloading to the user's device.

Solution: Implement a Blob-based download function to force the browser to trigger a "Save As" action.

File Path: Imagify/client/src/pages/Result.jsx

const downloadImage = async () => {
    try {
        const response = await fetch(image);
        const blob = await response.blob();
        const url = window.URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = url;
        link.download = "generated-image.png";
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        window.URL.revokeObjectURL(url);
    } catch (error) {
        console.error("Download failed", error);
    }
};

// Replace <a> tag with button
<button onClick={downloadImage} className='bg-zinc-900 px-10 py-3 rounded-full cursor-pointer'>
    Download
</button>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions