Fix file downloads for Safari with proper filename handling

Implement browser-specific download methods to ensure files download with correct filenames across all browsers. Safari now uses window.location.href while other browsers use blob URLs. Add Content-Disposition header to proxy endpoint for proper filename preservation.
This commit is contained in:
2025-06-04 19:13:09 +02:00
parent b7544d82f3
commit 4d3935e863
3 changed files with 74 additions and 34 deletions

View File

@@ -499,37 +499,58 @@ const createNewFolder = async () => {
}
};
// Download file (using proxy for Safari compatibility)
// Download file (with special handling for Safari)
const downloadFile = async (file: FileItem) => {
downloadingFiles.value[file.name] = true;
try {
// Use proxy download endpoint for better mobile compatibility
const proxyUrl = `/api/files/proxy-download?fileName=${encodeURIComponent(file.name)}`;
// Create a link element
const link = document.createElement('a');
link.href = proxyUrl;
// Extract clean filename for download
let filename = file.displayName;
if (!filename.includes('.') && file.extension) {
filename += '.' + file.extension;
}
link.download = filename;
link.style.display = 'none';
document.body.appendChild(link);
link.click();
// Check if Safari (iOS or desktop)
const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
// Clean up
setTimeout(() => {
document.body.removeChild(link);
}, 100);
if (isSafari) {
// For Safari, open in new window to force proper filename handling
const downloadUrl = `/api/files/proxy-download?fileName=${encodeURIComponent(file.name)}`;
window.location.href = downloadUrl;
} else {
// For other browsers, use blob approach
const response = await fetch(`/api/files/proxy-download?fileName=${encodeURIComponent(file.name)}`);
if (!response.ok) {
throw new Error('Failed to download file');
}
const blob = await response.blob();
// Create object URL from blob
const objectUrl = URL.createObjectURL(blob);
// Create a link element
const link = document.createElement('a');
link.href = objectUrl;
link.download = filename;
link.style.display = 'none';
document.body.appendChild(link);
link.click();
// Clean up
setTimeout(() => {
document.body.removeChild(link);
URL.revokeObjectURL(objectUrl);
}, 100);
}
} catch (error) {
toast.error('Failed to download file');
} finally {
downloadingFiles.value[file.name] = false;
// Add delay for Safari to prevent immediate loading state removal
setTimeout(() => {
downloadingFiles.value[file.name] = false;
}, 1000);
}
};