ngx-wapp-components 3.2.28-alpha.4 → 3.2.28-alpha.5

package/fesm2022/ngx-wapp-components.mjs

@@ -6865,6 +6865,7 @@ class WImageFileUploaderComponent {
         this.isProcessingExternalQueue = false;
         this.externalImageQueue = [];
         this.externalOpenedCropDialogs = 0;
+        this.openedCropperImageNames = new Set();
         this.carouselImagesResponsiveOptions = [
             {
                 breakpoint: '1024px',
@@ -7029,15 +7030,17 @@ class WImageFileUploaderComponent {
             }, this.timelife);
         }
         if (this.allowMultipleImages == true) {
-            event.currentFiles.forEach((file, index) => {
-                let foundIt = this.cropperImages.find(f => f.name == file.name);
-                let foundItAlreadyUploaded = this.imagesAlreadyUploaded.find(f => f.name == file.name);
-                if (event.currentFiles.length == 0) {
-                    this.openModalCropper(file, event.originalEvent);
+            const selectedNamesInBatch = new Set();
+            event.currentFiles.forEach((file) => {
+                const normalizedName = this.sanitizeFileName(file.name);
+                if (selectedNamesInBatch.has(normalizedName)) {
+                    return;
                 }
-                else if (foundIt == undefined || foundItAlreadyUploaded == undefined) {
-                    this.openModalCropper(file, event.originalEvent);
+                if (this.isImageNameAlreadyQueuedOrUploaded(file.name)) {
+                    return;
                 }
+                selectedNamesInBatch.add(normalizedName);
+                this.openModalCropper(file, event.originalEvent);
             });
             if (this.imageUploadConfig.allowAuto == false) {
                 this.fileUpload.files = [];
@@ -7121,6 +7124,11 @@ class WImageFileUploaderComponent {
         });
     }
     openModalCropper(fileBlob, event, fromExternal = false) {
+        const fileName = this.extractImageName(fileBlob);
+        const normalizedFileName = fileName ? this.sanitizeFileName(fileName) : '';
+        if (normalizedFileName) {
+            this.openedCropperImageNames.add(normalizedFileName);
+        }
         const ref = this.dialogService.open(WImageCropperComponent, {
             header: this.imageUploadConfig.croppedDialogTranslations?.modal.header,
             width: '70rem',
@@ -7165,6 +7173,9 @@ class WImageFileUploaderComponent {
                     }
                 }
             }
+            if (normalizedFileName) {
+                this.openedCropperImageNames.delete(normalizedFileName);
+            }
             if (fromExternal) {
                 this.externalOpenedCropDialogs = Math.max(0, this.externalOpenedCropDialogs - 1);
                 if (this.externalImageQueue.length > 0) {
@@ -7196,7 +7207,22 @@ class WImageFileUploaderComponent {
         if (!this.allowMultipleImages && queue.length > 1) {
             queue.splice(1);
         }
-        this.externalImageQueue.push(...queue);
+        const namesInCurrentBatch = new Set();
+        const filesToProcess = queue.filter(file => {
+            const normalizedName = this.sanitizeFileName(file.name);
+            if (namesInCurrentBatch.has(normalizedName)) {
+                return false;
+            }
+            if (this.isImageNameAlreadyQueuedOrUploaded(file.name)) {
+                return false;
+            }
+            namesInCurrentBatch.add(normalizedName);
+            return true;
+        });
+        if (filesToProcess.length === 0) {
+            return;
+        }
+        this.externalImageQueue.push(...filesToProcess);
         if (!this.isProcessingExternalQueue) {
             this.processNextExternalImage();
         }
@@ -7211,6 +7237,44 @@ class WImageFileUploaderComponent {
         this.externalOpenedCropDialogs++;
         this.openModalCropper(file, undefined, true);
     }
+    isImageNameAlreadyQueuedOrUploaded(fileName) {
+        const normalizedName = this.sanitizeFileName(fileName);
+        if (this.openedCropperImageNames.has(normalizedName)) {
+            return true;
+        }
+        const existsInUploaded = this.imagesAlreadyUploaded?.some((image) => {
+            const imageName = this.extractImageName(image);
+            return imageName ? this.sanitizeFileName(imageName) === normalizedName : false;
+        });
+        if (existsInUploaded) {
+            return true;
+        }
+        const existsInCropper = this.cropperImages?.some((image) => {
+            const imageName = this.extractImageName(image);
+            return imageName ? this.sanitizeFileName(imageName) === normalizedName : false;
+        });
+        if (existsInCropper) {
+            return true;
+        }
+        return this.externalImageQueue?.some((queuedFile) => this.sanitizeFileName(queuedFile.name) === normalizedName) ?? false;
+    }
+    extractImageName(image) {
+        if (!image) {
+            return '';
+        }
+        if (typeof image.name === 'string' && image.name.length > 0) {
+            return image.name;
+        }
+        if (typeof image.fileBase64 === 'string' && image.fileBase64.length > 0) {
+            const lastSegment = image.fileBase64.split('/').pop();
+            return lastSegment ?? '';
+        }
+        if (typeof image === 'string' && image.length > 0) {
+            const lastSegment = image.split('/').pop();
+            return lastSegment ?? '';
+        }
+        return '';
+    }
     mapToObjectB64(images) {
         if (Array.isArray(images) == false) {
             return [{