feat: add append mode to file input

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

Hide file tree

Showing 4 changed files with 92 additions and 3 deletions.
diff --git a/apps/demo/src/locales/en/form.json b/apps/demo/src/locales/en/form.json
@@ -44,6 +44,7 @@
   },
   "label": {
     "accept": "Accept the terms and conditions to proceed",
+    "append": "Append mode",
     "appointmentDate": "Appointment date",
     "appointmentTime": "Appointment time",
     "arrivalDate": "Arrival date",

diff --git a/apps/demo/src/locales/fr/form.json b/apps/demo/src/locales/fr/form.json
@@ -41,6 +41,7 @@
   },
   "label": {
     "accept": "Accept the terms and conditions to proceed",
+    "append": "Append mode",
     "appointmentDate": "Appointment date[fr]",
     "appointmentTime": "Appointment time[fr]",
     "arrivalDate": "Arrival date[fr]",

diff --git a/apps/demo/src/views/Form/fileInput/Index.vue b/apps/demo/src/views/Form/fileInput/Index.vue
@@ -65,7 +65,17 @@
         <!-- eslint-disable -->
         <SshPre language="html-vue">
           &lt;template&gt;
-            &lt;FileInput input-method="dropzone" /&gt;
+            &lt;FileInput
+              :dropzone-options="{
+                accept: ['image/jpeg', 'image/png'],
+                minSize: 1000,
+                maxSize: 1000000,
+              }"
+              enable-description
+              input-method="dropzone"
+              name="images"
+              show-error-message
+            /&gt;
           &lt;/template&gt;
 
           &lt;script setup lang="ts"&gt;
@@ -95,7 +105,51 @@
         <!-- eslint-disable -->
         <SshPre language="html-vue">
           &lt;template&gt;
-            &lt;FileInput input-method="dropzone" /&gt;
+            &lt;FileInput
+              :dropzone-options="{
+                accept: ['image/jpeg', 'image/png'],
+                maxFiles: 5,
+              }"
+              enable-description
+              input-method="dropzone"
+              multiple
+              name="files"
+              show-error-message
+            /&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.append") }}</h2>
+
+      <div class="section-content">
+        <FileInput
+          enable-description
+          input-method="dropzone"
+          mode="append"
+          multiple
+          name="files"
+          show-error-message
+        />
+
+        <!-- eslint-disable -->
+        <SshPre language="html-vue">
+          &lt;template&gt;
+            &lt;FileInput
+              enable-description
+              input-method="dropzone"
+              mode="append"
+              multiple
+              name="files"
+              show-error-message
+            /&gt;
           &lt;/template&gt;
 
           &lt;script setup lang="ts"&gt;

diff --git a/packages/vue-form/src/components/File/FileInput.vue b/packages/vue-form/src/components/File/FileInput.vue
@@ -97,6 +97,11 @@ const props = defineProps({
     default: undefined,
     type: String,
   },
+  mode: {
+    default: "update",
+    type: String,
+    validator: (value: string) => ["append", "update"].includes(value),
+  },
   multiple: Boolean,
   name: {
     default: "file",
@@ -123,7 +128,35 @@ const onDrop = (
   acceptFiles: FileExtended[],
   rejectReasons: FileRejectReason[],
 ) => {
-  inputFiles.value = acceptFiles.length ? acceptFiles : [];
+  if (!props.multiple || props.mode === "update") {
+    inputFiles.value = acceptFiles.length ? acceptFiles : [];
+  } else {
+    const newFiles = [...(acceptFiles || []), ...inputFiles.value];
+
+    const uniqueFiles = newFiles.reduce(
+      (previousUniqueFiles: FileExtended[], currentFile) => {
+        const currentFileEntries = Object.entries(currentFile);
+
+        if (
+          previousUniqueFiles.find((existingFile: FileExtended) => {
+            const existingFileEntries = Object.entries(existingFile);
+            return existingFileEntries.every(
+              ([key, value], index) =>
+                key === currentFileEntries[index][0] &&
+                value === currentFileEntries[index][1],
+            );
+          })
+        ) {
+          return previousUniqueFiles;
+        } else {
+          return [...previousUniqueFiles, currentFile];
+        }
+      },
+      [],
+    );
+
+    inputFiles.value = uniqueFiles;
+  }
 
   const firstError = rejectReasons[0]?.errors[0];
   errorMessage.value =