From 4297e7395b00b5b5dc5a46b3721ee9d637dfa409 Mon Sep 17 00:00:00 2001
From: Kabin <kabin@dzangolab.com>
Date: Fri, 17 Jan 2025 09:56:36 +0545
Subject: [PATCH] feat: add multiple and dropzone demo for file input

---
 apps/demo/src/locales/en/form.json           |  3 +
 apps/demo/src/locales/fr/form.json           |  3 +
 apps/demo/src/views/Form/fileInput/Index.vue | 60 ++++++++++++++++++++
 3 files changed, 66 insertions(+)

diff --git a/apps/demo/src/locales/en/form.json b/apps/demo/src/locales/en/form.json
index a7cccacd..8591258a 100644
--- a/apps/demo/src/locales/en/form.json
+++ b/apps/demo/src/locales/en/form.json
@@ -73,6 +73,8 @@
     "disableWeekDays": "Disable week days",
     "disabledMultiSelect": "Disabled multiselect",
     "disableSort": "Disable alphabetical sorting",
+    "dropzone": "Dropzone",
+    "dropzoneOptions": "Dropzone Options",
     "editableContent": "Editable content",
     "email": "Email",
     "expiresAfter": "Expires after",
@@ -97,6 +99,7 @@
     "monthPicker": "Month picker",
     "multiCalendars": "Multicalendar",
     "multiCheckbox": "Multiple checkbox input",
+    "multiple": "Multiple files",
     "multiSelect": "Multiselect",
     "next": "Next",
     "number": "Number",
diff --git a/apps/demo/src/locales/fr/form.json b/apps/demo/src/locales/fr/form.json
index 5b07311d..14a21d60 100644
--- a/apps/demo/src/locales/fr/form.json
+++ b/apps/demo/src/locales/fr/form.json
@@ -70,6 +70,8 @@
     "disabled": "Disabled[fr]",
     "disableWeekDays": "Disable week days[fr]",
     "disableSort": "Disable alphabetical sorting",
+    "dropzone": "Dropzone",
+    "dropzoneOptions": "Dropzone Options",
     "editableContent": "Editable content",
     "email": "Email[fr]",
     "expiresAfter": "Expires after",
@@ -94,6 +96,7 @@
     "monthPicker": "Month picker[fr]",
     "multiCalendars": "Multicalendar[fr]",
     "multiCheckbox": "Multiple checkbox input",
+    "multiple": "Multiple files",
     "multiSelect": "Multiselect[fr]",
     "next": "Next",
     "number": "Number[fr]",
diff --git a/apps/demo/src/views/Form/fileInput/Index.vue b/apps/demo/src/views/Form/fileInput/Index.vue
index 86c06db3..57ffe8df 100644
--- a/apps/demo/src/views/Form/fileInput/Index.vue
+++ b/apps/demo/src/views/Form/fileInput/Index.vue
@@ -45,6 +45,66 @@
         <!-- eslint-enable -->
       </div>
     </section>
+
+    <section>
+      <h2>{{ $t("form.label.dropzoneOptions") }}</h2>
+
+      <div class="section-content">
+        <FileInput
+          :dropzone-options="{
+            accept: ['image/jpeg', 'image/png'],
+            minSize: 1000,
+            maxSize: 1000000,
+          }"
+          enable-description
+          input-method="dropzone"
+          name="images"
+          show-error-message
+        />
+
+        <!-- eslint-disable -->
+        <SshPre language="html-vue">
+          &lt;template&gt;
+            &lt;FileInput input-method="dropzone" /&gt;
+          &lt;/template&gt;
+
+          &lt;script setup lang="ts"&gt;
+          import { FileInput } from "@dzangolab/vue3-form";
+          &lt;/script&gt;
+        </SshPre>
+        <!-- eslint-enable -->
+      </div>
+    </section>
+
+    <section>
+      <h2>{{ $t("form.label.multiple") }}</h2>
+
+      <div class="section-content">
+        <FileInput
+          :dropzone-options="{
+            accept: ['image/jpeg', 'image/png'],
+            maxFiles: 5,
+          }"
+          enable-description
+          input-method="dropzone"
+          multiple
+          name="files"
+          show-error-message
+        />
+
+        <!-- eslint-disable -->
+        <SshPre language="html-vue">
+          &lt;template&gt;
+            &lt;FileInput input-method="dropzone" /&gt;
+          &lt;/template&gt;
+
+          &lt;script setup lang="ts"&gt;
+          import { FileInput } from "@dzangolab/vue3-form";
+          &lt;/script&gt;
+        </SshPre>
+        <!-- eslint-enable -->
+      </div>
+    </section>
   </FormPage>
 </template>