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-form-import-url/dot-form-import-url.component.ts

@@ -17,6 +17,11 @@ import { DotMessagePipe, DotFieldValidationMessageComponent, DotValidators } fro
 
 import { FormImportUrlStore } from './store/form-import-url.store';
 
+type DialogData = {
+    inputType: INPUT_TYPES;
+    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,7 +86,7 @@ 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',

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_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_TYPES;
+};
+
 @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 === '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.ts

@@ -1,5 +1,12 @@
 import { tapResponse } from '@ngrx/operators';
-import { patchState, signalStore, withComputed, withMethods, withState } from '@ngrx/signals';
+import {
+    patchState,
+    signalStore,
+    withComputed,
+    withMethods,
+    withState,
+    withHooks
+} from '@ngrx/signals';
 import { rxMethod } from '@ngrx/signals/rxjs-interop';
 import { pipe } from 'rxjs';
 
@@ -37,10 +44,10 @@ export interface SelectExisingFileState {
         status: ComponentStatus;
         error: string | null;
     };
-    currentSite: TreeNodeItem | null;
     selectedContent: DotCMSContentlet | null;
     searchQuery: string;
     viewMode: 'list' | 'grid';
+    mimeTypes: string[];
 }
 
 const initialState: SelectExisingFileState = {
@@ -54,10 +61,10 @@ const initialState: SelectExisingFileState = {
         status: ComponentStatus.INIT,
         error: null
     },
-    currentSite: null,
     selectedContent: null,
     searchQuery: '',
-    viewMode: 'list'
+    viewMode: 'list',
+    mimeTypes: []
 };
 
 export const SelectExisingFileStore = signalStore(
@@ -70,6 +77,11 @@ export const SelectExisingFileStore = signalStore(
         const dotEditContentService = inject(DotEditContentService);
 
         return {
+            setMimeTypes: (mimeTypes: string[]) => {
+                patchState(store, {
+                    mimeTypes
+                });
+            },
             setSelectedContent: (selectedContent: DotCMSContentlet) => {
                 patchState(store, {
                     selectedContent
@@ -99,27 +111,32 @@ export const SelectExisingFileStore = signalStore(
                         return hasIdentifier;
                     }),
                     switchMap((identifier) => {
-                        return dotEditContentService.getContentByFolder(identifier).pipe(
-                            tapResponse({
-                                next: (data) => {
-                                    patchState(store, {
-                                        content: {
-                                            data,
-                                            status: ComponentStatus.LOADED,
-                                            error: null
-                                        }
-                                    });
-                                },
-                                error: () =>
-                                    patchState(store, {
-                                        content: {
-                                            data: [],
-                                            status: ComponentStatus.ERROR,
-                                            error: 'dot.file.field.dialog.select.existing.file.table.error.content'
-                                        }
-                                    })
+                        return dotEditContentService
+                            .getContentByFolder({
+                                folderId: identifier,
+                                mimeTypes: store.mimeTypes()
                             })
-                        );
+                            .pipe(
+                                tapResponse({
+                                    next: (data) => {
+                                        patchState(store, {
+                                            content: {
+                                                data,
+                                                status: ComponentStatus.LOADED,
+                                                error: null
+                                            }
+                                        });
+                                    },
+                                    error: () =>
+                                        patchState(store, {
+                                            content: {
+                                                data: [],
+                                                status: ComponentStatus.ERROR,
+                                                error: 'dot.file.field.dialog.select.existing.file.table.error.content'
+                                            }
+                                        })
+                                })
+                            );
                     })
                 )
             ),
@@ -186,5 +203,11 @@ export const SelectExisingFileStore = signalStore(
                 )
             )
         };
-    })
+    }),
+    withHooks((store) => ({
+        onInit: () => {
+            store.loadFolders();
+            store.loadContent();
+        }
+    }))
 );

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

@@ -406,7 +406,10 @@ export class DotEditContentFileFieldComponent implements ControlValueAccessor, O
             modal: true,
             width: '90%',
             style: { 'max-width': '1040px' },
-            data: {}
+            data: {
+                inputType: this.$field().fieldType,
+                acceptedFiles: this.store.acceptedFiles()
+            }
         });
 
         this.#dialogRef.onClose

core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/dot-edit-content-file-field.const.ts

@@ -37,3 +37,10 @@ export const INPUT_CONFIG: ConfigActions = {
         maxFileSize: null
     }
 };
+
+export const DEFAULT_CONTENT_TYPE = 'asset';
+
+export const CONTENT_TYPES = {
+    DotAsset: 'asset',
+    FileAsset: 'fileAsset'
+};