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

frontend/src/components/admin/PhotoUpload.tsx

@@ -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(

frontend/src/components/gallery/GalleryView.tsx

@@ -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', {

frontend/src/hooks/useGallery.ts

@@ -67,7 +67,8 @@ export const useDownloadPhoto = () => {
 
 export const useDownloadAllPhotos = () => {
   return useMutation({
-    mutationFn: (slug: string) => galleryService.downloadAllPhotos(slug),
+    mutationFn: ({ slug, zipReady }: { slug: string; zipReady?: boolean }) =>
+      galleryService.downloadAllPhotos(slug, zipReady),
     onSuccess: () => {
       toast.success('Download started');
     },

frontend/src/i18n/locales/de.json

@@ -134,6 +134,8 @@
     "uploadComplete": "Upload abgeschlossen!",
     "uploadFailed": "Upload fehlgeschlagen",
     "someFilesFailed": "Einige Dateien konnten nicht hochgeladen werden",
+    "replaceByName": "Vorhandene Fotos mit gleichem Namen ersetzen",
+    "replacedFiles": "{{count}} Foto(s) ersetzt",
     "uploadPhotos": "Fotos hochladen",
     "uploadMedia": "Fotos & Videos hochladen",
     "importExternal": "Aus externem Ordner importieren",

frontend/src/i18n/locales/en.json

@@ -134,6 +134,8 @@
     "uploadComplete": "Upload complete!",
     "uploadFailed": "Upload failed",
     "someFilesFailed": "Some files failed to upload",
+    "replaceByName": "Replace existing photos with same name",
+    "replacedFiles": "{{count}} photo(s) replaced",
     "uploadPhotos": "Upload Photos",
     "uploadMedia": "Upload Photos & Videos",
     "importExternal": "Import from External Folder",

frontend/src/i18n/locales/nl.json

@@ -134,6 +134,8 @@
     "uploadComplete": "Upload voltooid!",
     "uploadFailed": "Upload mislukt",
     "someFilesFailed": "Sommige bestanden konden niet worden geupload",
+    "replaceByName": "Bestaande foto's met dezelfde naam vervangen",
+    "replacedFiles": "{{count}} foto('s) vervangen",
     "uploadPhotos": "Foto's uploaden",
     "uploadMedia": "Foto's & video's uploaden",
     "importExternal": "Importeren uit externe map",

frontend/src/i18n/locales/pt.json

@@ -134,6 +134,8 @@
     "uploadComplete": "Envio concluído!",
     "uploadFailed": "Falha no envio",
     "someFilesFailed": "Alguns arquivos falharam ao enviar",
+    "replaceByName": "Substituir fotos existentes com o mesmo nome",
+    "replacedFiles": "{{count}} foto(s) substituída(s)",
     "uploadPhotos": "Enviar Fotos",
     "uploadMedia": "Enviar Fotos e Vídeos",
     "importExternal": "Importar de Pasta Externa",

frontend/src/i18n/locales/ru.json

@@ -134,6 +134,8 @@
     "uploadComplete": "Загрузка завершена!",
     "uploadFailed": "Ошибка загрузки",
     "someFilesFailed": "Не удалось загрузить некоторые файлы",
+    "replaceByName": "Заменить существующие фото с таким же именем",
+    "replacedFiles": "{{count}} фото заменено",
     "uploadPhotos": "Загрузить фото",
     "uploadMedia": "Загрузить фото и видео",
     "importExternal": "Импортировать из внешней папки",

frontend/src/services/gallery.service.ts

@@ -82,12 +82,26 @@ export const galleryService = {
   },
 
   // Download all photos as ZIP
-  async downloadAllPhotos(slug: string): Promise<void> {
+  // When a pre-generated zip is available, use native browser download (Content-Length → progress bar).
+  // Otherwise fall back to blob download.
+  async downloadAllPhotos(slug: string, zipReady?: boolean): Promise<void> {
+    if (zipReady) {
+      // Native browser download — the server sends Content-Length so
+      // the browser shows a real progress bar and mobile doesn't crash.
+      const link = document.createElement('a');
+      link.href = `/api/gallery/${slug}/download-all`;
+      link.setAttribute('download', `${slug}.zip`);
+      document.body.appendChild(link);
+      link.click();
+      link.remove();
+      return;
+    }
+
+    // Fallback: blob download (no Content-Length, buffered in memory)
     const response = await api.get(`/gallery/${slug}/download-all`, {
       responseType: 'blob',
     });
 
-    // Create download link
     const url = window.URL.createObjectURL(new Blob([response.data]));
     const link = document.createElement('a');
     link.href = url;