Oliver/modcomms
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix download button in proof detail view

Browse source 
The download button was only logging to console instead of
downloading the proof file. Added handleDownload function that
supports both data URLs and remote URLs with proper CORS handling.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
michael 2025-12-19 06:16:07 -06:00
parent 6bdb02d78b
commit c3396be029
1 changed files with 36 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
frontend/components/Campaigns.tsx
View file

@ -1097,6 +1097,41 @@ const ProofDetailView: React.FC<{
});
};
const handleDownload = async () => {
const url = selectedVersion.proofPreviewUrl;
const fileName = `${proof.proofName}_V${selectedVersion.version}`;
try {
if (url.startsWith('data:')) {
// Data URL - extract mime type and download directly
const link = document.createElement('a');
link.href = url;
const mimeMatch = url.match(/data:([^;]+)/);
const ext = mimeMatch ? mimeMatch[1].split('/')[1] : 'png';
link.download = `${fileName}.${ext}`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
} else {
// Remote URL - fetch as blob to handle CORS and ensure download
const response = await fetch(url);
const blob = await response.blob();
const blobUrl = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = blobUrl;
const ext = url.split('.').pop()?.split('?')[0] || 'png';
link.download = `${fileName}.${ext}`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(blobUrl);
}
} catch (error) {
console.error('Failed to download file:', error);
alert('Sorry, there was an error downloading the file. Please try again.');
}
};
if (!selectedVersion) {
return (
<div className="p-8">
@ -1156,7 +1191,7 @@ const ProofDetailView: React.FC<{
</h3>
<div className="flex items-center gap-2">
<button
onClick={() => console.log('Download version clicked')}
onClick={handleDownload}
className="flex items-center gap-2 text-sm bg-brand-accent text-white font-semibold py-1.5 px-3 rounded-lg border border-transparent hover:bg-brand-dark-blue transition-colors duration-200"
title={`Download Version ${selectedVersion.version}`}
>