geonetwork-ui 2.3.0-dev.3d65a13b → 2.3.0-dev.c3722986

package/libs/ui/inputs/src/lib/image-input/image-input.component.d.ts

@@ -0,0 +1,44 @@
+import { HttpClient } from '@angular/common/http';
+import { ChangeDetectorRef, EventEmitter } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class ImageInputComponent {
+    private http;
+    private cd;
+    maxSizeMB: number;
+    previewUrl?: string;
+    altText?: string;
+    uploadProgress?: number;
+    uploadError?: boolean;
+    fileChange: EventEmitter<File>;
+    urlChange: EventEmitter<string>;
+    uploadCancel: EventEmitter<void>;
+    delete: EventEmitter<void>;
+    altTextChange: EventEmitter<string>;
+    dragFilesOver: boolean;
+    showUrlInput: boolean;
+    downloadError: boolean;
+    showAltTextInput: boolean;
+    urlInputValue?: string;
+    lastUploadType?: 'file' | 'url';
+    lastUploadContent?: string | File;
+    constructor(http: HttpClient, cd: ChangeDetectorRef);
+    getPrimaryText(): "input.image.uploadErrorLabel" | "input.image.uploadProgressLabel" | "input.image.selectFileLabel";
+    getSecondaryText(): "input.image.uploadErrorRetry" | "input.image.uploadProgressCancel" | "input.image.dropFileLabel";
+    handleDragFilesOver(dragFilesOver: boolean): void;
+    handleDropFiles(files: File[]): void;
+    handleFileInput(event: Event): void;
+    displayUrlInput(): void;
+    handleUrlChange(event: Event): void;
+    downloadUrl(): Promise<void>;
+    handleSecondaryTextClick(): void;
+    handleCancel(): void;
+    handleRetry(): void;
+    handleDelete(): void;
+    toggleAltTextInput(): void;
+    handleAltTextChange(event: Event): void;
+    private filterTypeImage;
+    private resizeAndEmit;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ImageInputComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ImageInputComponent, "gn-ui-image-input", never, { "maxSizeMB": { "alias": "maxSizeMB"; "required": false; }; "previewUrl": { "alias": "previewUrl"; "required": false; }; "altText": { "alias": "altText"; "required": false; }; "uploadProgress": { "alias": "uploadProgress"; "required": false; }; "uploadError": { "alias": "uploadError"; "required": false; }; }, { "fileChange": "fileChange"; "urlChange": "urlChange"; "uploadCancel": "uploadCancel"; "delete": "delete"; "altTextChange": "altTextChange"; }, never, never, true, never>;
+}
+//# sourceMappingURL=image-input.component.d.ts.map

package/libs/ui/inputs/src/lib/image-input/image-input.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-input.component.d.ts","sourceRoot":"","sources":["../../../../../../src/libs/ui/inputs/src/lib/image-input/image-input.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AACjD,OAAO,EAEL,iBAAiB,EAEjB,YAAY,EAGb,MAAM,eAAe,CAAA;;AAUtB,qBAea,mBAAmB;IAqBlB,OAAO,CAAC,IAAI;IAAc,OAAO,CAAC,EAAE;IApBvC,SAAS,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,WAAW,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,EAAE,YAAY,CAAC,IAAI,CAAC,CAAqB;IACnD,SAAS,EAAE,YAAY,CAAC,MAAM,CAAC,CAAqB;IACpD,YAAY,EAAE,YAAY,CAAC,IAAI,CAAC,CAAqB;IACrD,MAAM,EAAE,YAAY,CAAC,IAAI,CAAC,CAAqB;IAC/C,aAAa,EAAE,YAAY,CAAC,MAAM,CAAC,CAAqB;IAElE,aAAa,UAAQ;IACrB,YAAY,UAAQ;IACpB,aAAa,UAAQ;IACrB,gBAAgB,UAAQ;IAExB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,cAAc,CAAC,EAAE,MAAM,GAAG,KAAK,CAAA;IAC/B,iBAAiB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;gBAEb,IAAI,EAAE,UAAU,EAAU,EAAE,EAAE,iBAAiB;IAEnE,cAAc;IAUd,gBAAgB;IAUhB,mBAAmB,CAAC,aAAa,EAAE,OAAO;IAO1C,eAAe,CAAC,KAAK,EAAE,IAAI,EAAE;IAS7B,eAAe,CAAC,KAAK,EAAE,KAAK;IAQ5B,eAAe;IAKf,eAAe,CAAC,KAAK,EAAE,KAAK;IAKtB,WAAW;IAgCjB,wBAAwB;IAQxB,YAAY;IAIZ,WAAW;IAWX,YAAY;IAIZ,kBAAkB;IAIlB,mBAAmB,CAAC,KAAK,EAAE,KAAK;IAKhC,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,aAAa;yCAvJV,mBAAmB;2CAAnB,mBAAmB;CA8J/B"}

package/libs/ui/inputs/src/lib/ui-inputs.module.d.ts

@@ -40,9 +40,10 @@ import * as i38 from "@angular/material/core";
 import * as i39 from "./editable-label/editable-label.directive";
 import * as i40 from "./text-area/text-area.component";
 import * as i41 from "./button/button.component";
+import * as i42 from "./image-input/image-input.component";
 export declare class UiInputsModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<UiInputsModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<UiInputsModule, [typeof i1.DropdownSelectorComponent, typeof i2.AutocompleteComponent, typeof i3.TextInputComponent, typeof i4.DragAndDropFileInputComponent, typeof i5.ChipsInputComponent, typeof i6.NavigationButtonComponent, typeof i7.StarToggleComponent, typeof i8.DropdownMultiselectComponent, typeof i9.ViewportIntersectorComponent, typeof i10.FormFieldComponent, typeof i11.FormFieldSimpleComponent, typeof i12.FormFieldArrayComponent, typeof i13.FormFieldObjectComponent, typeof i14.FormFieldRichComponent, typeof i15.FormFieldFileComponent, typeof i16.FormFieldSpatialExtentComponent, typeof i17.FormFieldTemporalExtentComponent, typeof i18.CheckToggleComponent, typeof i19.CopyTextButtonComponent, typeof i20.CheckboxComponent, typeof i21.SearchInputComponent, typeof i22.DateRangePickerComponent], [typeof i23.CommonModule, typeof i24.TranslateModule, typeof i25.NgxDropzoneModule, typeof i26.FormsModule, typeof i26.ReactiveFormsModule, typeof i27.TagInputModule, typeof i28.UtilSharedModule, typeof i29.MatAutocompleteModule, typeof i30.MatIconModule, typeof i31.UiWidgetsModule, typeof i32.OverlayModule, typeof i33.MatCheckboxModule, typeof i34.MatTooltipModule, typeof i35.MatFormFieldModule, typeof i36.MatInputModule, typeof i37.MatDatepickerModule, typeof i38.MatNativeDateModule, typeof i39.EditableLabelDirective, typeof i40.TextAreaComponent, typeof i41.ButtonComponent], [typeof i1.DropdownSelectorComponent, typeof i2.AutocompleteComponent, typeof i41.ButtonComponent, typeof i3.TextInputComponent, typeof i4.DragAndDropFileInputComponent, typeof i40.TextAreaComponent, typeof i5.ChipsInputComponent, typeof i6.NavigationButtonComponent, typeof i7.StarToggleComponent, typeof i8.DropdownMultiselectComponent, typeof i9.ViewportIntersectorComponent, typeof i10.FormFieldComponent, typeof i18.CheckToggleComponent, typeof i19.CopyTextButtonComponent, typeof i20.CheckboxComponent, typeof i21.SearchInputComponent, typeof i22.DateRangePickerComponent, typeof i39.EditableLabelDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<UiInputsModule, [typeof i1.DropdownSelectorComponent, typeof i2.AutocompleteComponent, typeof i3.TextInputComponent, typeof i4.DragAndDropFileInputComponent, typeof i5.ChipsInputComponent, typeof i6.NavigationButtonComponent, typeof i7.StarToggleComponent, typeof i8.DropdownMultiselectComponent, typeof i9.ViewportIntersectorComponent, typeof i10.FormFieldComponent, typeof i11.FormFieldSimpleComponent, typeof i12.FormFieldArrayComponent, typeof i13.FormFieldObjectComponent, typeof i14.FormFieldRichComponent, typeof i15.FormFieldFileComponent, typeof i16.FormFieldSpatialExtentComponent, typeof i17.FormFieldTemporalExtentComponent, typeof i18.CheckToggleComponent, typeof i19.CopyTextButtonComponent, typeof i20.CheckboxComponent, typeof i21.SearchInputComponent, typeof i22.DateRangePickerComponent], [typeof i23.CommonModule, typeof i24.TranslateModule, typeof i25.NgxDropzoneModule, typeof i26.FormsModule, typeof i26.ReactiveFormsModule, typeof i27.TagInputModule, typeof i28.UtilSharedModule, typeof i29.MatAutocompleteModule, typeof i30.MatIconModule, typeof i31.UiWidgetsModule, typeof i32.OverlayModule, typeof i33.MatCheckboxModule, typeof i34.MatTooltipModule, typeof i35.MatFormFieldModule, typeof i36.MatInputModule, typeof i37.MatDatepickerModule, typeof i38.MatNativeDateModule, typeof i39.EditableLabelDirective, typeof i40.TextAreaComponent, typeof i41.ButtonComponent, typeof i42.ImageInputComponent], [typeof i1.DropdownSelectorComponent, typeof i2.AutocompleteComponent, typeof i41.ButtonComponent, typeof i3.TextInputComponent, typeof i4.DragAndDropFileInputComponent, typeof i40.TextAreaComponent, typeof i5.ChipsInputComponent, typeof i6.NavigationButtonComponent, typeof i7.StarToggleComponent, typeof i8.DropdownMultiselectComponent, typeof i9.ViewportIntersectorComponent, typeof i10.FormFieldComponent, typeof i18.CheckToggleComponent, typeof i19.CopyTextButtonComponent, typeof i20.CheckboxComponent, typeof i21.SearchInputComponent, typeof i22.DateRangePickerComponent, typeof i39.EditableLabelDirective, typeof i42.ImageInputComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<UiInputsModule>;
 }
 //# sourceMappingURL=ui-inputs.module.d.ts.map

package/libs/ui/inputs/src/lib/ui-inputs.module.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ui-inputs.module.d.ts","sourceRoot":"","sources":["../../../../../src/libs/ui/inputs/src/lib/ui-inputs.module.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CA,qBAoEa,cAAc;yCAAd,cAAc;0CAAd,cAAc;0CAAd,cAAc;CAAG"}
+{"version":3,"file":"ui-inputs.module.d.ts","sourceRoot":"","sources":["../../../../../src/libs/ui/inputs/src/lib/ui-inputs.module.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA,qBAsEa,cAAc;yCAAd,cAAc;0CAAd,cAAc;0CAAd,cAAc;CAAG"}

package/libs/util/shared/src/lib/utils/bytes-convert.d.ts

@@ -0,0 +1,2 @@
+export declare function megabytesToBytes(megabytes: any): number;
+//# sourceMappingURL=bytes-convert.d.ts.map

package/libs/util/shared/src/lib/utils/bytes-convert.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bytes-convert.d.ts","sourceRoot":"","sources":["../../../../../../src/libs/util/shared/src/lib/utils/bytes-convert.ts"],"names":[],"mappings":"AAAA,wBAAgB,gBAAgB,CAAC,SAAS,KAAA,UAEzC"}

package/libs/util/shared/src/lib/utils/image-resize.d.ts

@@ -0,0 +1,3 @@
+export declare function downsizeImage(blob: Blob, maxWidth: number, maxHeight: number): Promise<Blob>;
+export declare function downgradeImage(blob: Blob, maxSizeBytes: number): Promise<Blob>;
+//# sourceMappingURL=image-resize.d.ts.map

package/libs/util/shared/src/lib/utils/image-resize.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-resize.d.ts","sourceRoot":"","sources":["../../../../../../src/libs/util/shared/src/lib/utils/image-resize.ts"],"names":[],"mappings":"AAAA,wBAAgB,aAAa,CAC3B,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,MAAM,EAChB,SAAS,EAAE,MAAM,GAChB,OAAO,CAAC,IAAI,CAAC,CA6Bf;AAED,wBAAgB,cAAc,CAC5B,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,MAAM,GACnB,OAAO,CAAC,IAAI,CAAC,CAiCf"}

package/libs/util/shared/src/lib/utils/index.d.ts

@@ -1,10 +1,12 @@
+export * from './bytes-convert';
+export * from './event';
+export * from './fuzzy-filter';
+export * from './geojson';
+export * from './image-resize';
 export * from './parse';
-export * from './strip-html';
 export * from './remove-whitespace';
-export * from './geojson';
 export * from './sort-by';
-export * from './url';
-export * from './event';
-export * from './fuzzy-filter';
+export * from './strip-html';
 export * from './temporal-extent-union';
+export * from './url';
 //# sourceMappingURL=index.d.ts.map

package/libs/util/shared/src/lib/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/libs/util/shared/src/lib/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA;AACvB,cAAc,cAAc,CAAA;AAC5B,cAAc,qBAAqB,CAAA;AACnC,cAAc,WAAW,CAAA;AACzB,cAAc,WAAW,CAAA;AACzB,cAAc,OAAO,CAAA;AACrB,cAAc,SAAS,CAAA;AACvB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,yBAAyB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/libs/util/shared/src/lib/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA;AAC/B,cAAc,SAAS,CAAA;AACvB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,WAAW,CAAA;AACzB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,SAAS,CAAA;AACvB,cAAc,qBAAqB,CAAA;AACnC,cAAc,WAAW,CAAA;AACzB,cAAc,cAAc,CAAA;AAC5B,cAAc,yBAAyB,CAAA;AACvC,cAAc,OAAO,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "geonetwork-ui",
-  "version": "2.3.0-dev.3d65a13b",
+  "version": "2.3.0-dev.c3722986",
   "engines": {
     "node": ">=14.17.0"
   },

package/src/libs/data-access/gn4/src/openapi/api/records.api.service.ts

@@ -30,7 +30,6 @@ import {
 import { ExtentDtoApiModel } from '../model/models'
 import { FeatureResponseApiModel } from '../model/models'
 import { IProcessingReportApiModel } from '../model/models'
-import { InlineObject3ApiModel } from '../model/models'
 import { MetadataBatchApproveParameterApiModel } from '../model/models'
 import { MetadataBatchSubmitParameterApiModel } from '../model/models'
 import { MetadataCategoryApiModel } from '../model/models'
@@ -75,6 +74,20 @@ export class RecordsApiService {
     this.encoder = this.configuration.encoder || new CustomHttpParameterCodec()
   }
 
+  /**
+   * @param consumes string[] mime-types
+   * @return true: consumes contains 'multipart/form-data', false: otherwise
+   */
+  private canConsumeForm(consumes: string[]): boolean {
+    const form = 'multipart/form-data'
+    for (const consume of consumes) {
+      if (form === consume) {
+        return true
+      }
+    }
+    return false
+  }
+
   private addToHttpParams(
     httpParams: HttpParams,
     value: any,
@@ -8290,44 +8303,44 @@ export class RecordsApiService {
   /**
    * Create a new resource for a given metadata
    * @param metadataUuid The metadata UUID
+   * @param file The file to upload
    * @param visibility The sharing policy
    * @param approved Use approved version or not
-   * @param inlineObject3ApiModel
    * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
    * @param reportProgress flag to report request and response progress.
    */
   public putResource(
     metadataUuid: string,
+    file: Blob,
     visibility?: 'public' | 'private',
     approved?: boolean,
-    inlineObject3ApiModel?: InlineObject3ApiModel,
     observe?: 'body',
     reportProgress?: boolean,
     options?: { httpHeaderAccept?: 'application/json' }
   ): Observable<MetadataResourceApiModel>
   public putResource(
     metadataUuid: string,
+    file: Blob,
     visibility?: 'public' | 'private',
     approved?: boolean,
-    inlineObject3ApiModel?: InlineObject3ApiModel,
     observe?: 'response',
     reportProgress?: boolean,
     options?: { httpHeaderAccept?: 'application/json' }
   ): Observable<HttpResponse<MetadataResourceApiModel>>
   public putResource(
     metadataUuid: string,
+    file: Blob,
     visibility?: 'public' | 'private',
     approved?: boolean,
-    inlineObject3ApiModel?: InlineObject3ApiModel,
     observe?: 'events',
     reportProgress?: boolean,
     options?: { httpHeaderAccept?: 'application/json' }
   ): Observable<HttpEvent<MetadataResourceApiModel>>
   public putResource(
     metadataUuid: string,
+    file: Blob,
     visibility?: 'public' | 'private',
     approved?: boolean,
-    inlineObject3ApiModel?: InlineObject3ApiModel,
     observe: any = 'body',
     reportProgress: boolean = false,
     options?: { httpHeaderAccept?: 'application/json' }
@@ -8337,6 +8350,11 @@ export class RecordsApiService {
         'Required parameter metadataUuid was null or undefined when calling putResource.'
       )
     }
+    if (file === null || file === undefined) {
+      throw new Error(
+        'Required parameter file was null or undefined when calling putResource.'
+      )
+    }
 
     let queryParameters = new HttpParams({ encoder: this.encoder })
     if (visibility !== undefined && visibility !== null) {
@@ -8369,11 +8387,24 @@ export class RecordsApiService {
     }
 
     // to determine the Content-Type header
-    const consumes: string[] = ['application/json']
-    const httpContentTypeSelected: string | undefined =
-      this.configuration.selectHeaderContentType(consumes)
-    if (httpContentTypeSelected !== undefined) {
-      headers = headers.set('Content-Type', httpContentTypeSelected)
+    const consumes: string[] = ['multipart/form-data']
+
+    const canConsumeForm = this.canConsumeForm(consumes)
+
+    let formParams: { append(param: string, value: any): any }
+    let useForm = false
+    let convertFormParamsToString = false
+    // use FormData to transmit files using content-type "multipart/form-data"
+    // see https://stackoverflow.com/questions/4007969/application-x-www-form-urlencoded-or-multipart-form-data
+    useForm = canConsumeForm
+    if (useForm) {
+      formParams = new FormData()
+    } else {
+      formParams = new HttpParams({ encoder: this.encoder })
+    }
+
+    if (file !== undefined) {
+      formParams = (formParams.append('file', <any>file) as any) || formParams
     }
 
     let responseType_: 'text' | 'json' = 'json'
@@ -8388,7 +8419,7 @@ export class RecordsApiService {
       `${this.configuration.basePath}/records/${encodeURIComponent(
         String(metadataUuid)
       )}/attachments`,
-      inlineObject3ApiModel,
+      convertFormParamsToString ? formParams.toString() : formParams,
       {
         params: queryParameters,
         responseType: <any>responseType_,

package/src/libs/data-access/gn4/src/openapi/model/models.ts

@@ -33,7 +33,6 @@ export * from './iProcessingReport.api.model'
 export * from './iSODate.api.model'
 export * from './infoReport.api.model'
 export * from './inlineObject1.api.model'
-export * from './inlineObject3.api.model'
 export * from './inlineObject4.api.model'
 export * from './isoLanguage.api.model'
 export * from './jSONObject.api.model'

package/src/libs/data-access/gn4/src/spec.yaml

@@ -7390,7 +7390,7 @@ paths:
           example: true
       requestBody:
         content:
-          application/json:
+          multipart/form-data:
             schema:
               required:
                 - file

package/src/libs/feature/editor/src/lib/components/overview-upload/overview-upload.component.html

@@ -0,0 +1,8 @@
+<gn-ui-image-input
+  [maxSizeMB]="5"
+  [previewUrl]="resourceUrl"
+  [altText]="resourceFileName"
+  (fileChange)="handleFileChange($event)"
+  (urlChange)="handleUrlChange($event)"
+  (delete)="handleDelete()"
+></gn-ui-image-input>

package/src/libs/feature/editor/src/lib/components/overview-upload/overview-upload.component.ts

@@ -0,0 +1,70 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  Input,
+  OnInit,
+} from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { RecordsApiService } from '../../../../../../../libs/data-access/gn4/src'
+import { UiInputsModule } from '../../../../../../../libs/ui/inputs/src'
+
+@Component({
+  selector: 'gn-ui-overview-upload',
+  standalone: true,
+  imports: [CommonModule, UiInputsModule],
+  templateUrl: './overview-upload.component.html',
+  styleUrls: ['./overview-upload.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class OverviewUploadComponent implements OnInit {
+  @Input() metadataUuid: string
+
+  resourceFileName: string
+  resourceUrl: string
+
+  constructor(
+    private recordsApiService: RecordsApiService,
+    private cd: ChangeDetectorRef
+  ) {}
+
+  ngOnInit(): void {
+    this.recordsApiService
+      .getAllResources(this.metadataUuid)
+      .subscribe((resources) => {
+        this.resourceFileName = resources[0]?.filename
+        this.resourceUrl = resources[0]?.url
+        this.cd.markForCheck()
+      })
+  }
+
+  handleFileChange(file: File) {
+    this.recordsApiService
+      .putResource(this.metadataUuid, file, 'public')
+      .subscribe((resource) => {
+        this.resourceFileName = resource.filename
+        this.resourceUrl = resource.url
+        this.cd.markForCheck()
+      })
+  }
+
+  handleUrlChange(url: string) {
+    this.recordsApiService
+      .putResourceFromURL(this.metadataUuid, url, 'public')
+      .subscribe((resource) => {
+        this.resourceFileName = resource.filename
+        this.resourceUrl = resource.url
+        this.cd.markForCheck()
+      })
+  }
+
+  handleDelete() {
+    this.recordsApiService
+      .delResource(this.metadataUuid, this.resourceFileName)
+      .subscribe(() => {
+        this.resourceFileName = null
+        this.resourceUrl = null
+        this.cd.markForCheck()
+      })
+  }
+}

package/src/libs/ui/elements/src/lib/thumbnail/thumbnail.component.ts

@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common'
 import {
   ChangeDetectionStrategy,
   Component,
@@ -18,20 +19,21 @@ export const THUMBNAIL_PLACEHOLDER = new InjectionToken<string>(
   'thumbnail-placeholder'
 )
 
+type FitOptions = 'cover' | 'contain' | 'scale-down'
 type ThumbnailImageObject = {
   url: string
-  fit?: 'cover' | 'contain' | 'scale-down'
+  fit?: FitOptions
 }
 
 const DEFAULT_PLACEHOLDER =
   'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA3XAAAN1wFCKJt4AAAAB3RJTUUH5gkNDCUFYjA1nwAAA1pJREFUeNrtnW2TmjAURh8CLlTdrmun///3tZ22+zLuYlehH7jsMGogwRiiec4MM44K6D3x3hAwAIQQQgghhJDYSM5cPwNQAMgBpACUg22GTg2gArAD8A9AKY+9CsgALAF8YRsGALwDeAWw9yGgALCKoKWP+WU8iwxjUsudLBj83sZciIiPSwhoWz7pJ5dUZFQXlEXOZ/DNeTBt3JnhBpc9aacGsOn0BuoIUk3b+5trGnEC4B7Ak4sUlInRU+wB/JbgVxG18KrTBc01EmYmcTFJQUVPy/9zTh/4BthLDOqeenB2DdBtZBN58LsSNpcUoEtTJWM/GIvMhQDde9j6h2OhXAjo6/2Q/lgkLgSQC0IBFEABZEKyiaQv5AAv7fSlS+lPVxRwOXTnEtoTPAs04yfRHGMoz8F/HOiaJfKeggLc78dmOHsVS33y9SUXsDuLlsg6FOAw/fhYhwI0pJ7WoQASpoC9p3UoQEPpaR0K0LCB3fB1e6KfAhxRweAKgQ5PsQxJ+CzCJYC/A7+EWt4TzVCE77GgEsBPHA/G7QBswcE4b+noVRZ2QxkCCqAAQgEUQCiAAggFUAChAAogFEABhAJcfT9FAdOxQuB/ML9lAfdo/qWYy2MK8EiO5mrrliUCvdIudAEzWWzQzWuxwjRnAK9WwAzAWhZTCe3l7cryNQrQBL/txZhKGGrlwc36ogIPfvdzfhuQsDDM80EVZXUFwe+mEJ2EOwBfLfYTTFFWVxL8Qwl3nedSye1jjhEyCjAPflfCWiScU1iDKMrqyoJ/KOFxRDf1sCg/xCxgTPC7EnIHn6GYsiirKw2+ayYryorBn7YoKwb/qCgntywg1OBPdqSsGPyTRXnp07gvPgD8AAl6KIICCAVQAAlLwOg5MSNi9NyqJgKqAHpQoZNZxs5KgG7SDN7AZzgWOxcCtprn5/wVfLb+uWXsrASUPXlvHbmETGKQjBVgMitVJTuaaQS2t/GoEMeE3onEor2jlK4RvwN4G1u9T4n6zp6PMTWAXzCYdCq12OCOhdeYZzT3mIErAW1Fr+HmNOAt82KSesYIAJoRzR2aIVumo+Ms8WwT/HOOZlM0Y+Zzxv2zp/gCTzfzPOyGtdfgp7LEcDvbvSxbWXg/HUIIIYQQQogx/wHLoX7NoCMFPwAAAABJRU5ErkJggg=='
 
-type FitOptions = 'cover' | 'contain' | 'scale-down'
-
 @Component({
   selector: 'gn-ui-thumbnail',
   templateUrl: './thumbnail.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule],
 })
 export class ThumbnailComponent implements OnInit, OnChanges {
   @Input() thumbnailUrl: string | string[]

package/src/libs/ui/elements/src/lib/ui-elements.module.ts

@@ -46,6 +46,7 @@ import { ImageOverlayPreviewComponent } from './image-overlay-preview/image-over
     FormsModule,
     NgOptimizedImage,
     MarkdownParserComponent,
+    ThumbnailComponent,
   ],
   declarations: [
     MetadataInfoComponent,
@@ -61,7 +62,6 @@ import { ImageOverlayPreviewComponent } from './image-overlay-preview/image-over
     MetadataQualityItemComponent,
     SearchResultsErrorComponent,
     PaginationComponent,
-    ThumbnailComponent,
     AvatarComponent,
     UserPreviewComponent,
     GnUiLinkifyDirective,

package/src/libs/ui/inputs/src/lib/button/button.component.ts

@@ -15,7 +15,7 @@ import { propagateToDocumentOnly } from '../../../../../../libs/util/shared/src'
   standalone: true,
 })
 export class ButtonComponent {
-  private btnClass: string
+  private btnClass = 'gn-ui-btn-default'
 
   @Input() set type(
     value: 'primary' | 'secondary' | 'default' | 'outline' | 'light'

package/src/libs/ui/inputs/src/lib/files-drop/files-drop.directive.ts

@@ -0,0 +1,45 @@
+import { Directive, HostListener, Output, EventEmitter } from '@angular/core'
+
+@Directive({
+  selector: '[gnUiFilesDrop]',
+  standalone: true,
+})
+export class FilesDropDirective {
+  @Output() dragFilesOver: EventEmitter<boolean> = new EventEmitter()
+  @Output() dropFiles: EventEmitter<File[]> = new EventEmitter()
+
+  dragEnterCounter = 0
+
+  @HostListener('dragenter', ['$event'])
+  _onDragEnter(event: DragEvent) {
+    event.preventDefault()
+    this.dragEnterCounter++
+    this.dragFilesOver.emit(true)
+  }
+
+  @HostListener('dragover', ['$event'])
+  _onDragOver(event: DragEvent) {
+    event.preventDefault()
+  }
+
+  @HostListener('dragleave', ['$event'])
+  _onDragLeave(event: DragEvent) {
+    event.preventDefault()
+    this.dragEnterCounter = Math.max(0, this.dragEnterCounter - 1)
+    if (this.dragEnterCounter === 0) {
+      this.dragFilesOver.emit(false)
+    }
+  }
+
+  @HostListener('drop', ['$event'])
+  _onDrop(event: DragEvent) {
+    event.preventDefault()
+    this.dragEnterCounter = 0
+    this.dragFilesOver.emit(false)
+
+    const files = Array.from(event.dataTransfer.files)
+    if (files.length > 0) {
+      this.dropFiles.emit(files)
+    }
+  }
+}

package/src/libs/ui/inputs/src/lib/image-input/image-input.component.html

@@ -0,0 +1,146 @@
+<ng-container *ngIf="previewUrl; then withImage; else withoutImage">
+</ng-container>
+
+<ng-template #withImage>
+  <div class="w-full h-full flex flex-col gap-2">
+    <div class="flex-1 group relative">
+      <img
+        class="w-full h-full object-cover border-2 border-gray-300 rounded-lg"
+        [alt]="altText"
+        loading="lazy"
+        [src]="previewUrl"
+      />
+      <gn-ui-button
+        [extraClass]="
+          'bg-gray-200 absolute right-2 bottom-2 invisible group-hover:visible'
+        "
+        (buttonClick)="handleDelete()"
+      >
+        <mat-icon class="material-symbols-outlined">delete</mat-icon>
+      </gn-ui-button>
+    </div>
+    <input
+      *ngIf="showAltTextInput"
+      type="text"
+      class="py-3 px-2 border-2 border-gray-300 rounded-lg text-sm font-medium"
+      [placeholder]="'input.image.altTextPlaceholder' | translate"
+      [value]="altText"
+      (change)="handleAltTextChange($event)"
+    />
+    <div class="flex flex-row gap-2">
+      <gn-ui-button
+        [extraClass]="'bg-gray-200 font-bold'"
+        (buttonClick)="handleDelete()"
+      >
+        <mat-icon class="material-symbols-outlined me-1">delete</mat-icon>
+        {{ 'input.image.delete' | translate }}
+      </gn-ui-button>
+      <gn-ui-button
+        *ngIf="!showAltTextInput"
+        [extraClass]="'bg-gray-200 font-bold'"
+        (buttonClick)="toggleAltTextInput()"
+      >
+        <mat-icon class="material-symbols-outlined me-1">add</mat-icon>
+        {{ 'input.image.displayAltTextInput' | translate }}
+      </gn-ui-button>
+    </div>
+  </div>
+</ng-template>
+
+<ng-template #withoutImage>
+  <div class="w-full h-full flex flex-col gap-2">
+    <label
+      gnUiFilesDrop
+      class="block flex-1 border-2 border-dashed border-gray-300 rounded-lg p-6 flex flex-col items-center justify-center gap-4"
+      (dragFilesOver)="handleDragFilesOver($event)"
+      (dropFiles)="handleDropFiles($event)"
+    >
+      <div class="w-14 h-14 rounded-md bg-gray-200 grid">
+        <mat-icon
+          *ngIf="!dragFilesOver && !uploadProgress && !uploadError"
+          class="material-symbols-outlined place-self-center text-blue-500"
+          >image</mat-icon
+        >
+        <mat-icon
+          *ngIf="dragFilesOver && !uploadProgress && !uploadError"
+          class="material-symbols-outlined place-self-center text-blue-500"
+          >add_box</mat-icon
+        >
+        <div *ngIf="uploadProgress">
+          <mat-progress-spinner
+            class="place-self-center"
+            [diameter]="56"
+            [mode]="'determinate'"
+            [value]="uploadProgress"
+          ></mat-progress-spinner>
+          <span
+            class="text-sm font-medium relative inline-block width-[30px] bottom-[40px] left-[15px]"
+          >
+            {{ uploadProgress }}%
+          </span>
+        </div>
+        <mat-icon
+          *ngIf="uploadError"
+          class="material-symbols-outlined place-self-center text-rose-500"
+          >broken_image</mat-icon
+        >
+      </div>
+      <div class="flex flex-col items-center gap-1">
+        <p class="font-medium">{{ getPrimaryText() | translate }}</p>
+        <p
+          class="text-sm"
+          [class]="
+            uploadProgress || uploadError
+              ? 'font-bold text-blue-500 cursor-pointer'
+              : 'font-medium text-gray-500'
+          "
+          (click)="handleSecondaryTextClick()"
+        >
+          {{ getSecondaryText() | translate }}
+        </p>
+      </div>
+      <input
+        type="file"
+        class="hidden"
+        (change)="handleFileInput($event)"
+        [disabled]="showUrlInput || uploadProgress || uploadError"
+      />
+    </label>
+    <div *ngIf="!showUrlInput" class="flex-none">
+      <gn-ui-button
+        [extraClass]="'bg-gray-200 font-bold'"
+        (buttonClick)="displayUrlInput()"
+      >
+        <mat-icon class="material-symbols-outlined me-1">link</mat-icon>
+        {{ 'input.image.displayUrlInput' | translate }}
+      </gn-ui-button>
+    </div>
+    <div *ngIf="showUrlInput" class="flex-none flex flex-col gap-2">
+      <div class="h-2"></div>
+      <div class="flex gap-2 items-center">
+        <div class="flex-1 flex rounded-lg">
+          <span
+            class="material-symbols-outlined px-4 inline-flex items-center min-w-fit rounded-s-lg border-2 border-e-0 border-gray-300"
+            >link</span
+          >
+          <input
+            type="text"
+            class="py-3 ps-1 block w-full border-2 border-s-0 border-e-0 border-gray-300 text-sm font-medium"
+            placeholder="https://exemple.com/image.jpg"
+            (change)="handleUrlChange($event)"
+          />
+          <gn-ui-button
+            class="px-1 inline-flex items-center min-w-fit rounded-e-lg border-2 border-s-0 border-gray-300 text-white"
+            [extraClass]="
+              urlInputValue && !downloadError ? 'bg-blue-500' : 'bg-gray-500'
+            "
+            [disabled]="!urlInputValue || downloadError"
+            (buttonClick)="downloadUrl()"
+          >
+            <mat-icon class="material-symbols-outlined">arrow_upward</mat-icon>
+          </gn-ui-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</ng-template>