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:
@@ -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);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user