diff --git a/core-web/libs/data-access/src/lib/dot-upload-file/dot-upload-file.service.ts b/core-web/libs/data-access/src/lib/dot-upload-file/dot-upload-file.service.ts
index 59b962a07fc..42eeef06aab 100644
--- a/core-web/libs/data-access/src/lib/dot-upload-file/dot-upload-file.service.ts
+++ b/core-web/libs/data-access/src/lib/dot-upload-file/dot-upload-file.service.ts
@@ -89,4 +89,21 @@ export class DotUploadFileService {
             })
         );
     }
+
+    uploadDotAsset(file: File): Observable<DotCMSContentlet> {
+
+        const formData = new FormData();
+        formData.append('file', file);
+        formData.append('json', JSON.stringify({
+            contentlet: {
+                file: file.name,
+                contentType : 'dotAsset'
+            }
+        }));
+
+        return this.http.put<DotCMSContentlet>(`/api/v1/workflow/actions/default/fire/NEW`, formData)
+        .pipe(
+            pluck('entity')
+        );
+    }
 }
diff --git a/core-web/libs/edit-content/src/lib/components/dot-edit-content-field/dot-edit-content-field.component.html b/core-web/libs/edit-content/src/lib/components/dot-edit-content-field/dot-edit-content-field.component.html
index 620adb602ab..c2556f74d35 100644
--- a/core-web/libs/edit-content/src/lib/components/dot-edit-content-field/dot-edit-content-field.component.html
+++ b/core-web/libs/edit-content/src/lib/components/dot-edit-content-field/dot-edit-content-field.component.html
@@ -95,7 +95,6 @@
     }
     @case (fieldTypes.FILE) {
         <dot-edit-content-file-field
-            [fieldVariable]="field.variable"
             [contentlet]="contentlet"
             [formControlName]="field.variable"
             [attr.data-testId]="'field-' + field.variable"
@@ -103,7 +102,6 @@
     }
     @case (fieldTypes.IMAGE) {
         <dot-edit-content-file-field
-            [fieldVariable]="field.variable"
             [contentlet]="contentlet"
             [formControlName]="field.variable"
             [attr.data-testId]="'field-' + field.variable"
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.html b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.html
index 28f8254bf09..53ca070f326 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.html
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.html
@@ -10,7 +10,7 @@
                 data-testId="temp-file-thumbnail" />
         } @else {
             <dot-contentlet-thumbnail
-                [fieldVariable]="$fieldVariable()"
+                fieldVariable="asset"
                 [iconSize]="'48px'"
                 [contentlet]="previewFile.file"
                 [playableVideo]="true"
@@ -49,6 +49,18 @@
             data-testId="remove-button"
             icon="pi pi-trash" />
     </div>
+    <div class="preview-metadata__action--responsive">
+        <p-button
+            (click)="toggleShowDialog()"
+            styleClass="p-button-rounded p-button-text p-button-semi-transparent"
+            data-testId="infor-button-responsive"
+            icon="pi pi-info" />
+        <p-button
+            (click)="removeFile.emit()"
+            styleClass="p-button-rounded p-button-text p-button-semi-transparent"
+            data-testId="remove-button-responsive"
+            icon="pi pi-trash" />
+    </div>
 </div>
 
 <p-dialog
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.scss b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.scss
index 8910d142fb2..c4df7548517 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.scss
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.scss
@@ -61,6 +61,15 @@
     }
 }
 
+.preview-metadata__action--responsive {
+    position: absolute;
+    bottom: $spacing-1;
+    right: $spacing-1;
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-1;
+}
+
 .preview-metadata__actions {
     position: absolute;
     bottom: $spacing-1;
@@ -117,7 +126,8 @@
 }
 
 @container preview (min-width: 376px) {
-    .preview-metadata__container {
+    .preview-metadata__container,
+    .preview-metadata__actions {
         display: flex;
     }
 
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.ts
index eeb15c4501d..d487225ea24 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.ts
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.ts
@@ -34,7 +34,6 @@ import { getFileMetadata } from '../../utils';
 })
 export class DotFileFieldPreviewComponent {
     $previewFile = input.required<PreviewFile>({ alias: 'previewFile' });
-    $fieldVariable = input.required<string>({ alias: 'fieldVariable' });
     removeFile = output();
     $showDialog = signal(false);
 
@@ -44,7 +43,7 @@ export class DotFileFieldPreviewComponent {
             return previewFile.file.metadata;
         }
 
-        return getFileMetadata(previewFile.file, this.$fieldVariable());
+        return getFileMetadata(previewFile.file);
     });
 
     toggleShowDialog() {
diff --git a/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 b/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
index 56e014741fc..669b8818fee 100644
--- a/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
+++ b/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
@@ -1,10 +1,12 @@
+@let uiMessage = $uiMessage();
+
 <div
-    [ngClass]="$uiMessage().severity"
+    [ngClass]="uiMessage.severity"
     class="icon-container"
     data-testId="ui-message-icon-container">
-    <i [ngClass]="$uiMessage().icon" data-testId="ui-message-icon" class="icon"></i>
+    <i [ngClass]="uiMessage.icon" data-testId="ui-message-icon" class="icon"></i>
 </div>
 <div class="text">
-    <span [innerHTML]="$uiMessage().message" data-testId="ui-message-span"></span>
+    <span [innerHTML]="uiMessage.message | dm: uiMessage?.args" data-testId="ui-message-span"></span>
     <ng-content></ng-content>
 </div>
diff --git a/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.ts b/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.ts
index 0662de9f92e..42783e9cb5e 100644
--- a/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.ts
+++ b/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.ts
@@ -1,12 +1,14 @@
 import { NgClass } from '@angular/common';
 import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 
+import { DotMessagePipe } from '@dotcms/ui';
+
 import { UIMessage } from '../../models';
 
 @Component({
     selector: 'dot-file-field-ui-message',
     standalone: true,
-    imports: [NgClass],
+    imports: [NgClass, DotMessagePipe],
     templateUrl: './dot-file-field-ui-message.component.html',
     styleUrls: ['./dot-file-field-ui-message.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/dot-edit-content-file-field.component.html b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/dot-edit-content-file-field.component.html
index 7e2ace36b1c..8de4c3bce53 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/dot-edit-content-file-field.component.html
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/dot-edit-content-file-field.component.html
@@ -1,6 +1,6 @@
 <div
     class="file-field__container"
-    [class.file-field__container--empty]="store.isEmpty()"
+    [class.file-field__container--empty]="store.isInitOrPreview()"
     [class.file-field__container--uploading]="store.isUploading()">
     @switch (store.fileStatus()) {
         @case ('init') {
@@ -10,7 +10,7 @@
                 <input
                     #inputFile
                     [accept]="store.acceptedFiles().join(',')"
-                    (change)="store.handleUploadFile(inputFile.files)"
+                    (change)="store.handleUploadFile(inputFile.files[0])"
                     data-testId="file-field__file-input"
                     type="file" />
                 <dot-drop-zone
@@ -20,17 +20,15 @@
                     (fileDragOver)="store.setDropZoneState(true)"
                     (fileDropped)="handleFileDrop($event)"
                     data-testId="dropzone">
-                    @if (store.uiMessage()) {
-                        <dot-file-field-ui-message [uiMessage]="store.uiMessage()">
-                            <button
-                                (click)="inputFile.click()"
-                                class="file-field__drop-zone-btn"
-                                data-testId="choose-file-btn"
-                                type="button">
-                                {{ 'dot.file.field.action.choose.file' | dm }}
-                            </button>
-                        </dot-file-field-ui-message>
-                    }
+                    <dot-file-field-ui-message [uiMessage]="store.uiMessage()">
+                        <button
+                            (click)="inputFile.click()"
+                            class="file-field__drop-zone-btn"
+                            data-testId="choose-file-btn"
+                            type="button">
+                            {{ 'dot.file.field.action.choose.file' | dm }}
+                        </button>
+                    </dot-file-field-ui-message>
                 </dot-drop-zone>
             </div>
 
@@ -60,7 +58,7 @@
                     <p-button
                         tooltipPosition="bottom"
                         data-testId="action-generate-with-ai"
-                        [label]="'dot.binary.field.action.generate.with.dotai' | dm"
+                        [label]="'dot.file.field.action.generate.with.dotai' | dm"
                         styleClass="p-button-link p-button-sm pointer-events-auto">
                         <ng-template pTemplate="icon">
                             <svg
@@ -91,8 +89,7 @@
             @if (store.previewFile()) {
                 <dot-file-field-preview
                     (removeFile)="store.removeFile()"
-                    [previewFile]="store.previewFile()"
-                    [fieldVariable]="store.fieldVariable()" />
+                    [previewFile]="store.previewFile()" />
             }
         }
     }
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/dot-edit-content-file-field.component.scss b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/dot-edit-content-file-field.component.scss
index 84690d8c28b..5e9fbafe9ee 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/dot-edit-content-file-field.component.scss
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/dot-edit-content-file-field.component.scss
@@ -3,7 +3,7 @@
 :host {
     display: block;
     container-type: inline-size;
-    container-name: binaryField;
+    container-name: fileField;
 }
 
 .file-field__container {
@@ -82,7 +82,7 @@ input[type="file"] {
     display: none;
 }
 
-@container fileField (max-width: 306px) {
+@container fileField (max-width: 500px) {
     .file-field__container--empty {
         height: auto;
         flex-direction: column;
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/dot-edit-content-file-field.component.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/dot-edit-content-file-field.component.ts
index 4d3c13b9c60..116521a1853 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/dot-edit-content-file-field.component.ts
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/dot-edit-content-file-field.component.ts
@@ -18,13 +18,15 @@ import {
     DotMessagePipe,
     DotAIImagePromptComponent,
     DotSpinnerModule,
-    DropZoneFileEvent
+    DropZoneFileEvent,
+    DropZoneFileValidity
 } from '@dotcms/ui';
 
 import { DotFileFieldPreviewComponent } from './components/dot-file-field-preview/dot-file-field-preview.component';
 import { DotFileFieldUiMessageComponent } from './components/dot-file-field-ui-message/dot-file-field-ui-message.component';
 import { INPUT_TYPES } from './models';
 import { FileFieldStore } from './store/file-field.store';
+import { getUiMessage } from './utils/messages';
 
 @Component({
     selector: 'dot-edit-content-file-field',
@@ -56,28 +58,24 @@ export class DotEditContentFileFieldComponent implements ControlValueAccessor, O
 
     $field = input.required<DotCMSContentTypeField>({ alias: 'field' });
     $contentlet = input.required<DotCMSContentlet>({ alias: 'contentlet' });
-    $fieldVariable = input.required<string>({ alias: 'fieldVariable' });
 
-    private onChange: (value: string) => void;
+    private onChange: (value: string | File) => void;
     private onTouched: () => void;
 
     constructor() {
         effect(() => {
             const value = this.store.value();
-            console.log('current value', value);
             this.onChange(value);
             this.onTouched();
         });
     }
 
     ngOnInit() {
+        console.log('content', this.$contentlet());
+        
         this.store.initLoad({
+            fieldVariable: this.$field().variable,
             inputType: this.$field().fieldType as INPUT_TYPES,
-            uiMessage: {
-                message: this.#messageService.get('dot.file.field.drag.and.drop.message'),
-                severity: 'info',
-                icon: 'pi pi-upload'
-            }
         });
     }
 
@@ -105,14 +103,17 @@ export class DotEditContentFileFieldComponent implements ControlValueAccessor, O
         }
 
         if (!validity.valid) {
-            //this.handleFileDropError(validity);
+            this.handleFileDropError(validity);
 
             return;
         }
 
-        const fileList = new FileList();
-        fileList[0] = file;
+        this.store.handleUploadFile(file);
+    }
 
-        this.store.handleUploadFile(fileList);
+    private handleFileDropError({ errorsType }: DropZoneFileValidity): void {
+        const errorType = errorsType[0];
+        const uiMessage = getUiMessage(errorType);
+        this.store.setUIMessage(uiMessage);
     }
 }
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/dot-edit-content-file-field.const.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/dot-edit-content-file-field.const.ts
index c06de23ab14..0f9c5f93287 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/dot-edit-content-file-field.const.ts
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/dot-edit-content-file-field.const.ts
@@ -18,7 +18,7 @@ export const INPUT_CONFIG: ConfigActions = {
         allowCreateFile: true,
         allowGenerateImg: false,
         acceptedFiles: [],
-        maxFileSize: 0
+        maxFileSize: 1024
     },
     Image: {
         allowExistingFile: true,
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/models/index.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/models/index.ts
index 56fdc597afe..bcef3fc2a5c 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/models/index.ts
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/models/index.ts
@@ -8,8 +8,13 @@ export interface UIMessage {
     message: string;
     severity: 'info' | 'error' | 'warning' | 'success';
     icon: string;
+    args?: string[];
 }
 
+export type MESSAGES_TYPES = 'DEFAULT' | 'SERVER_ERROR' | 'FILE_TYPE_MISMATCH' | 'MAX_FILE_SIZE_EXCEEDED' | 'MULTIPLE_FILES_DROPPED';
+
+export type UIMessagesMap = Record<MESSAGES_TYPES, UIMessage>;
+
 export type PreviewFile =
     | {
           source: 'temp';
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/store/file-field.store.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/store/file-field.store.ts
index cc9ed834b81..aa1c0eb6d85 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/store/file-field.store.ts
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/store/file-field.store.ts
@@ -1,17 +1,24 @@
+import { tapResponse } from '@ngrx/component-store';
 import { patchState, signalStore, withComputed, withMethods, withState } from '@ngrx/signals';
+import { rxMethod } from '@ngrx/signals/rxjs-interop';
+import { pipe } from 'rxjs';
 
 import { computed, inject } from '@angular/core';
 
-import { DotUploadService } from '@dotcms/data-access';
+import { switchMap, tap } from 'rxjs/operators';
+
+import { DotUploadFileService } from '@dotcms/data-access';
 import { DotCMSContentlet, DotCMSTempFile } from '@dotcms/dotcms-models';
 
 import { INPUT_CONFIG } from '../dot-edit-content-file-field.const';
 import { INPUT_TYPES, FILE_STATUS, UIMessage, PreviewFile } from '../models';
+import { getUiMessage } from '../utils/messages';
+
 
 export interface FileFieldState {
     contentlet: DotCMSContentlet | null;
     tempFile: DotCMSTempFile | null;
-    value: string;
+    value: string | File;
     inputType: INPUT_TYPES | null;
     fileStatus: FILE_STATUS;
     dropZoneActive: boolean;
@@ -21,7 +28,7 @@ export interface FileFieldState {
     allowGenerateImg: boolean;
     allowExistingFile: boolean;
     allowCreateFile: boolean;
-    uiMessage: UIMessage | null;
+    uiMessage: UIMessage;
     acceptedFiles: string[];
     maxFileSize: number;
     fieldVariable: string;
@@ -41,7 +48,7 @@ const initialState: FileFieldState = {
     allowGenerateImg: false,
     allowExistingFile: false,
     allowCreateFile: false,
-    uiMessage: null,
+    uiMessage: getUiMessage('DEFAULT'),
     acceptedFiles: [],
     maxFileSize: 0,
     fieldVariable: '',
@@ -51,7 +58,7 @@ const initialState: FileFieldState = {
 export const FileFieldStore = signalStore(
     withState(initialState),
     withComputed(({ fileStatus }) => ({
-        isEmpty: computed(() => {
+        isInitOrPreview: computed(() => {
             const currentStatus = fileStatus();
 
             return currentStatus === 'init' || currentStatus === 'preview';
@@ -62,24 +69,33 @@ export const FileFieldStore = signalStore(
             return currentStatus === 'uploading';
         })
     })),
-    withMethods((store, uploadService = inject(DotUploadService)) => ({
+    withMethods((store, fileService = inject(DotUploadFileService)) => ({
         initLoad: (initState: {
             inputType: FileFieldState['inputType'];
-            uiMessage: FileFieldState['uiMessage'];
+            fieldVariable: FileFieldState['fieldVariable'];
         }) => {
-            const { inputType, uiMessage } = initState;
+            const { inputType, fieldVariable } = initState;
 
             const actions = INPUT_CONFIG[inputType] || {};
 
             patchState(store, {
                 inputType,
-                uiMessage,
+                fieldVariable,
                 ...actions
             });
         },
         setValue: (value: string) => {
             patchState(store, { value });
         },
+        setUIMessage: (uiMessage: UIMessage) => {
+            const acceptedFiles = store.acceptedFiles();
+            const maxFileSize= store.maxFileSize();
+
+            patchState(store, { uiMessage: {
+                ...uiMessage,
+                args: [acceptedFiles.join(', '), `${maxFileSize}`]
+            } });
+        },
         removeFile: () => {
             patchState(store, {
                 contentlet: null,
@@ -99,27 +115,34 @@ export const FileFieldStore = signalStore(
                 fileStatus: 'uploading'
             });
         },
-        handleUploadFile: async (files: FileList) => {
-            const file = files[0];
-
-            if (file) {
-                patchState(store, {
+        handleUploadFile: rxMethod<File>(
+            pipe(
+                tap(() => patchState(store, {
                     dropZoneActive: false,
                     fileStatus: 'uploading'
-                });
-
-                const tempFile = await uploadService.uploadFile({
-                    file,
-                    maxSize: `${store.maxFileSize()}`
-                });
-                patchState(store, {
-                    tempFile,
-                    contentlet: null,
-                    fileStatus: 'preview',
-                    value: tempFile?.id,
-                    previewFile: { source: 'temp', file: tempFile }
-                });
-            }
-        }
+                })),
+                switchMap((file) => {
+                    return fileService.uploadDotAsset(file).pipe(
+                        tapResponse({
+                            next: (file) => {
+                                patchState(store, {
+                                    tempFile: null,
+                                    contentlet: file,
+                                    fileStatus: 'preview',
+                                    value: file.identifier,
+                                    previewFile: { source: 'contentlet', file: file }
+                                });
+                            },
+                            error: () => {
+                                patchState(store, {
+                                    fileStatus: 'init',
+                                    uiMessage: getUiMessage('SERVER_ERROR')
+                                });
+                            }
+                        })
+                    )
+                }),
+            )
+        )
     }))
 );
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/stories/binary-field.stories.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/stories/binary-field.stories.ts
new file mode 100644
index 00000000000..e1278cb3132
--- /dev/null
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/stories/binary-field.stories.ts
@@ -0,0 +1,77 @@
+import {
+    moduleMetadata,
+    StoryObj,
+    Meta,
+    applicationConfig,
+    argsToTemplate
+} from '@storybook/angular';
+
+import { provideHttpClient } from '@angular/common/http';
+import { FormsModule } from '@angular/forms';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+import { DotMessageService } from '@dotcms/data-access';
+import { DotCMSContentTypeField } from '@dotcms/dotcms-models';
+
+import { BINARY_FIELD_MOCK } from '../../../utils/mocks';
+import { DotEditContentFileFieldComponent } from '../dot-edit-content-file-field.component';
+import { FileFieldStore } from '../store/file-field.store';
+import { MessageServiceMock } from '../utils/mocks';
+
+type Args = DotEditContentFileFieldComponent & {
+    field: DotCMSContentTypeField;
+    value: string;
+};
+
+const meta: Meta<Args> = {
+    title: 'Library / Edit Content / New Binary Field',
+    component: DotEditContentFileFieldComponent,
+    decorators: [
+        applicationConfig({
+            providers: [
+                provideHttpClient(),
+                {
+                    provide: DotMessageService,
+                    useValue: MessageServiceMock
+                }
+            ]
+        }),
+        moduleMetadata({
+            imports: [BrowserAnimationsModule, FormsModule],
+            providers: [FileFieldStore]
+        })
+    ],
+    render: (args) => ({
+        props: args,
+        template: `
+            <dot-edit-content-file-field ${argsToTemplate(args)} [(ngModel)]="value" />
+            <p>Current value: {{ value }}</p>
+        `
+    })
+};
+export default meta;
+
+type Story = StoryObj<Args>;
+
+export const BinaryField: Story = {
+    args: {
+        value: '',
+        field: { ...BINARY_FIELD_MOCK }
+    }
+};
+
+export const ResposiveBinaryField: Story = {
+    args: {
+        value: '',
+        field: { ...BINARY_FIELD_MOCK }
+    },
+    render: (args) => ({
+        props: args,
+        template: `
+            <div class="w-20rem">
+                <dot-edit-content-file-field ${argsToTemplate(args)} [(ngModel)]="value" />
+                <p>Current value: {{ value }}</p>
+            </div>
+        `
+    })
+};
\ No newline at end of file
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/stories/file-field.stories.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/stories/file-field.stories.ts
new file mode 100644
index 00000000000..e365b75defb
--- /dev/null
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/stories/file-field.stories.ts
@@ -0,0 +1,98 @@
+import {
+    moduleMetadata,
+    StoryObj,
+    Meta,
+    applicationConfig,
+    argsToTemplate
+} from '@storybook/angular';
+
+import { provideHttpClient } from '@angular/common/http';
+import { FormsModule } from '@angular/forms';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+import { DotMessageService } from '@dotcms/data-access';
+import { DotCMSContentTypeField } from '@dotcms/dotcms-models';
+
+import { FILE_FIELD_MOCK } from '../../../utils/mocks';
+import { DotEditContentFileFieldComponent } from '../dot-edit-content-file-field.component';
+import { UIMessage } from '../models';
+import { FileFieldStore } from '../store/file-field.store';
+import { MessageServiceMock } from '../utils/mocks';
+
+type Args = DotEditContentFileFieldComponent & {
+    field: DotCMSContentTypeField;
+    value: string;
+    uiMessage?: UIMessage;
+};
+
+const meta: Meta<Args> = {
+    title: 'Library / Edit Content / File Field',
+    component: DotEditContentFileFieldComponent,
+    decorators: [
+        applicationConfig({
+            providers: [
+                provideHttpClient(),
+                {
+                    provide: DotMessageService,
+                    useValue: MessageServiceMock
+                }
+            ]
+        }),
+        moduleMetadata({
+            imports: [BrowserAnimationsModule, FormsModule],
+            providers: [FileFieldStore]
+        })
+    ],
+    render: (args) => ({
+        props: args,
+        template: `
+            <dot-edit-content-file-field ${argsToTemplate(args)} [(ngModel)]="value" />
+            <p>Current value: {{ value }}</p>
+        `
+    })
+};
+export default meta;
+
+type Story = StoryObj<Args>;
+
+export const FileField: Story = {
+    args: {
+        value: '',
+        field: { ...FILE_FIELD_MOCK }
+    }
+};
+
+export const ResposiveFileField: Story = {
+    args: {
+        value: '',
+        field: { ...FILE_FIELD_MOCK }
+    },
+    render: (args) => ({
+        props: args,
+        template: `
+            <div class="w-20rem">
+                <dot-edit-content-file-field ${argsToTemplate(args)} [(ngModel)]="value" />
+                <p>Current value: {{ value }}</p>
+            </div>
+        `
+    })
+};
+
+export const InvalidFile: Story = {
+    args: {
+        value: '',
+        field: { ...FILE_FIELD_MOCK },
+        uiMessage: {
+            message: 'dot.file.field.drag.and.drop.error.file.not.supported.message',
+            severity: 'error',
+            icon: 'pi pi-exclamation-triangle'
+        }
+    },
+    render: (args) => ({
+        props: args,
+        template: `
+            <dot-edit-content-file-field ${argsToTemplate(args)} [(ngModel)]="value" />
+            <p>Current value: {{ value }}</p>
+        `
+    })
+};
\ No newline at end of file
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/dot-edit-content-file-field.component.stories.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/stories/image-field.stories.ts
similarity index 67%
rename from core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/dot-edit-content-file-field.component.stories.ts
rename to core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/stories/image-field.stories.ts
index 38d3e6119be..7e19df311d7 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/dot-edit-content-file-field.component.stories.ts
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/stories/image-field.stories.ts
@@ -13,11 +13,10 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { DotMessageService } from '@dotcms/data-access';
 import { DotCMSContentTypeField } from '@dotcms/dotcms-models';
 
-import { DotEditContentFileFieldComponent } from './dot-edit-content-file-field.component';
-import { FileFieldStore } from './store/file-field.store';
-import { MessageServiceMock } from './utils/mocks';
-
-import { FILE_FIELD_MOCK, IMAGE_FIELD_MOCK, BINARY_FIELD_MOCK } from '../../utils/mocks';
+import { IMAGE_FIELD_MOCK } from '../../../utils/mocks';
+import { DotEditContentFileFieldComponent } from '../dot-edit-content-file-field.component';
+import { FileFieldStore } from '../store/file-field.store';
+import { MessageServiceMock } from '../utils/mocks';
 
 type Args = DotEditContentFileFieldComponent & {
     field: DotCMSContentTypeField;
@@ -25,7 +24,7 @@ type Args = DotEditContentFileFieldComponent & {
 };
 
 const meta: Meta<Args> = {
-    title: 'Library / Edit Content / File Field',
+    title: 'Library / Edit Content / Image Field',
     component: DotEditContentFileFieldComponent,
     decorators: [
         applicationConfig({
@@ -54,13 +53,6 @@ export default meta;
 
 type Story = StoryObj<Args>;
 
-export const FileField: Story = {
-    args: {
-        value: '',
-        field: { ...FILE_FIELD_MOCK }
-    }
-};
-
 export const ImageField: Story = {
     args: {
         value: '',
@@ -68,9 +60,18 @@ export const ImageField: Story = {
     }
 };
 
-export const BinaryField: Story = {
+export const ResposiveImageField: Story = {
     args: {
         value: '',
-        field: { ...BINARY_FIELD_MOCK }
-    }
+        field: { ...IMAGE_FIELD_MOCK }
+    },
+    render: (args) => ({
+        props: args,
+        template: `
+            <div class="w-20rem">
+                <dot-edit-content-file-field ${argsToTemplate(args)} [(ngModel)]="value" />
+                <p>Current value: {{ value }}</p>
+            </div>
+        `
+    })
 };
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/utils/index.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/utils/index.ts
index 49a68220754..3ee6d847c4b 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/utils/index.ts
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/utils/index.ts
@@ -1,12 +1,13 @@
 import { DotCMSContentlet, DotFileMetadata } from '@dotcms/dotcms-models';
 
 export const getFileMetadata = (
-    contentlet: DotCMSContentlet,
-    fieldVariable: string
+    contentlet: DotCMSContentlet
 ): DotFileMetadata => {
+    console.log('contentlet', contentlet);
+
     const { metaData } = contentlet;
 
-    const metadata = metaData || contentlet[`${fieldVariable}MetaData`];
+    const metadata = metaData || contentlet[`assetMetaData`];
 
     return metadata || {};
 };
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/utils/messages.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/utils/messages.ts
new file mode 100644
index 00000000000..e219156c1a7
--- /dev/null
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/utils/messages.ts
@@ -0,0 +1,34 @@
+import { MESSAGES_TYPES, UIMessagesMap } from "../models";
+
+
+export const UiMessageMap: UIMessagesMap = {
+    DEFAULT: {
+        message: 'dot.file.field.drag.and.drop.message',
+        severity: 'info',
+        icon: 'pi pi-upload'
+    },
+    SERVER_ERROR: {
+        message: 'dot.file.field.drag.and.drop.error.server.error.message',
+        severity: 'error',
+        icon: 'pi pi-exclamation-triangle'
+    },
+    FILE_TYPE_MISMATCH: {
+        message: 'dot.file.field.drag.and.drop.error.file.not.supported.message',
+        severity: 'error',
+        icon: 'pi pi-exclamation-triangle'
+    },
+    MAX_FILE_SIZE_EXCEEDED: {
+        message: 'dot.file.field.drag.and.drop.error.file.maxsize.exceeded.message',
+        severity: 'error',
+        icon: 'pi pi-exclamation-triangle'
+    },
+    MULTIPLE_FILES_DROPPED: {
+        message: 'dot.file.field.drag.and.drop.error.multiple.files.dropped.message',
+        severity: 'error',
+        icon: 'pi pi-exclamation-triangle'
+    }
+};
+
+export function getUiMessage(key: MESSAGES_TYPES) {
+    return UiMessageMap[key];
+}
\ No newline at end of file
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/utils/mocks.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/utils/mocks.ts
index 12e5092f876..5bd006a59da 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/utils/mocks.ts
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/utils/mocks.ts
@@ -15,7 +15,8 @@ const FILE_MESSAGES_MOCK = {
     'dot.common.import': 'Import',
     'dot.common.remove': 'Remove',
     'dot.common.save': 'Save',
-    'error.form.validator.required': 'This field is required'
+    'error.form.validator.required': 'This field is required',
+    'dot.file.field.action.generate.with.dotai': 'Generate With dotAI'
 };
 
 export const MessageServiceMock = new MockDotMessageService(FILE_MESSAGES_MOCK);