@tft/crispr-forms 13.0.3 → 13.0.4

package/fesm2020/tft-crispr-forms.mjs

@@ -1127,7 +1127,6 @@ function convertBytesToMb(bytes) {
 
 const ImageUploadFieldMixin = crisprControlMixin(CrisprFieldComponent);
 class ImageUploadFieldComponent extends ImageUploadFieldMixin {
-    // ngControl: NgControl = null;
     constructor(ngControl, domSanitizer, cdr) {
         super();
         this.ngControl = ngControl;
@@ -1148,24 +1147,28 @@ class ImageUploadFieldComponent extends ImageUploadFieldMixin {
             minCompressionThresholdMb: .6,
             useWebWorker: true,
         };
+        /**
+         * The url mapped from initial input value, consumers can us mapInputValueToUrl in config to transform their input value into a src url for the image element
+         */
+        // inputValueUrl: string | undefined;
         this.inputImageFileSubject = new Subject();
         this.inputImageFile$ = this.inputImageFileSubject.asObservable().pipe(shareReplay(1));
         this.compressedFile$ = this.inputImageFile$.pipe(switchMap(async (file) => {
-            if (!file)
+            if (!file || !(file instanceof File))
                 return null;
-            if (typeof file === 'string')
-                return file;
             const { compressImage, targetCompressedImageFileSizeMb, minCompressionThresholdMb, maxWidthOrHeight, useWebWorker } = this.config;
             const fileSizeMb = convertBytesToMb(file.size);
-            const shouldCompress = compressImage && targetCompressedImageFileSizeMb < fileSizeMb && minCompressionThresholdMb < fileSizeMb;
+            const shouldCompress = compressImage
+                && targetCompressedImageFileSizeMb < fileSizeMb
+                && minCompressionThresholdMb < fileSizeMb;
             if (shouldCompress) {
                 const options = {
                     // Use maxWidthOrHeight if it was provided, else use target compressed size
                     ...(maxWidthOrHeight ? { maxWidthOrHeight } : { maxSizeMB: targetCompressedImageFileSizeMb }),
                     useWebWorker,
                     maxIterations: 30,
-                    onProgress: (p) => {
-                        this.progress = p;
+                    onProgress: (progress) => {
+                        this.progress = progress;
                         this.cdr.detectChanges();
                     }
                 };
@@ -1173,23 +1176,27 @@ class ImageUploadFieldComponent extends ImageUploadFieldMixin {
             }
             else
                 return file;
-        }), map((compressedFileOrString) => {
-            if (!compressedFileOrString || typeof compressedFileOrString === 'string')
-                return compressedFileOrString;
-            const { type, name, lastModified } = compressedFileOrString;
-            return new File([compressedFileOrString], this.config.fileName || name, {
+        }), map((compressedFile) => {
+            if (!compressedFile)
+                return compressedFile;
+            const { type, name, lastModified } = compressedFile;
+            return new File([compressedFile], this.config.fileName || name, {
                 type,
                 lastModified
             });
         }), tap(file => {
-            this.control.setValue(file);
+            // only set the value if there is a file because resetToInitialValue sets the control value
+            // to initial value and clears the compressed image, so setting it to null here would undo that
+            if (file) {
+                this.control.setValue(file);
+            }
             if (file || this.value) {
                 this.control.markAsTouched();
                 setTimeout(() => {
                     this.cdr.detectChanges();
                 }, 100);
             }
-        }), map(file => typeof file === 'string' ? null : file), shareReplay(1));
+        }), shareReplay(1));
         this.compressedImageUrlString$ = this.compressedFile$.pipe(switchMap(async (file) => {
             if (!file)
                 return null;
@@ -1205,11 +1212,18 @@ class ImageUploadFieldComponent extends ImageUploadFieldMixin {
     }
     ngOnInit() {
         super.ngOnInit();
+        // this.inputValueUrl = this.value && this.config.mapInputValueToUrl?.(this.value) || this.value;
         this.imageSrcUrl$ = combineLatest([
             this.compressedImageUrlString$.pipe(startWith(null)),
-            this.control.valueChanges.pipe(startWith(this.value))
+            this.control.valueChanges.pipe(startWith(this.value), map((controlValue) => {
+                if (!controlValue)
+                    return null;
+                if (controlValue instanceof File)
+                    return null;
+                return this.config.mapInputValueToUrl?.(controlValue) || controlValue;
+            }))
         ]).pipe(map(([compressedImageUrlString, controlUrl]) => {
-            return compressedImageUrlString || typeof controlUrl === 'string' && controlUrl || null;
+            return compressedImageUrlString || controlUrl || null;
         }));
         this.disabled$ = this.config.disabledCallback
             ? this.config.disabledCallback(this.group, this.config)
@@ -1218,6 +1232,10 @@ class ImageUploadFieldComponent extends ImageUploadFieldMixin {
     filesChanged(files) {
         if (files && files.length > 0) {
             const imageFile = files[0];
+            // We clear the control here so that it is invalid while compressing
+            // the input pipeline will take care of resetting it
+            this.control.patchValue(null);
+            // this.control.setErrors({compressing: {loadingMessage: 'Please wait while file compresses'}});
             this.control.markAsTouched();
             this.inputImageFileSubject.next(imageFile);
         }
@@ -1230,8 +1248,8 @@ class ImageUploadFieldComponent extends ImageUploadFieldMixin {
         this.isUploaded = false;
     }
     resetToInitialValue(initialValue) {
-        this.inputImageFileSubject.next(initialValue);
-        // this.fileInputRef.nativeElement.value = initialValue
+        this.inputImageFileSubject.next(null);
+        this.control.patchValue(initialValue);
         this.isUploaded = false;
     }
     writeValue(value) { }
@@ -1310,7 +1328,6 @@ function maxFileSizeValidator(maxFileSize) {
         const actualFileSize = +convertBytesToMb(controlValue.size).toPrecision(3);
         if (maxFileSize > actualFileSize)
             return null;
-        // control.setErrors({maxFileSize: { maxFileSize, actualFileSize }} )
         return { maxFileSize: { maxFileSize, actualFileSize } };
     };
 }