diff --git a/aform/package.json b/aform/package.json
index 538749f8..46bd9bd6 100644
--- a/aform/package.json
+++ b/aform/package.json
@@ -46,7 +46,8 @@
 		"@stonecrop/themes": "workspace:*",
 		"@stonecrop/utilities": "workspace:*",
 		"uuid": "^9.0.0",
-		"vue": "^3.4.23"
+		"vue": "^3.4.23",
+		"@vueuse/core": "^9.13.0"
 	},
 	"devDependencies": {
 		"@histoire/plugin-vue": "^0.17.17",
diff --git a/aform/src/components/form/AFileAttach.vue b/aform/src/components/form/AFileAttach.vue
new file mode 100644
index 00000000..df10fa3e
--- /dev/null
+++ b/aform/src/components/form/AFileAttach.vue
@@ -0,0 +1,31 @@
+<template>
+  <button type="button" @click="open()">
+    {{ props.label }}
+  </button> &nbsp;
+  <button type="button" :disabled="!files" @click="reset()">
+    Reset
+  </button>
+
+  <template v-if="files">
+    <div>
+      <p>You have selected: <b>{{ `${files.length} ${files.length === 1 ? 'file' : 'files'}` }}</b></p>
+      <li v-for="file of files" :key="file.name">
+        {{ file.name }}
+      </li>
+    </div>
+  </template>
+</template>
+
+<script setup lang="ts">
+import { useFileDialog } from '@vueuse/core'
+import { SchemaTypes } from 'types/index';
+
+const props = defineProps<{
+  schema: SchemaTypes[]
+  label: string
+  collapsible?: boolean
+  data?: any
+}>()
+
+const { files, open, reset } = useFileDialog()
+</script>
\ No newline at end of file
diff --git a/aform/src/histoire.setup.ts b/aform/src/histoire.setup.ts
index d8875bed..6c9997b4 100644
--- a/aform/src/histoire.setup.ts
+++ b/aform/src/histoire.setup.ts
@@ -5,6 +5,8 @@ import AFieldset from '@/components/form/AFieldset.vue'
 import AForm from '@/components/AForm.vue'
 import ANumericInput from '@/components/form/ANumericInput.vue'
 import ATextInput from '@/components/form/ATextInput.vue'
+import AFileAttach from '@/components/form/AFileAttach.vue'
+
 
 import { ATable, ATableHeader, ATableModal } from '@stonecrop/atable'
 import '@stonecrop/atable/styles'
@@ -19,4 +21,5 @@ export const setupVue3 = defineSetupVue3(({ app }) => {
 	app.component('ATableHeader', ATableHeader)
 	app.component('ATableModal', ATableModal)
 	app.component('ATextInput', ATextInput)
+	app.component('AFileAttach', AFileAttach)
 })
diff --git a/aform/src/index.ts b/aform/src/index.ts
index 74554cb5..25931e77 100644
--- a/aform/src/index.ts
+++ b/aform/src/index.ts
@@ -8,6 +8,7 @@ import AFieldset from '@/components/form/AFieldset.vue'
 import AForm from '@/components/AForm.vue'
 import ANumericInput from '@/components/form/ANumericInput.vue'
 import ATextInput from '@/components/form/ATextInput.vue'
+import AFileAttach from '@/components/form/AFileAttach.vue'
 // import { ACurrency } from '@/components/form/ACurrency.vue'
 // import { AQuantity } from '@/components/form/AQuantity.vue'
 
@@ -20,8 +21,9 @@ function install(app: App /* options */) {
 	app.component('AForm', AForm)
 	app.component('ANumericInput', ANumericInput)
 	app.component('ATextInput', ATextInput)
+	app.component('AFileAttach', AFileAttach)
 	// app.component('ACurrency', ACurrency)
 	// app.component('AQuantity', AQuantity)
 }
 
-export { ACheckbox, AComboBox, ADate, ADropdown, AFieldset, AForm, ANumericInput, ATextInput, install }
+export { ACheckbox, AComboBox, ADate, ADropdown, AFieldset, AForm, ANumericInput, ATextInput, AFileAttach, install }
diff --git a/aform/stories/assets/basic_form_schema.json b/aform/stories/assets/basic_form_schema.json
index fd09981e..8df0fc2e 100644
--- a/aform/stories/assets/basic_form_schema.json
+++ b/aform/stories/assets/basic_form_schema.json
@@ -37,5 +37,10 @@
 		"component": "ATextInput",
 		"label": "Phone",
 		"mask": "(locale) => { if (locale === 'en-US') { return '(###) ###-####' } else if (locale === 'en-IN') { return '####-######'} }"
+	},
+	{
+		"fieldname": "attach_file",
+		"component": "AFileAttach",
+		"label": "Attach Files"
 	}
 ]
diff --git a/atable/src/histoire.setup.ts b/atable/src/histoire.setup.ts
index d5a19b6e..6c86c499 100644
--- a/atable/src/histoire.setup.ts
+++ b/atable/src/histoire.setup.ts
@@ -7,7 +7,7 @@ import ATable from '@/components/ATable.vue'
 import ATableHeader from '@/components/ATableHeader.vue'
 import ATableModal from '@/components/ATableModal.vue'
 
-import { ADate, AForm, ANumericInput, ATextInput } from '@stonecrop/aform'
+import { ADate, AForm, ANumericInput, ATextInput, AFileAttach } from '@stonecrop/aform'
 
 export const setupVue3 = defineSetupVue3(({ app }) => {
 	// TODO: (typing) add typing for ADate
@@ -21,4 +21,5 @@ export const setupVue3 = defineSetupVue3(({ app }) => {
 	app.component('ATableHeader', ATableHeader)
 	app.component('ATableModal', ATableModal)
 	app.component('ATextInput', ATextInput)
+	app.component('AFileAttach', AFileAttach)
 })
diff --git a/atable/stories/list.story.vue b/atable/stories/list.story.vue
index b43f894c..abfd176e 100644
--- a/atable/stories/list.story.vue
+++ b/atable/stories/list.story.vue
@@ -156,6 +156,11 @@ const basic_form_schema = ref([
 		component: 'ATextInput',
 		label: 'Phone',
 	},
+	{
+		fieldname: "attach_file",
+		component: "AFileAttach",
+		label: "Attach Files"
+	}
 ])
 
 const http_logs = ref({
diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml
index e083a5fa..ea571d27 100644
--- a/common/config/rush/pnpm-lock.yaml
+++ b/common/config/rush/pnpm-lock.yaml
@@ -16,6 +16,9 @@ importers:
       '@stonecrop/utilities':
         specifier: workspace:*
         version: link:../utilities
+      '@vueuse/core':
+        specifier: ^9.13.0
+        version: 9.13.0(vue@3.4.23)
       uuid:
         specifier: ^9.0.0
         version: 9.0.1