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 ecfe8f3f032b..fb0a4e9705b6 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
@@ -26,21 +26,21 @@
                 @if (store.allowURLImport()) {
                     <p-button
                         [label]="'dot.file.field.action.import.from.url' | dm"
-                        data-testId="action-url-btn"
+                        data-testId="action-import-from-url"
                         icon="pi pi-link"
                         styleClass="p-button-link p-button-sm" />
                 }
                 @if (store.allowExistingFile()) {
                     <p-button
                         [label]="'dot.file.field.action.select.existing.file' | dm"
-                        data-testId="action-editor-btn"
+                        data-testId="action-existing-file"
                         icon="pi pi-file"
                         styleClass="p-button-link p-button-sm" />
                 }
                 @if (store.allowCreateFile()) {
                     <p-button
                         [label]="'dot.file.field.action.create.new.file' | dm"
-                        data-testId="action-editor-btn"
+                        data-testId="action-new-file"
                         icon="pi pi-code"
                         styleClass="p-button-link p-button-sm" />
                 }
@@ -48,7 +48,7 @@
                     <p-button
                         [disabled]="!store.isAIPluginInstalled()"
                         tooltipPosition="bottom"
-                        data-testId="action-ai-btn"
+                        data-testId="action-generate-with-ai"
                         styleClass="p-button-link p-button-sm pointer-events-auto">
                         <svg
                             fill="none"
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/dot-edit-content-file-field.component.spec.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/dot-edit-content-file-field.component.spec.ts
index 4a12c2754055..8f8eb8bf4237 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/dot-edit-content-file-field.component.spec.ts
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/dot-edit-content-file-field.component.spec.ts
@@ -1,24 +1,111 @@
-import { Spectator, createComponentFactory, mockProvider } from '@ngneat/spectator/jest';
+import { Spectator, byTestId, createComponentFactory, mockProvider } from '@ngneat/spectator/jest';
 
 import { provideHttpClient } from '@angular/common/http';
+import { ControlContainer } from '@angular/forms';
 
 import { DotMessageService } from '@dotcms/data-access';
+import {
+    DotDropZoneComponent,
+} from '@dotcms/ui';
 
 import { DotEditContentFileFieldComponent } from './dot-edit-content-file-field.component';
 import { FileFieldStore } from './store/file-field.store';
 
+import { BINARY_FIELD_MOCK, createFormGroupDirectiveMock, FILE_FIELD_MOCK, IMAGE_FIELD_MOCK } from '../../utils/mocks';
+
+
 describe('DotEditContentFileFieldComponent', () => {
     let spectator: Spectator<DotEditContentFileFieldComponent>;
     const createComponent = createComponentFactory({
         component: DotEditContentFileFieldComponent,
         detectChanges: false,
         componentProviders: [FileFieldStore],
-        providers: [provideHttpClient(), mockProvider(DotMessageService)]
+        providers: [provideHttpClient(), mockProvider(DotMessageService)],
+        componentViewProviders: [
+            { provide: ControlContainer, useValue: createFormGroupDirectiveMock() }
+        ],
     });
 
-    beforeEach(() => (spectator = createComponent()));
+    describe('FileField', () => {
+        beforeEach(() => (spectator = createComponent({
+            props: {
+                field: FILE_FIELD_MOCK
+            } as unknown
+        })));
+
+        it('should be created', () => {
+            expect(spectator.component).toBeTruthy();
+        });
+
+        it('should have a DotDropZoneComponent', () => {
+            spectator.detectChanges();
+
+            expect(spectator.query(DotDropZoneComponent)).toBeTruthy();
+        });
+
+        it('should show the proper actions', () => {
+            spectator.detectChanges();
 
-    it('should be created', () => {
-        expect(spectator.component).toBeTruthy();
+            expect(spectator.query(byTestId('action-import-from-url'))).toBeTruthy();
+            expect(spectator.query(byTestId('action-existing-file'))).toBeTruthy();
+            expect(spectator.query(byTestId('action-new-file'))).toBeTruthy();
+            expect(spectator.query(byTestId('action-generate-with-ai'))).toBeFalsy();
+        });
     });
+
+    describe('ImageField', () => {
+        beforeEach(() => (spectator = createComponent({
+            props: {
+                field: IMAGE_FIELD_MOCK
+            } as unknown
+        })));
+
+        it('should be created', () => {
+            expect(spectator.component).toBeTruthy();
+        });
+
+        it('should have a DotDropZoneComponent', () => {
+            spectator.detectChanges();
+
+            expect(spectator.query(DotDropZoneComponent)).toBeTruthy();
+        });
+
+        it('should show the proper actions', () => {
+            spectator.detectChanges();
+
+            expect(spectator.query(byTestId('action-import-from-url'))).toBeTruthy();
+            expect(spectator.query(byTestId('action-existing-file'))).toBeTruthy();
+            expect(spectator.query(byTestId('action-new-file'))).toBeFalsy();
+            expect(spectator.query(byTestId('action-generate-with-ai'))).toBeTruthy();
+        });
+    });
+
+    describe('BinaryField', () => {
+        beforeEach(() => (spectator = createComponent({
+            props: {
+                field: BINARY_FIELD_MOCK
+            } as unknown
+        })));
+
+        it('should be created', () => {
+            expect(spectator.component).toBeTruthy();
+        });
+
+        it('should have a DotDropZoneComponent', () => {
+            spectator.detectChanges();
+
+            expect(spectator.query(DotDropZoneComponent)).toBeTruthy();
+        });
+
+        it('should show the proper actions', () => {
+            spectator.detectChanges();
+
+            expect(spectator.query(byTestId('action-import-from-url'))).toBeTruthy();
+            expect(spectator.query(byTestId('action-existing-file'))).toBeFalsy();
+            expect(spectator.query(byTestId('action-new-file'))).toBeTruthy();
+            expect(spectator.query(byTestId('action-generate-with-ai'))).toBeTruthy();
+        });
+    });
+
+    
 });
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/dot-edit-content-file-field.component.stories.ts
new file mode 100644
index 000000000000..be7671038901
--- /dev/null
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/dot-edit-content-file-field.component.stories.ts
@@ -0,0 +1,78 @@
+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 { 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';
+
+type Args = DotEditContentFileFieldComponent & {
+    field: DotCMSContentTypeField;
+    value: string;
+}
+
+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 ImageField: Story = {
+    args: {
+        value: '',
+        field: {...IMAGE_FIELD_MOCK}
+    }
+};
+
+export const BinaryField: Story = {
+    args: {
+        value: '',
+        field: {...BINARY_FIELD_MOCK}
+    }
+};
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
new file mode 100644
index 000000000000..699f6714e56b
--- /dev/null
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/utils/mocks.ts
@@ -0,0 +1,42 @@
+import { MockDotMessageService } from "@dotcms/utils-testing";
+
+const MESSAGES_MOCK = {
+    'dot.file.field.action.choose.file': 'Choose File',
+    'dot.file.field.action.create.new.file': 'Create New File',
+    'dot.file.field.action.create.new.file.label': 'File Name',
+    'dot.file.field.action.import.from.url.error.message':
+        'The URL you requested is not valid. Please try again.',
+    'dot.file.field.action.import.from.url': 'Import from URL',
+    'dot.file.field.action.remove': 'Remove',
+    'dot.file.field.dialog.create.new.file.header': 'File Details',
+    'dot.file.field.dialog.import.from.url.header': 'URL',
+    'dot.file.field.drag.and.drop.error.could.not.load.message':
+        '<strong>Couldn&apos;t load the file.</strong> Please try again or',
+    'dot.file.field.drag.and.drop.error.file.maxsize.exceeded.message':
+        'The file weight <strong>exceeds the limits of {0}</strong>, please   reduce size before uploading.',
+    'dot.file.field.drag.and.drop.error.file.not.supported.message':
+        'This type of <strong>file is not supported</strong>, Please select a  {0} file.',
+    'dot.file.field.drag.and.drop.error.multiple.files.dropped.message':
+        'You can only upload one file at a time.',
+    'dot.file.field.drag.and.drop.error.server.error.message':
+        '<strong>Something went wrong</strong>, please try again or  contact our support team.',
+    'dot.file.field.drag.and.drop.message': 'Drag and Drop or',
+    'dot.file.field.error.type.file.not.extension': "Please add the file's extension",
+    'dot.file.field.error.type.file.not.supported.message':
+        'This type of file is not supported. Please use a {0} file.',
+    'dot.file.field.file.bytes': 'Bytes',
+    'dot.file.field.file.dimension': 'Dimension',
+    'dot.file.field.file.size': 'File Size',
+    'dot.file.field.import.from.url.error.file.not.supported.message':
+        'This type of file is not supported, Please import a {0} file.',
+    'dot.file.field.action.generate.with.dotai': 'Generate with dotAI',
+    'dot.file.field.action.select.existing.file': 'Select Existing File',
+    'dot.common.cancel': 'Cancel',
+    'dot.common.edit': 'Edit',
+    'dot.common.import': 'Import',
+    'dot.common.remove': 'Remove',
+    'dot.common.save': 'Save',
+    'error.form.validator.required': 'This field is required',
+};
+
+export const MessageServiceMock = new MockDotMessageService(MESSAGES_MOCK);
\ No newline at end of file