feat: add accept prop to NeFileInput (#58)

nethesis · Jun 6, 2024 · 5faa252 · 5faa252
1 parent 7bdd4b9
commit 5faa252
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 3 deletions.
diff --git 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
@@ -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'
+  }
+}