From 63301c91ba407eeab1993db867c2431039bbacc8 Mon Sep 17 00:00:00 2001
From: Maksym Tsymbarov <mtsymbarov@thingsboard.io>
Date: Fri, 23 Jan 2026 13:03:34 +0200
Subject: [PATCH] Fixed image upload component to allow refetch on error

---
 ui-ngx/src/app/core/http/image.service.ts                | 9 ++++-----
 .../components/image/gallery-image-input.component.ts    | 7 ++++---
 ui-ngx/src/app/shared/pipe/image.pipe.ts                 | 2 +-
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/ui-ngx/src/app/core/http/image.service.ts b/ui-ngx/src/app/core/http/image.service.ts
index c714f728c0..896145b351 100644
--- a/ui-ngx/src/app/core/http/image.service.ts
+++ b/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];
         }
       });
     }
diff --git a/ui-ngx/src/app/shared/components/image/gallery-image-input.component.ts b/ui-ngx/src/app/shared/components/image/gallery-image-input.component.ts
index 421d0ec559..9c5df854a5 100644
--- a/ui-ngx/src/app/shared/components/image/gallery-image-input.component.ts
+++ b/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);
       }
     });
   }
diff --git a/ui-ngx/src/app/shared/pipe/image.pipe.ts b/ui-ngx/src/app/shared/pipe/image.pipe.ts
index d17ed0ab76..b570da5f24 100644
--- a/ui-ngx/src/app/shared/pipe/image.pipe.ts
+++ b/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;