diff --git a/doc-app/app/controllers/docs/ember-input-validation/prefabs/file-list.ts b/doc-app/app/controllers/docs/ember-input-validation/prefabs/file-list.ts
new file mode 100644
index 00000000..f517cec2
--- /dev/null
+++ b/doc-app/app/controllers/docs/ember-input-validation/prefabs/file-list.ts
@@ -0,0 +1,22 @@
+import Controller from '@ember/controller';
+import { action } from '@ember/object';
+import { ImmerChangeset } from 'ember-immer-changeset';
+import type { Owner } from '@ember/test-helpers/build-owner';
+
+export default class DocsEmberInputValidationPrefabsFileListController extends Controller {
+  changeset = new ImmerChangeset({
+    files: [new File([], 'file.txt')],
+    disabled: [new File([], 'file.txt')],
+    error: '',
+  });
+
+  constructor(owner: Owner) {
+    super(owner);
+    this.changeset.addError({
+      message: 'This is an error message',
+      value: '',
+      originalValue: '',
+      key: 'error',
+    });
+  }
+}
diff --git a/doc-app/app/controllers/docs/ember-input-validation/prefabs/file.ts b/doc-app/app/controllers/docs/ember-input-validation/prefabs/file.ts
index b12e0dcd..94d1d1ec 100644
--- a/doc-app/app/controllers/docs/ember-input-validation/prefabs/file.ts
+++ b/doc-app/app/controllers/docs/ember-input-validation/prefabs/file.ts
@@ -20,5 +20,4 @@ export default class DocsEmberInputValidationPrefabsFileController extends Contr
       key: 'error',
     });
   }
-
 }
diff --git a/doc-app/app/router.ts b/doc-app/app/router.ts
index 8e192a01..7afa0b95 100644
--- a/doc-app/app/router.ts
+++ b/doc-app/app/router.ts
@@ -58,6 +58,7 @@ Router.map(function (this: RouterDSL) {
         this.route('datepicker');
         this.route('datepicker-range');
         this.route('file');
+        this.route('file-list');
       });
       this.route('installation');
       this.route('checkbox');
diff --git a/doc-app/app/templates/docs.hbs b/doc-app/app/templates/docs.hbs
index 59e54d78..42e0e0c5 100644
--- a/doc-app/app/templates/docs.hbs
+++ b/doc-app/app/templates/docs.hbs
@@ -15,7 +15,7 @@
     {{! prefab section }}
 
     {{! validation section }}
-    {{!-- <nav.section @label="Ember Input Validation" />
+    {{! <nav.section @label="Ember Input Validation" />
     <nav.item
       @label="Install"
       @route="docs.ember-input-validation.installation"
@@ -32,7 +32,7 @@
       @route="docs.ember-input-validation.radio-group"
     />
     <nav.item @label="Select" @route="docs.ember-input-validation.select" />
-    <nav.item @label="Textarea" @route="docs.ember-input-validation.textarea" /> --}}
+    <nav.item @label="Textarea" @route="docs.ember-input-validation.textarea" /> }}
 
     {{! form section }}
     <nav.section @label="Ember Input Validation" />
@@ -59,6 +59,10 @@
       @route="docs.ember-input-validation.prefabs.email"
     />
     <nav.item @label="File" @route="docs.ember-input-validation.prefabs.file" />
+    <nav.item
+      @label="File List"
+      @route="docs.ember-input-validation.prefabs.file-list"
+    />
     <nav.item @label="Iban" @route="docs.ember-input-validation.prefabs.iban" />
     <nav.item
       @label="Input"
diff --git a/doc-app/app/templates/docs/ember-input-validation/prefabs/file-list.md b/doc-app/app/templates/docs/ember-input-validation/prefabs/file-list.md
new file mode 100644
index 00000000..e0c71056
--- /dev/null
+++ b/doc-app/app/templates/docs/ember-input-validation/prefabs/file-list.md
@@ -0,0 +1,43 @@
+# Input File
+
+This is an input with a dropzone that allows to upload multiple files. You can also find a list of uploaded files and dowload/delete theme.
+
+<DocsDemo as |demo|>
+  <demo.example @name="prefab-tpk-file.hbs">
+      <Prefabs::TpkValidationFileList
+        @label="File"
+        @changeset={{this.changeset}} 
+        @validationField="files"
+        @placeholder="Glisser-déposer un fichier ou cliquer pour sélectionner un fichier (max 10Mo)"
+      />
+      <Prefabs::TpkValidationFileList
+        @label="Disabled"
+        @changeset={{this.changeset}} 
+        @validationField="disabled"
+        @placeholder="Glisser-déposer un fichier ou cliquer pour sélectionner un fichier (max 10Mo)"
+        @disabled=true
+      />
+      <Prefabs::TpkValidationFileList
+        @label="Error"
+        @changeset={{this.changeset}} 
+        @validationField="error"
+        @placeholder="Glisser-déposer un fichier ou cliquer pour sélectionner un fichier (max 10Mo)"
+        @mandatory=true
+      />
+  </demo.example>
+  <demo.snippet @name="prefab-tpk-file.hbs"/>
+</DocsDemo>
+
+## Mandatory properties
+
+- `@validationField`: The field name in the changeset for validation.
+- `@changeset`: The changeset object for form validation.
+
+## Optional properties
+
+- `@label`: The label for the input field.
+- `@disabled`: Whether the input field is disabled.
+- `@mandatory`: Whether the input file multiple field is mandatory.
+- `@onChange`: The action to be called when the selection changes. 
+- `@disableDownload`: Whether the download button is disabled.
+- `@placeholder`: The placeholder for the dropzone area.
diff --git a/doc-app/app/templates/docs/ember-input-validation/prefabs/file.md b/doc-app/app/templates/docs/ember-input-validation/prefabs/file.md
index 6b1fa271..704ae577 100644
--- a/doc-app/app/templates/docs/ember-input-validation/prefabs/file.md
+++ b/doc-app/app/templates/docs/ember-input-validation/prefabs/file.md
@@ -38,4 +38,4 @@ This is an input with type File
 - `@disabled`: Whether the input field is disabled.
 - `@mandatory`: Whether the textarea field is mandatory.
 - `@onChange`: The action to be called when the selection changes. 
-- `@changeEvent`: The event to trigger the onChange action.
\ No newline at end of file
+- `@changeEvent`: The event to trigger the onChange action.
diff --git a/doc-app/tests/integration/components/ember-input-validation/prefabs/tpk-validation-file-list-test.gts b/doc-app/tests/integration/components/ember-input-validation/prefabs/tpk-validation-file-list-test.gts
new file mode 100644
index 00000000..2290c2c1
--- /dev/null
+++ b/doc-app/tests/integration/components/ember-input-validation/prefabs/tpk-validation-file-list-test.gts
@@ -0,0 +1,141 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, triggerEvent } from '@ember/test-helpers';
+import { ImmerChangeset } from 'ember-immer-changeset';
+import { setupIntl } from 'ember-intl/test-support';
+import TpkValidationFileList from '@triptyk/ember-input-validation/components/prefabs/tpk-validation-file-list';
+import { click } from '@ember/test-helpers';
+import { assertTpkCssClassesExist } from '../generic-test-functions/assert-tpk-css-classes-exist';
+import { a11yAudit } from 'ember-a11y-testing/test-support';
+import { settled } from '@ember/test-helpers';
+
+
+module(
+  'Integration | Component | Prefabs | tpk-validation-file-list',
+  function (hooks) {
+    setupRenderingTest(hooks);
+    setupIntl(hooks, 'fr-fr');
+
+    function setupChangeset({
+      files = [],
+    }: {
+      files: File[]
+    }) {
+      return new ImmerChangeset<{
+        files: File[];
+      }>({
+        files,
+      });
+    }
+
+    async function renderComponent(params: { changeset: ImmerChangeset; disabled?: boolean; disableDownload?: boolean; }) {
+      await render(
+        <template>
+          <TpkValidationFileList
+            @label="label"
+            @changeset={{params.changeset}}
+            @validationField="files"
+            @disableDownload={{params.disableDownload}}
+            @disabled={{params.disabled}}
+            @placeholder="Glisser-déposer des fichiers images (max 2mb)"
+          />
+      </template>,
+      );
+      }
+
+
+    test('Should show download and delete buttons by default when there are files', async function (assert) {
+      const changeset = setupChangeset({
+        files: [new File(['Ember Rules!'], 'file.txt')]
+      });
+      await renderComponent({changeset});
+      assert.dom('.tpk-file-list-list-item-action-download').exists();
+      assert.dom('.tpk-file-list-list-item-action-delete').exists();
+    });
+
+    test('Should hide download and delete buttons when disableDownload is true and disabled', async function (assert) {
+      const changeset = setupChangeset({
+        files: [new File(['Ember Rules!'], 'file.txt')]
+      });
+      await renderComponent({changeset, disabled: true, disableDownload: true});
+      assert.dom('.tpk-file-list-list-item-action-download').doesNotExist();
+      assert.dom('.tpk-file-list-list-item-action-delete').doesNotExist();
+    });
+
+    test('Drag and drop files should add them to the changeset and show them in the list', async function (assert) {
+      const changeset = setupChangeset({
+        files: []
+      });
+      await renderComponent({ changeset });
+      await triggerEvent('.tpk-file-list-placeholder-container', 'drop', {
+        dataTransfer: {
+          files: [new File(['Ember Rules!'], 'file.txt'), new File(['Ember Rules!'], 'loempia.txt')],
+        }
+      });
+      assert.dom('.tpk-file-list-list-item').exists({ count: 2 });
+      assert.strictEqual(changeset.get('files').length, 2);
+    });
+
+    test('Drop a file with a default file in changeset should add the file to the changeset and not remove the default file', async function (assert) {
+      const changeset = setupChangeset({
+        files: [new File(['Ember Rules!'], 'file.txt')]
+      });
+      await renderComponent({ changeset });
+      await triggerEvent('.tpk-file-list-placeholder-container', 'drop', {
+        dataTransfer: {
+          files: [new File(['Ember Rules!'], 'file.txt')],
+        }
+      });
+      assert.dom('.tpk-file-list-list-item').exists({ count: 2 });
+      assert.strictEqual(changeset.get('files').length, 2);
+    });
+
+    test('Delete button should remove the file from the changeset', async function (assert) {
+      const changeset = setupChangeset({
+        files: [new File(['Ember Rules!'], 'file.txt')]
+      });
+      await renderComponent({ changeset });
+      await click('.tpk-file-list-list-item:first-child .tpk-file-list-list-item-action-delete');
+      assert.dom('.tpk-file-list-list-item').doesNotExist();
+      assert.strictEqual(changeset.get('files').length, 0);
+    });
+
+    test('It changes data-has-error attribue on error', async function (assert) {
+      const changeset = setupChangeset({
+        files: []
+      });
+      await renderComponent({changeset});
+
+      changeset.addError({
+        message: 'required',
+        value: '',
+        originalValue: '',
+        key: 'files',
+      });
+
+      await settled();
+      assert.dom(`[data-test-tpk-file-list-input]`).hasNoText();
+
+      assert
+        .dom(`[data-test-tpk-prefab-file-list-container]`)
+        .hasAttribute('data-has-error', 'true');
+    });
+
+    test('CSS classes exist and have been attached to the correct element', async function (assert) {
+      const changeset = setupChangeset({
+        files: []
+      });
+      await renderComponent({changeset});
+      await assertTpkCssClassesExist(assert,'file-list');
+    });
+
+    test('Accessibility', async function (assert) {
+      assert.expect(0);
+      const changeset = setupChangeset({
+        files: []
+      });
+      await renderComponent({changeset});
+      await a11yAudit();
+    });
+  },
+);
diff --git a/packages/ember-input-validation/package.json b/packages/ember-input-validation/package.json
index e05061f9..2e6f6d40 100644
--- a/packages/ember-input-validation/package.json
+++ b/packages/ember-input-validation/package.json
@@ -119,7 +119,11 @@
       "./static/DE.svg": "/DE.svg",
       "./static/LU.svg": "/LU.svg",
       "./static/NL.svg": "/NL.svg",
-      "./static/FR.svg": "/FR.svg"
+      "./static/FR.svg": "/FR.svg",
+      "./static/upload.svg": "/upload.svg",
+      "./static/download.svg": "/download.svg",
+      "./static/delete.svg": "/delete.svg",
+      "./static/document.svg": "/document.svg"
     },
     "app-js": {
       "./components/base.js": "./dist/_app_/components/base.js",
@@ -131,6 +135,7 @@
       "./components/prefabs/tpk-validation-datepicker.js": "./dist/_app_/components/prefabs/tpk-validation-datepicker.js",
       "./components/prefabs/tpk-validation-email.js": "./dist/_app_/components/prefabs/tpk-validation-email.js",
       "./components/prefabs/tpk-validation-errors.js": "./dist/_app_/components/prefabs/tpk-validation-errors.js",
+      "./components/prefabs/tpk-validation-file-list.js": "./dist/_app_/components/prefabs/tpk-validation-file-list.js",
       "./components/prefabs/tpk-validation-file.js": "./dist/_app_/components/prefabs/tpk-validation-file.js",
       "./components/prefabs/tpk-validation-iban.js": "./dist/_app_/components/prefabs/tpk-validation-iban.js",
       "./components/prefabs/tpk-validation-input.js": "./dist/_app_/components/prefabs/tpk-validation-input.js",
diff --git a/packages/ember-input-validation/src/app.css b/packages/ember-input-validation/src/app.css
index 5eca2200..cc61a012 100644
--- a/packages/ember-input-validation/src/app.css
+++ b/packages/ember-input-validation/src/app.css
@@ -8,6 +8,7 @@
 @import url('./components/prefabs/styles/tpk-datepicker-range.css');
 @import url('./components/prefabs/styles/tpk-email.css');
 @import url('./components/prefabs/styles/tpk-file.css');
+@import url('./components/prefabs/styles/tpk-file-list.css');
 @import url('./components/prefabs/styles/tpk-timepicker.css');
 @import url('./components/prefabs/styles/tpk-iban.css');
 @import url('./components/prefabs/styles/tpk-mobile.css');
diff --git a/packages/ember-input-validation/src/components/prefabs/styles/tpk-file-list.css b/packages/ember-input-validation/src/components/prefabs/styles/tpk-file-list.css
new file mode 100644
index 00000000..cc56cabd
--- /dev/null
+++ b/packages/ember-input-validation/src/components/prefabs/styles/tpk-file-list.css
@@ -0,0 +1,86 @@
+.tpk-file-list-container {
+  @apply relative flex flex-col w-full pb-4;
+}
+
+.tpk-file-list-container .tpk-label {
+  @apply label;
+}
+
+.tpk-file-list-input {
+  @apply hidden;
+}
+
+.tpk-file-list-placeholder-container {
+  @apply min-h-[180px] w-full border-2 border-dashed border-base-300 rounded-lg flex flex-col items-center justify-center cursor-pointer transition-colors duration-200 hover:border-neutral-content hover:bg-base-200/10;
+}
+
+.tpk-file-list-placeholder-icon {
+  @apply w-8 h-8 mb-2 opacity-60;
+}
+
+.tpk-file-list-placeholder-container.disabled {
+  @apply hidden;
+}
+
+.tpk-file-list-placeholder {
+  @apply text-base-content/60 text-sm text-center;
+}
+
+.tpk-file-list-container[data-has-error~='true']
+  .tpk-file-list-placeholder-container {
+  @apply border-error bg-error/5;
+}
+
+.tpk-file-list-container[data-has-error~='true'] .tpk-label {
+  @apply text-error;
+}
+
+.tpk-file-list-container[data-has-error~='true'] .tpk-file-list-placeholder {
+  @apply text-error/60;
+}
+
+.tpk-file-list-container[data-has-error~='true'] .tpk-validation-errors {
+  @apply text-error text-sm absolute right-0 -bottom-1;
+}
+
+/* File list */
+
+.tpk-file-list-list {
+  @apply space-y-4 mt-4;
+}
+
+.tpk-file-list-list.disabled {
+  @apply mt-0;
+}
+
+.tpk-file-list-list-item {
+  @apply flex items-center space-x-6 px-4 py-2 border border-base-300 rounded;
+}
+
+.tpk-file-list-list-item-preview {
+  @apply w-7 h-7 flex-shrink-0;
+}
+
+.tpk-file-list-list-item-preview img {
+  @apply w-7 h-7 object-cover rounded object-center;
+}
+
+.tpk-file-list-list-item-content {
+  @apply flex flex-col flex-grow truncate text-ellipsis;
+}
+
+.tpk-file-list-list-item-content-name {
+  @apply text-sm font-semibold truncate text-ellipsis;
+}
+
+.tpk-file-list-list-item-content-size {
+  @apply text-xs text-base-content/60;
+}
+
+.tpk-file-list-list-item-action {
+  @apply flex gap-2 flex-shrink-0;
+}
+
+.tpk-file-list-list-item-action button, .tpk-file-list-list-item-action img {
+  @apply w-6 h-6;
+}
diff --git a/packages/ember-input-validation/src/components/prefabs/tpk-validation-file-list.gts b/packages/ember-input-validation/src/components/prefabs/tpk-validation-file-list.gts
new file mode 100644
index 00000000..d5a41eec
--- /dev/null
+++ b/packages/ember-input-validation/src/components/prefabs/tpk-validation-file-list.gts
@@ -0,0 +1,215 @@
+import { type BaseValidationSignature } from '../base.ts';
+import TpkValidationErrorsComponent from './tpk-validation-errors.gts';
+import MandatoryLabelComponent from './mandatory-label.gts';
+import TpkValidationFileComponent, {
+  type TpkValidationFileComponentSignature,
+} from '../tpk-validation-file.gts';
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { on } from '@ember/modifier';
+import type { Changeset } from 'ember-immer-changeset';
+import { fn } from '@ember/helper';
+import { modifier } from 'ember-modifier';
+
+export interface TpkValidationFileListPrefabSignature
+  extends BaseValidationSignature {
+  Args: BaseValidationSignature['Args'] &
+    TpkValidationFileComponentSignature['Args'] & {
+      mandatory?: boolean;
+      placeholder?: string;
+      disableDownload?: boolean;
+    };
+  Blocks: {
+    default: [];
+  };
+  Element: HTMLElement;
+}
+
+export interface FileListSignature {
+  Args: {
+    changeset: Changeset;
+    validationField: string;
+    disableDownload?: boolean;
+    disabled?: boolean;
+  };
+  Blocks: {
+    default: [];
+  };
+  Element: HTMLElement;
+}
+
+const handleSpaceToOpenListChoice = modifier(function (
+  this: object,
+  element: HTMLElement,
+) {
+  element.addEventListener('keydown', (event) => {
+    if (event.key === ' ') {
+      event.preventDefault();
+      const labelInput = element.parentElement as HTMLLabelElement;
+
+      if (labelInput instanceof HTMLLabelElement) {
+        labelInput.click();
+      }
+    }
+  });
+});
+
+export default class TpkValidationFileListComponent extends Component<TpkValidationFileListPrefabSignature> {
+  @action
+  handleDrop(event: DragEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    if (this.args.disabled) return;
+
+    let filesFromDrop = event.dataTransfer?.files;
+
+    if (filesFromDrop && filesFromDrop.length > 0) {
+      const files: File[] = Array.from(filesFromDrop);
+
+      if (this.args.onChange) {
+        return this.args.onChange(files);
+      }
+      const currentFiles = this.args.changeset.get(
+        this.args.validationField,
+      ) as File[];
+      return this.args.changeset.set(this.args.validationField, [
+        ...currentFiles,
+        ...files,
+      ]);
+    }
+  }
+
+  <template>
+    <TpkValidationFileComponent
+      @label={{@label}}
+      @disabled={{@disabled}}
+      @changeEvent={{@changeEvent}}
+      @onChange={{@onChange}}
+      @mandatory={{@mandatory}}
+      @validationField={{@validationField}}
+      @changeset={{@changeset}}
+      @multiple={{true}}
+      @requiredFields={{@requiredFields}}
+      as |V|
+    >
+      <V.Label
+        class='tpk-file-list-container'
+        data-has-error='{{V.hasError}}'
+        anchorScrollUp={{@validationField}}
+        data-test-tpk-prefab-file-list-container
+        ...attributes
+      >
+        <MandatoryLabelComponent @label={{@label}} class='tpk-label' />
+        <V.Input class='tpk-file-list-input' data-test-tpk-file-list-input />
+        <div
+          class='tpk-file-list-placeholder-container
+            {{if @disabled "disabled"}}'
+          tabindex='0'
+          {{handleSpaceToOpenListChoice}}
+          {{on 'drop' this.handleDrop}}
+        >
+          <img
+            src='/upload.svg'
+            alt='upload'
+            class='tpk-file-list-placeholder-icon'
+          />
+          <div class='tpk-file-list-placeholder'>
+            {{@placeholder}}
+          </div>
+        </div>
+        <TpkValidationErrorsComponent
+          class='tpk-validation-errors'
+          @errors={{V.errors}}
+        />
+      </V.Label>
+      <FileListComponent
+        @changeset={{@changeset}}
+        @validationField={{@validationField}}
+        @disableDownload={{@disableDownload}}
+        @disabled={{@disabled}}
+      />
+    </TpkValidationFileComponent>
+  </template>
+}
+
+export class FileListComponent extends Component<FileListSignature> {
+  changesetGet = (path: string): File[] => {
+    return this.args.changeset.get(path) as File[];
+  };
+
+  startWith = (str: string, start: string) => {
+    return str.startsWith(start);
+  };
+
+  setImagePreview = (file: File): string => {
+    return URL.createObjectURL(file);
+  };
+
+  getSize = (bytes: number): string => {
+    if (bytes === 0) return '0 Bytes';
+
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+    return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
+  };
+
+  @action
+  deleteFile(fileToDelete: File) {
+    const currentFiles = this.args.changeset.get(
+      this.args.validationField,
+    ) as File[];
+    const updatedFiles = currentFiles.filter((file) => file !== fileToDelete);
+    this.args.changeset.set(this.args.validationField, updatedFiles);
+  }
+
+  async downloadFile(file: File) {
+    window.open(URL.createObjectURL(file));
+  }
+
+  <template>
+    <div class='tpk-file-list-list {{if @disabled "disabled"}}'>
+      {{#each (this.changesetGet this.args.validationField) as |file|}}
+        <div class='tpk-file-list-list-item'>
+          <div class='tpk-file-list-list-item-preview'>
+            {{#if (this.startWith file.type 'image/')}}
+              <img src={{this.setImagePreview file}} alt={{file.name}} />
+            {{else}}
+              <img src='/document.svg' alt='document' />
+            {{/if}}
+          </div>
+          <div class='tpk-file-list-list-item-content'>
+            <h4 class='tpk-file-list-list-item-content-name'>
+              {{file.name}}
+            </h4>
+            <h5 class='tpk-file-list-list-item-content-size'>
+              {{this.getSize file.size}}
+            </h5>
+          </div>
+          <div class='tpk-file-list-list-item-action'>
+            {{#unless @disableDownload}}
+              <button
+                type='button'
+                {{on 'click' (fn this.downloadFile file)}}
+                class='tpk-file-list-list-item-action-download'
+              >
+                <img src='/download.svg' alt='download' />
+              </button>
+            {{/unless}}
+            {{#unless @disabled}}
+              <button
+                type='button'
+                {{on 'click' (fn this.deleteFile file)}}
+                class='tpk-file-list-list-item-action-delete'
+              >
+                <img src='/delete.svg' alt='delete' />
+              </button>
+            {{/unless}}
+          </div>
+        </div>
+      {{/each}}
+    </div>
+  </template>
+}
diff --git a/packages/ember-input-validation/src/components/tpk-validation-file.gts b/packages/ember-input-validation/src/components/tpk-validation-file.gts
index 95643b41..7f0a0877 100644
--- a/packages/ember-input-validation/src/components/tpk-validation-file.gts
+++ b/packages/ember-input-validation/src/components/tpk-validation-file.gts
@@ -3,7 +3,9 @@ import {
   BaseValidationComponent,
   type BaseValidationSignature,
 } from './base.ts';
-import TpkFile, { type TpkFileSignature } from '@triptyk/ember-input/components/tpk-file';
+import TpkFile, {
+  type TpkFileSignature,
+} from '@triptyk/ember-input/components/tpk-file';
 
 import { hash } from '@ember/helper';
 
@@ -35,10 +37,18 @@ export default class TpkValidationFileComponent extends BaseValidationComponent<
     if (this.args.onChange) {
       return this.args.onChange(file);
     }
-    return this.args.changeset.set(
-      this.args.validationField,
-      this.args.multiple === true ? file : file[0],
-    );
+
+    if (this.args.multiple === true) {
+      const currentFiles =
+        (this.args.changeset.get(this.args.validationField) as File[]) ?? [];
+
+      return this.args.changeset.set(this.args.validationField, [
+        ...currentFiles,
+        ...file,
+      ]);
+    } else {
+      return this.args.changeset.set(this.args.validationField, file[0]);
+    }
   }
 
   <template>
diff --git a/packages/ember-input-validation/static/delete.svg b/packages/ember-input-validation/static/delete.svg
new file mode 100644
index 00000000..aa21b59b
--- /dev/null
+++ b/packages/ember-input-validation/static/delete.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+  stroke="currentColor" class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round"
+    d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
+</svg>
\ No newline at end of file
diff --git a/packages/ember-input-validation/static/document.svg b/packages/ember-input-validation/static/document.svg
new file mode 100644
index 00000000..d86d7ffb
--- /dev/null
+++ b/packages/ember-input-validation/static/document.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+  stroke="currentColor" class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round"
+    d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
+</svg>
\ No newline at end of file
diff --git a/packages/ember-input-validation/static/download.svg b/packages/ember-input-validation/static/download.svg
new file mode 100644
index 00000000..7f04b1e0
--- /dev/null
+++ b/packages/ember-input-validation/static/download.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+  stroke="currentColor" class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round"
+    d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" />
+</svg>
\ No newline at end of file
diff --git a/packages/ember-input-validation/static/upload.svg b/packages/ember-input-validation/static/upload.svg
new file mode 100644
index 00000000..0e6c93c9
--- /dev/null
+++ b/packages/ember-input-validation/static/upload.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+  stroke="currentColor" class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round"
+    d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5" />
+</svg>
\ No newline at end of file