feat: pre-zip download all and photo replacement by name (#312, #313)

Pre-zip downloads:
- Generate ZIP in background after photo mutations (upload/delete/watermark change)
- Serve cached zip with Content-Length for instant downloads and native progress bar
- Falls back to on-the-fly streaming when no cache exists yet
- Frontend uses browser-native download when zip is ready (no blob buffering)
- New downloadZipService with debounced regeneration and in-memory locking

Photo replacement:
- Admin upload form gets "Replace existing photos with same name" checkbox
- Matches by original_filename (case-insensitive) within the same event
- Preserves photo ID, position, feedback, category, and visibility
- Updates file, thumbnail, dimensions, EXIF capture date on replacement
- Ambiguous matches (multiple photos with same name) skip replacement with warning
- New photoReplacementService with findReplacementCandidate and replacePhoto
This commit is contained in:
Paul Nothaft
2026-04-23 16:49:31 +02:00
parent 4353acebf9
commit e18afd3e6b
16 changed files with 664 additions and 36 deletions
+25 -2
View File
@@ -26,6 +26,7 @@ export const PhotoUpload: React.FC<PhotoUploadProps> = ({ eventId, onUploadCompl
const [currentChunk, setCurrentChunk] = useState(0);
const [totalChunks, setTotalChunks] = useState(0);
const [selectedCategoryId, setSelectedCategoryId] = useState<number | null>(null);
const [replaceByName, setReplaceByName] = useState(false);
const fileInputRef = useRef<HTMLInputElement>(null);
// Fetch categories for this event
@@ -135,6 +136,7 @@ export const PhotoUpload: React.FC<PhotoUploadProps> = ({ eventId, onUploadCompl
setTotalChunks(chunks.length);
let totalUploaded = 0;
let totalReplaced = 0;
let failedFiles = [];
try {
@@ -150,9 +152,12 @@ export const PhotoUpload: React.FC<PhotoUploadProps> = ({ eventId, onUploadCompl
if (selectedCategoryId) {
formData.append('category_id', selectedCategoryId.toString());
}
if (replaceByName) {
formData.append('replace_by_name', 'true');
}
try {
await api.post(`/admin/events/${eventId}/upload`, formData, {
const response = await api.post(`/admin/events/${eventId}/upload`, formData, {
onUploadProgress: (progressEvent) => {
if (progressEvent.total) {
// Calculate overall progress across all chunks
@@ -163,7 +168,8 @@ export const PhotoUpload: React.FC<PhotoUploadProps> = ({ eventId, onUploadCompl
},
});
totalUploaded += chunk.length;
totalUploaded += (response.data?.successCount || chunk.length);
totalReplaced += (response.data?.replacedCount || 0);
} catch (error: any) {
console.error(`Error uploading chunk ${chunkIndex + 1}:`, error);
failedFiles.push(...chunk.map(f => f.name));
@@ -180,6 +186,9 @@ export const PhotoUpload: React.FC<PhotoUploadProps> = ({ eventId, onUploadCompl
}
// Show appropriate message
if (totalReplaced > 0) {
toast.info(t('upload.replacedFiles', { count: totalReplaced }) || `${totalReplaced} photo(s) replaced`);
}
if (failedFiles.length === 0) {
toast.success(t('upload.uploadComplete') || `Successfully uploaded ${totalUploaded} files`);
} else {
@@ -231,6 +240,20 @@ export const PhotoUpload: React.FC<PhotoUploadProps> = ({ eventId, onUploadCompl
</select>
</div>
{/* Replace by name toggle */}
<div className="flex items-center gap-2">
<input
type="checkbox"
id="replace-by-name"
checked={replaceByName}
onChange={(e) => setReplaceByName(e.target.checked)}
className="rounded border-neutral-300 text-primary-600 focus:ring-primary-500"
/>
<label htmlFor="replace-by-name" className="text-sm text-neutral-700 dark:text-neutral-300">
{t('upload.replaceByName', 'Replace existing photos with same name')}
</label>
</div>
{/* File Input Area */}
<div
className={clsx(
@@ -514,7 +514,7 @@ export const GalleryView: React.FC<GalleryViewProps> = ({ slug, event }) => {
return;
}
downloadAllMutation.mutate(slug);
downloadAllMutation.mutate({ slug, zipReady: data?.event?.download_zip_ready });
// Track download all action
analyticsService.trackGalleryEvent('bulk_download', {