feat: add multiple and dropzone demo for file input

dzangolab · Jan 17, 2025 · 4297e73 · 4297e73
1 parent d6f59b3
commit 4297e73
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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>