Added Toaster notification message for file(s) fail to be dropped in …

…drop-zone

client/src/components/Upload/DragAndDropModal.vue

@@ -3,8 +3,10 @@ import { useFileDrop } from "composables/fileDrop";
 import { useGlobalUploadModal } from "composables/globalUploadModal";
 import { computed, ref } from "vue";
 
+import { Toast } from "@/composables/toast";
+
 const modalContentElement = ref(null);
-const { isFileOverDocument, isFileOverDropZone } = useFileDrop(modalContentElement, onDrop, true);
+const { isFileOverDocument, isFileOverDropZone } = useFileDrop(modalContentElement, onDrop, onDropFail, true);
 
 const modalClass = computed(() => {
     if (isFileOverDropZone.value) {
@@ -26,6 +28,12 @@ function onDrop(event) {
         });
     }
 }
+
+function onDropFail(event) {
+    if (event.dataTransfer?.files?.length > 0) {
+        Toast.error("Please try again", "File failed");
+    }
+}
 </script>
 
 <template>

client/src/composables/fileDrop.ts

@@ -7,12 +7,14 @@ export type FileDropHandler = (event: DragEvent) => void;
  * Custom File-Drop composable
  * @param dropZone Element which files should be dropped on
  * @param onDrop callback function called when drop occurs
+ * @param onDropFail callback function called when drop fails (missed zone)
  * @param solo when true, only reacts if no modal is open
  * @param idleTime how long to wait until state resets
  */
 export function useFileDrop(
     dropZone: MaybeRefOrGetter<EventTarget | null | undefined>,
     onDrop: Ref<FileDropHandler> | FileDropHandler,
+    onDropFail: Ref<FileDropHandler> | FileDropHandler,
     solo: MaybeRefOrGetter<boolean>,
     idleTime = 800
 ) {
@@ -72,6 +74,9 @@ export function useFileDrop(
                     if (isFileOverDropZone.value) {
                         const dropHandler = unref(onDrop);
                         dropHandler(event as DragEvent);
+                    } else {
+                        const dropFailHandler = unref(onDropFail);
+                        dropFailHandler(event as DragEvent);
                     }
                     return "idle";
                 case "dragend":