implement dropzone

radek00 · Jul 23, 2023 · c7bda99 · c7bda99
1 parent 7767d36
commit c7bda99
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 8 deletions.
diff --git a/SecureSend/ClientApp/src/components/FileUploadForm/FileInput.vue b/SecureSend/ClientApp/src/components/FileUploadForm/FileInput.vue
@@ -3,16 +3,30 @@ import UploadIcon from "@/assets/icons/UploadIcon.vue";
 import FileCard from "../FileCard.vue";
 import LoadingIndicator from "@/components/LoadingIndicator.vue";
 import CheckIcon from "@/assets/icons/CheckIcon.vue";
+import { ref } from "vue";
+import { useDropZone } from "@/utils/composables/useDropZone";
 
-defineEmits(["onFielsChange"]);
+const emit = defineEmits(["onFielsChange"]);
 
 defineProps<{
   files: Map<File, number | string | boolean>;
 }>();
+
+const fileDropZone = ref<HTMLElement>();
+
+const onDrop = (files: File[] | null) => {
+  emit("onFielsChange", files);
+};
+
+const { isOverDropZone } = useDropZone(fileDropZone, {onDrop});
 </script>
 
 <template>
-  <div v-if="!files.size" class="flex items-center justify-center w-full">
+  <div
+    v-if="!files.size"
+    class="flex items-center justify-center w-full"
+    ref="fileDropZone"
+  >
     <label
       for="dropzone-file"
       class="flex flex-col items-center justify-center w-full h-64 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600"
@@ -24,7 +38,9 @@ defineProps<{
         </p>
       </div>
       <input
-        @change="$emit('onFielsChange', $event)"
+        @change="
+          $emit('onFielsChange', ($event.target as HTMLInputElement).files)
+        "
         id="dropzone-file"
         type="file"
         class="hidden"

diff --git a/SecureSend/ClientApp/src/views/FileUploadView.vue b/SecureSend/ClientApp/src/views/FileUploadView.vue
@@ -16,7 +16,7 @@
     <div v-if="step === 2">
       <FileInput
         :files="files"
-        @on-fiels-change="onFilesChange($event.target)"
+        @on-fiels-change="(value) => onFilesChange(value)"
       ></FileInput>
     </div>
     <div
@@ -166,11 +166,11 @@ const copyToClipboard = () => {
   openSuccess("Link copied to clipboard");
 };
 
-const onFilesChange = (event: HTMLInputElement) => {
+const onFilesChange = (formFiles: File[]) => {
   files.value.clear();
-  if (event.files) {
-    for (let i = 0; i < event.files.length; i++) {
-      const file = event.files[i];
+  if (formFiles) {
+    for (let i = 0; i < formFiles.length; i++) {
+      const file = formFiles[i];
 
       files.value.set(file, 0);
     }