dumili: Fix image upload page order

Author: bperel

apps/dumili/src/components/UploadModal.vue

@@ -119,22 +119,10 @@ const { user } = storeToRefs(webStores.collection());
 
 const showWidget = ref(true);
 
-watch(
-  () => uploadPageNumber,
-  (value) => {
-    if (value !== undefined) {
-      modal.value = true;
-      showWidget.value = true;
-    }
-  },
-  { immediate: true },
-);
-
 const uploadFileType = ref<"PDF_ignore" | "PDF_replace" | "Images">(
   "PDF_ignore",
 );
 
-const currentPageIndex = ref(0);
 const isUploading = ref(false);
 const processLog = ref("");
 
@@ -147,6 +135,17 @@ declare var cloudinary: {
   createUploadWidget: CloudinaryCreateUploadWidget;
 };
 
+watch(
+  () => uploadPageNumber,
+  (value) => {
+    if (value !== undefined) {
+      modal.value = true;
+      showWidget.value = true;
+    }
+  },
+  { immediate: true },
+);
+
 const pages = computed(() =>
   uploadFileType.value === "PDF_ignore"
     ? pagesWithoutOverwrite.value
@@ -160,6 +159,7 @@ const processPage = async (pageIndex: number, url: string) => {
 };
 
 onMounted(() => {
+  const fileIds: string[] = [];
   const folderName = indexation.value!.id;
   const uploadWidget = cloudinary.createUploadWidget(
     {
@@ -182,6 +182,9 @@ onMounted(() => {
         console.error(error);
       } else {
         switch (result?.event) {
+          case "upload-added":
+            fileIds.push((result.info as CloudinaryUploadWidgetInfo).id);
+            break;
           case "queues-start":
             isUploading.value = true;
             break;
@@ -190,23 +193,28 @@ onMounted(() => {
             const info = result.info as CloudinaryUploadWidgetInfo;
             console.log("Done! Here is the image info: ", info);
 
+            const firstUploadPageIndex = pages.value.findIndex(
+              (page) => page.pageNumber === uploadPageNumber,
+            );
             if (info.pages) {
               for (
                 let page = 1;
                 page <= Math.min(info.pages, pages.value.length);
                 page++
               ) {
                 await processPage(
-                  currentPageIndex.value++,
+                  firstUploadPageIndex + page - 1,
                   info.secure_url
                     .replace("/upload/", `/upload/pg_${page}/`)
                     .replace(/.pdf$/g, ".png"),
                 );
               }
             } else {
-              await processPage(currentPageIndex.value++, info.secure_url);
+              await processPage(
+                firstUploadPageIndex + fileIds.indexOf(info.id),
+                info.secure_url,
+              );
             }
-            currentPageIndex.value = 0;
             modal.value = false;
             emit("done");
             break;