From 5faa252461f0b8714111eaf7a6df84f3c3ebc2ed Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andrea.leardini@nethesis.it>
Date: Thu, 6 Jun 2024 10:53:16 +0200
Subject: [PATCH] feat: add accept prop to NeFileInput (#58)

---
 src/components/NeFileInput.vue |  6 ++++--
 stories/NeFileInput.stories.ts | 16 +++++++++++++++-
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/components/NeFileInput.vue b/src/components/NeFileInput.vue
index dee8064..ddb59e4 100644
--- a/src/components/NeFileInput.vue
+++ b/src/components/NeFileInput.vue
@@ -16,6 +16,7 @@ interface FileInputProps {
   dropzoneLabel: string
   progress: number
   showProgress: boolean
+  accept: string | undefined
 }
 
 const props = withDefaults(defineProps<FileInputProps>(), {
@@ -24,7 +25,8 @@ const props = withDefaults(defineProps<FileInputProps>(), {
   invalidMessage: '',
   progress: 0,
   showProgress: false,
-  dropzoneLabel: 'Drag and drop or click to upload'
+  dropzoneLabel: 'Drag and drop or click to upload',
+  accept: undefined
 })
 
 const emit = defineEmits(['update:modelValue', 'select'])
@@ -105,7 +107,7 @@ const dragOverHandler = (event: Event) => {
               {{ dropZoneText }}
             </p>
           </div>
-          <input class="hidden" type="file" />
+          <input class="hidden" type="file" :accept="accept" />
           <!-- progress bar -->
           <NeProgressBar
             v-if="showProgress"
diff --git a/stories/NeFileInput.stories.ts b/stories/NeFileInput.stories.ts
index d34fc30..bbe5c80 100644
--- a/stories/NeFileInput.stories.ts
+++ b/stories/NeFileInput.stories.ts
@@ -14,7 +14,8 @@ const meta = {
     progress: 0,
     showProgress: false,
     dropzoneLabel: 'Drag and drop or click to upload',
-    modelValue: null
+    modelValue: null,
+    accept: undefined
   } // default values
 } satisfies Meta<typeof NeFileInput>
 
@@ -57,3 +58,16 @@ export const Progress: Story = {
   }),
   args: { showProgress: true, progress: 75 }
 }
+
+export const Accept: Story = {
+  render: (args) => ({
+    components: { NeFileInput },
+    setup() {
+      return { args }
+    },
+    template: template
+  }),
+  args: {
+    accept: 'image/*,.pdf'
+  }
+}