chore(edit-content): For Image Field only image files should be displayed.

core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.html

@@ -1,24 +1,23 @@
-@let previewFile = $previewFile();
-@let metadata = $metadata();
-@let downloadLink = $downloadLink();
+@let fileInfo = $fileInfo();
+@let metadata = fileInfo.metadata;
 
 <div class="preview-container" [class.preview-container--fade]="metadata?.editableAsText">
     @if (metadata?.editableAsText) {
         <div class="preview-code_container" data-testId="code-preview">
-            <code>{{ $content() }}</code>
+            <code>{{ fileInfo.content }}</code>
         </div>
     } @else {
         <div class="preview-image__container">
-            @if (previewFile.source === 'temp') {
+            @if (fileInfo.source === 'temp') {
                 <dot-temp-file-thumbnail
-                    [tempFile]="previewFile.file"
+                    [tempFile]="fileInfo.file"
                     [iconSize]="'48px'"
                     data-testId="temp-file-thumbnail" />
             } @else {
                 <dot-contentlet-thumbnail
-                    fieldVariable="asset"
+                    [fieldVariable]="fileInfo.contentType"
                     [iconSize]="'48px'"
-                    [contentlet]="previewFile.file"
+                    [contentlet]="fileInfo.file"
                     [playableVideo]="true"
                     data-testId="contentlet-thumbnail" />
             }
@@ -56,12 +55,12 @@
             data-testId="info-btn"
             icon="pi pi-info" />
 
-        @if (downloadLink) {
+        @if (fileInfo.downloadLink) {
             <p-button
                 styleClass="p-button-rounded p-button-sm p-button-outlined"
                 data-testId="download-btn"
                 icon="pi pi-download"
-                (click)="downloadAsset(downloadLink)" />
+                (click)="downloadAsset(fileInfo.downloadLink)" />
         }
     </div>
     <div class="preview-metadata__actions">
@@ -79,12 +78,12 @@
             styleClass="p-button-rounded"
             data-testId="info-btn-responsive"
             icon="pi pi-info" />
-        @if (downloadLink) {
+        @if (fileInfo.downloadLink) {
             <p-button
                 styleClass="p-button-rounded"
                 data-testId="download-btn-responsive"
                 icon="pi pi-download"
-                (click)="downloadAsset(downloadLink)" />
+                (click)="downloadAsset(fileInfo.downloadLink)" />
         }
         <p-button
             (click)="removeFile.emit()"

core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.ts

@@ -18,7 +18,11 @@ import { DialogModule } from 'primeng/dialog';
 import { catchError } from 'rxjs/operators';
 
 import { DotResourceLinksService } from '@dotcms/data-access';
-import { DotCMSBaseTypesContentTypes, DotCMSContentlet } from '@dotcms/dotcms-models';
+import {
+    DotCMSBaseTypesContentTypes,
+    DotCMSContentlet,
+    DotFileMetadata
+} from '@dotcms/dotcms-models';
 import {
     DotPreviewResourceLink,
     UploadedFile
@@ -30,8 +34,16 @@ import {
     DotCopyButtonComponent
 } from '@dotcms/ui';
 
+import { CONTENT_TYPES, DEFAULT_CONTENT_TYPE } from '../../dot-edit-content-file-field.const';
 import { getFileMetadata } from '../../utils';
 
+type FileInfo = UploadedFile & {
+    contentType: string;
+    downloadLink: string;
+    content: string | null;
+    metadata: DotFileMetadata;
+};
+
 @Component({
     selector: 'dot-file-field-preview',
     standalone: true,
@@ -70,45 +82,36 @@ export class DotFileFieldPreviewComponent implements OnInit {
      */
     $showDialog = signal(false);
     /**
-     * File metadata
+     * File info
      *
      * @memberof DotFileFieldPreviewComponent
      */
-    $metadata = computed(() => {
+    $fileInfo = computed<FileInfo>(() => {
         const previewFile = this.$previewFile();
-        if (previewFile.source === 'temp') {
-            return previewFile.file.metadata;
-        }
 
-        return getFileMetadata(previewFile.file);
-    });
-    /**
-     * Content
-     *
-     * @memberof DotFileFieldPreviewComponent
-     */
-    $content = computed(() => {
-        const previewFile = this.$previewFile();
-        if (previewFile.source === 'contentlet') {
-            return previewFile.file.content;
-        }
-
-        return null;
-    });
-    /**
-     * Download link
-     *
-     * @memberof DotFileFieldPreviewComponent
-     */
-    $downloadLink = computed(() => {
-        const previewFile = this.$previewFile();
         if (previewFile.source === 'contentlet') {
             const file = previewFile.file;
 
-            return `/contentAsset/raw-data/${file.inode}/asset?byInode=true&force_download=true`;
+            const contentType = CONTENT_TYPES[file.contentType] || DEFAULT_CONTENT_TYPE;
+
+            return {
+                source: previewFile.source,
+                file,
+                content: file.content,
+                contentType,
+                downloadLink: `/contentAsset/raw-data/${file.inode}/${contentType}?byInode=true&force_download=true`,
+                metadata: getFileMetadata(file)
+            };
         }
 
-        return null;
+        return {
+            source: previewFile.source,
+            file: previewFile.file,
+            content: null,
+            contentType: DEFAULT_CONTENT_TYPE,
+            downloadLink: null,
+            metadata: previewFile.file.metadata
+        };
     });
 
     /**
@@ -126,10 +129,10 @@ export class DotFileFieldPreviewComponent implements OnInit {
      * @memberof DotFileFieldPreviewComponent
      */
     ngOnInit() {
-        const previewFile = this.$previewFile();
+        const fileInfo = this.$fileInfo();
 
-        if (previewFile.source === 'contentlet') {
-            this.fetchResourceLinks(previewFile.file);
+        if (fileInfo.source === 'contentlet') {
+            this.fetchResourceLinks(fileInfo.file, fileInfo.contentType);
         }
     }
 
@@ -160,10 +163,10 @@ export class DotFileFieldPreviewComponent implements OnInit {
      * @param {DotCMSContentlet} contentlet The contentlet to fetch the resource links for.
      * @memberof DotFileFieldPreviewComponent
      */
-    private fetchResourceLinks(contentlet: DotCMSContentlet): void {
+    private fetchResourceLinks(contentlet: DotCMSContentlet, contentType: string): void {
         this.#dotResourceLinksService
             .getFileResourceLinks({
-                fieldVariable: 'asset',
+                fieldVariable: contentType,
                 inodeOrIdentifier: contentlet.identifier
             })
             .pipe(

core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-ui-message/dot-file-field-ui-message.component.html

@@ -4,8 +4,6 @@
     <i [ngClass]="uiMessage.icon" data-testId="ui-message-icon" class="icon"></i>
 </div>
 <div class="text">
-    <span
-        [innerHTML]="uiMessage.message | dm: uiMessage?.args"
-        data-testId="ui-message-span"></span>
+    <div [innerHTML]="uiMessage.message | dm: uiMessage?.args" data-testId="ui-message-span"></div>
     <ng-content></ng-content>
 </div>

core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-ui-message/dot-file-field-ui-message.component.spec.ts

@@ -1,5 +1,7 @@
 import { Spectator, byTestId, createComponentFactory } from '@ngneat/spectator/jest';
 
+import { CommonModule } from '@angular/common';
+
 import { DotMessageService } from '@dotcms/data-access';
 import { DotMessagePipe } from '@dotcms/ui';
 import { MockDotMessageService } from '@dotcms/utils-testing';
@@ -14,7 +16,7 @@ describe('DotFileFieldUiMessageComponent', () => {
     const createComponent = createComponentFactory({
         component: DotFileFieldUiMessageComponent,
         detectChanges: false,
-        imports: [DotMessagePipe],
+        imports: [DotMessagePipe, CommonModule],
         providers: [
             {
                 provide: DotMessageService,

core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-form-import-url/dot-form-import-url.component.ts

@@ -12,11 +12,16 @@ import { ButtonModule } from 'primeng/button';
 import { DynamicDialogRef, DynamicDialogConfig } from 'primeng/dynamicdialog';
 import { InputTextModule } from 'primeng/inputtext';
 
-import { INPUT_TYPES } from '@dotcms/edit-content/models/dot-edit-content-file.model';
+import { INPUT_TYPE, INPUT_TYPES } from '@dotcms/edit-content/models/dot-edit-content-file.model';
 import { DotMessagePipe, DotFieldValidationMessageComponent, DotValidators } from '@dotcms/ui';
 
 import { FormImportUrlStore } from './store/form-import-url.store';
 
+type DialogData = {
+    inputType: INPUT_TYPE;
+    acceptedFiles: string[];
+};
+
 @Component({
     selector: 'dot-form-import-url',
     standalone: true,
@@ -36,9 +41,7 @@ export class DotFormImportUrlComponent implements OnInit {
     readonly store = inject(FormImportUrlStore);
     readonly #formBuilder = inject(FormBuilder);
     readonly #dialogRef = inject(DynamicDialogRef);
-    readonly #dialogConfig = inject(
-        DynamicDialogConfig<{ inputType: INPUT_TYPES; acceptedFiles: string[] }>
-    );
+    readonly #dialogConfig = inject(DynamicDialogConfig<DialogData>);
     #abortController: AbortController | null = null;
 
     readonly form = this.#formBuilder.nonNullable.group({
@@ -83,10 +86,10 @@ export class DotFormImportUrlComponent implements OnInit {
      * If the input type is 'Binary', the upload type is set to 'temp', otherwise it's set to 'dotasset'.
      */
     ngOnInit(): void {
-        const data = this.#dialogConfig?.data;
+        const data = this.#dialogConfig?.data as DialogData;
 
         this.store.initSetup({
-            uploadType: data?.inputType === 'Binary' ? 'temp' : 'dotasset',
+            uploadType: data?.inputType === INPUT_TYPES.Binary ? 'temp' : 'dotasset',
             acceptedFiles: data?.acceptedFiles ?? []
         });
     }

core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-select-existing-file/dot-select-existing-file.component.ts

@@ -8,15 +8,20 @@ import {
 } from '@angular/core';
 
 import { ButtonModule } from 'primeng/button';
-import { DynamicDialogRef } from 'primeng/dynamicdialog';
+import { DynamicDialogRef, DynamicDialogConfig } from 'primeng/dynamicdialog';
 
 import { DotFileFieldUploadService } from '@dotcms/edit-content/fields/dot-edit-content-file-field/services/upload-file/upload-file.service';
+import { INPUT_TYPE, INPUT_TYPES } from '@dotcms/edit-content/models/dot-edit-content-file.model';
 import { DotMessagePipe } from '@dotcms/ui';
 
 import { DotDataViewComponent } from './components/dot-dataview/dot-dataview.component';
 import { DotSideBarComponent } from './components/dot-sidebar/dot-sidebar.component';
 import { SelectExisingFileStore } from './store/select-existing-file.store';
 
+type DialogData = {
+    inputType: INPUT_TYPE;
+};
+
 @Component({
     selector: 'dot-select-existing-file',
     standalone: true,
@@ -55,6 +60,8 @@ export class DotSelectExistingFileComponent implements OnInit {
      */
     $sideBarRef = viewChild.required(DotSideBarComponent);
 
+    readonly #dialogConfig = inject(DynamicDialogConfig<DialogData>);
+
     constructor() {
         effect(() => {
             const folders = this.store.folders();
@@ -66,8 +73,9 @@ export class DotSelectExistingFileComponent implements OnInit {
     }
 
     ngOnInit() {
-        this.store.loadFolders();
-        this.store.loadContent();
+        const data = this.#dialogConfig?.data as DialogData;
+        const inputType = data?.inputType === INPUT_TYPES.Image ? ['image'] : [];
+        this.store.setMimeTypes(inputType);
     }
 
     /**

core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-select-existing-file/store/select-existing-file.store.test.ts

@@ -13,15 +13,23 @@ import { TREE_SELECT_MOCK, TREE_SELECT_SITES_MOCK } from '../../../../../utils/m
 
 describe('SelectExisingFileStore', () => {
     let store: InstanceType<typeof SelectExisingFileStore>;
-    let service: SpyObject<DotEditContentService>;
+    let editContentService: SpyObject<DotEditContentService>;
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            providers: [SelectExisingFileStore, mockProvider(DotEditContentService)]
+            providers: [
+                SelectExisingFileStore,
+                mockProvider(DotEditContentService, {
+                    getSitesTreePath: jest.fn().mockReturnValue(of(TREE_SELECT_SITES_MOCK)),
+                    getContentByFolder: jest.fn().mockReturnValue(of([]))
+                })
+            ]
         });
 
         store = TestBed.inject(SelectExisingFileStore);
-        service = TestBed.inject(DotEditContentService) as SpyObject<DotEditContentService>;
+        editContentService = TestBed.inject(
+            DotEditContentService
+        ) as SpyObject<DotEditContentService>;
     });
 
     it('should be created', () => {
@@ -30,7 +38,7 @@ describe('SelectExisingFileStore', () => {
 
     describe('Method: loadFolders', () => {
         it('should set folders status to LOADING and then to LOADED with data', fakeAsync(() => {
-            service.getSitesTreePath.mockReturnValue(of(TREE_SELECT_SITES_MOCK));
+            editContentService.getSitesTreePath.mockReturnValue(of(TREE_SELECT_SITES_MOCK));
 
             store.loadFolders();
 
@@ -41,7 +49,7 @@ describe('SelectExisingFileStore', () => {
         }));
 
         it('should set folders status to ERROR on service error', fakeAsync(() => {
-            service.getSitesTreePath.mockReturnValue(throwError('error'));
+            editContentService.getSitesTreePath.mockReturnValue(throwError('error'));
 
             store.loadFolders();
 
@@ -56,7 +64,7 @@ describe('SelectExisingFileStore', () => {
         it('should load children for a node', fakeAsync(() => {
             const mockChildren = [...TREE_SELECT_SITES_MOCK];
 
-            service.getFoldersTreeNode.mockReturnValue(of(mockChildren));
+            editContentService.getFoldersTreeNode.mockReturnValue(of(mockChildren));
 
             const node = { ...TREE_SELECT_MOCK[0] };
 
@@ -76,7 +84,7 @@ describe('SelectExisingFileStore', () => {
         }));
 
         it('should handle error when loading children', fakeAsync(() => {
-            service.getFoldersTreeNode.mockReturnValue(throwError('error'));
+            editContentService.getFoldersTreeNode.mockReturnValue(throwError('error'));
 
             const node = { ...TREE_SELECT_MOCK[0], children: [] };