fix(album): after updating the album, the photos are dissapearing from the page

frontend/src/views/creators/AboutCreator.vue

@@ -157,12 +157,12 @@ const canSave = computed(() => {
 });
 
 const thumbnailUrls = computed(() => {
-  return photos.value.map(photo => photo.thumbnailUrl)
+  return photos.value.map(photo => photo.image.thumbnailUrl)
 })
 
 // Add this computed property to get the original image URLs
 const originalUrls = computed(() => {
-  return photos.value.map(photo => photo.originalUrl);
+  return photos.value.map(photo => photo.image.originalUrl);
 });
 
 // Computed property to check if there are images
@@ -211,6 +211,7 @@ function toggleEditMode() {
 
 // Fetch album data
 async function fetchAlbumData() {
+  console.log('in fetchAlbumData()');
   if (!brandingStore.value?.id) return;
 
   albumId.value = brandingStore.value.id;
@@ -223,7 +224,12 @@ async function fetchAlbumData() {
       // Store original photos for comparison
       originalPhotos.value = response.data.photos;
       // Extract photo URLs from the album photos
-      photos.value = response.data.photos;
+      photos.value = response.data.photos.map(photo => ({
+        file: null,
+        image: photo,
+        isProcessing: false,
+        isUploading: false,
+      }));
     } else {
       // Initialize with empty array instead of empty slots
       photos.value = [];
@@ -295,13 +301,18 @@ async function saveChanges() {
     description.value = editableDescription.value;
     videoUrl.value = extractVideoId(editableVideoUrl.value) || "";
 
-
     // Check for deleted photos
+    console.log('originalPhotos', originalPhotos.value);
+    console.log('photos', photos.value);
+    const photosOriginalUrls = photos.value.map(photo => photo.image.originalUrl);
+    console.log('photosThumbnailUrls', photosOriginalUrls);
     const deletedPhotos = originalPhotos.value.filter(originalPhoto => {
       // If the photo URL is not in the current images array, it was deleted
-      return !photos.value.includes(originalPhoto.thumbnailUrl);
+      return !photosOriginalUrls.includes(originalPhoto.originalUrl);
     });
 
+    console.log('deletedPhotos', deletedPhotos);
+
     // Save album photos if they've changed
     if (photos.value.length > 0 || deletedPhotos.length > 0) {
       // Create or update the album
@@ -329,42 +340,31 @@ async function saveChanges() {
       }
 
       // Now add or update photos
-      for (let i = 0; i < photos.value.length; i++) {
-        const imageData = photos.value[i];
+      const newImages = photos.value.filter(photo => photo && photo.image && photo.image.originalUrl.startsWith('data:'));
+      console.log('newImages', newImages);
+      for (let i = 0; i < newImages.length; i++) {
+        const imageData = newImages[i];
         console.log('Image Data to be uploaded:', imageData);
-        if (imageData && imageData.image && imageData.image.originalUrl.startsWith('data:')) {
-          // This is a new image that needs to be uploaded
-          const photoId = crypto.randomUUID();
-          const formData = new FormData();
+        // This is a new image that needs to be uploaded
+        const photoId = crypto.randomUUID();
+        const formData = new FormData();
 
-          // Extract MIME type from data URL
-          const mimeMatch = imageData.image.originalUrl.match(/^data:(.*?);base64,/);
-          if (!mimeMatch) {
-            console.warn(`Invalid data URL at index ${i}`);
-            continue;
+        // Convert data URL to file
+        const response = await fetch(imageData.image.originalUrl);
+        const blob = await response.blob();
+        const file = new File([blob], imageData.file.name, { type: imageData.file.type });
+
+        formData.append('file', file);
+
+        await client.post(`/api/albums/${albumId}/photos`, formData, {
+          headers: {
+            'Content-Type': 'multipart/form-data'
+          },
+          params: {
+            photoId: photoId
           }
+        });
 
-          const mimeType = mimeMatch[1];
-
-          // Determine file extension from MIME type
-          const extension = mimeType.split('/')[1]; // e.g., "jpeg", "png", "webp", etc.
-
-          // Convert data URL to file
-          const response = await fetch(imageData.image.originalUrl);
-          const blob = await response.blob();
-          const file = new File([blob], `photo-${i}.${extension}`, { type: mimeType });
-
-          formData.append('file', file);
-
-          await client.post(`/api/albums/${albumId}/photos`, formData, {
-            headers: {
-              'Content-Type': 'multipart/form-data'
-            },
-            params: {
-              photoId: photoId
-            }
-          });
-        }
       }
 
       // Refresh album data after changes

frontend/src/views/creators/AlbumEditor.vue

@@ -58,7 +58,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted, watch } from "vue";
+import { ref, onMounted, watch } from "vue";
 import { useI18n } from 'vue-i18n';
 import { v7 } from 'uuid';
 import draggable from 'vuedraggable';
@@ -78,12 +78,7 @@ const localImages = ref([]);
 
 onMounted(() => {
   // Initialize local images with IDs and states
-  localImages.value = props.images.map((image) => ({
-    image: image,
-    file: null,
-    isProcessing: false,
-    isUploading: false,
-  }));
+  localImages.value = props.images;
 });
 
 watch(localImages, (newVal) => {