Merge pull request #14878 from mtsymbarov-del/fix/image-upload

Fixed image upload component to allow refetch on error

ui-ngx/src/app/core/http/image.service.ts

@@ -31,7 +31,7 @@ import {
   removeTbImagePrefix,
   ResourceSubType
 } from '@shared/models/resource.models';
-import { catchError, map, switchMap } from 'rxjs/operators';
+import { catchError, finalize, map, switchMap } from 'rxjs/operators';
 import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
 import { blobToBase64, blobToText } from '@core/utils';
 import { ResourcesService } from '@core/services/resources.service';
@@ -116,16 +116,15 @@ export class ImageService {
       request = new ReplaySubject<Blob>(1);
       this.imagesLoading[imageLink] = request;
       const options = defaultHttpOptionsFromConfig({ignoreLoading: true, ignoreErrors: true});
-      this.http.get(imageLink, {...options, ...{ responseType: 'blob' } }).subscribe({
+      this.http.get(imageLink, {...options, ...{ responseType: 'blob' } }).pipe(
+        finalize(()=> delete this.imagesLoading[imageLink])
+      ).subscribe({
         next: (value) => {
           request.next(value);
           request.complete();
         },
         error: err => {
           request.error(err);
-        },
-        complete: () => {
-          delete this.imagesLoading[imageLink];
         }
       });
     }

ui-ngx/src/app/shared/components/image/gallery-image-input.component.ts

@@ -171,9 +171,9 @@ export class GalleryImageInputComponent extends PageComponent implements OnInit,
     }
   }
 
-  private updateModel(value: string) {
+  private updateModel(value: string, forcedToUpdate = false): void {
     this.cd.markForCheck();
-    if (this.imageUrl !== value) {
+    if (this.imageUrl !== value || forcedToUpdate) {
       this.imageUrl = value;
       this.propagateChange(prependTbImagePrefix(this.imageUrl));
     }
@@ -211,9 +211,10 @@ export class GalleryImageInputComponent extends PageComponent implements OnInit,
         }
     }).afterClosed().subscribe((image) => {
       if (image) {
+        const forcedToUpdate =  this.imageUrl === image.link && this.imageResource?.descriptor?.etag !== image.descriptor.etag;
         this.linkType = ImageLinkType.resource;
         this.imageResource = image;
-        this.updateModel(image.link);
+        this.updateModel(image.link, forcedToUpdate);
       }
     });
   }

ui-ngx/src/app/shared/pipe/image.pipe.ts

@@ -38,7 +38,7 @@ export class ImagePipe implements PipeTransform {
               private sanitizer: DomSanitizer,
               private zone: NgZone) { }
 
-  transform(urlData: string | UrlHolder, args?: any): Observable<SafeUrl | string> {
+  transform(urlData: string | UrlHolder, args?: any, triggerUpdate?: number): Observable<SafeUrl | string> {
     const ignoreLoadingImage = !!args?.ignoreLoadingImage;
     const asString = !!args?.asString;
     const emptyUrl = args?.emptyUrl || NO_IMAGE_DATA_URI;