Merge pull request #16995 from hujambo-dunia/enhance-drag-drop

Enhance Global Drag-and-Drop feature for Upload component

client/src/components/Upload/DragAndDropModal.vue

@@ -1,10 +1,13 @@
 <script setup>
+import { setIframeEvents } from "components/Upload/utils";
 import { useFileDrop } from "composables/fileDrop";
 import { useGlobalUploadModal } from "composables/globalUploadModal";
-import { computed, ref } from "vue";
+import { computed, ref, watch } from "vue";
+
+import { useToast } from "@/composables/toast";
 
 const modalContentElement = ref(null);
-const { isFileOverDocument, isFileOverDropZone } = useFileDrop(modalContentElement, onDrop, true);
+const { isFileOverDocument, isFileOverDropZone } = useFileDrop(modalContentElement, onDrop, onDropCancel, true);
 
 const modalClass = computed(() => {
     if (isFileOverDropZone.value) {
@@ -16,6 +19,10 @@ const modalClass = computed(() => {
 
 const { openGlobalUploadModal } = useGlobalUploadModal();
 
+const toast = useToast();
+
+const iframesNoInteract = ["galaxy_main", "frame.center-frame"];
+
 function onDrop(event) {
     console.debug(event.dataTransfer);
 
@@ -26,24 +33,43 @@ function onDrop(event) {
         });
     }
 }
+
+function onDropCancel(event) {
+    if (event.dataTransfer?.files?.length > 0) {
+        toast.error("Upload cancelled", "Drop file in the center to upload it");
+    }
+}
+
+watch(isFileOverDocument, (newValue, oldValue) => {
+    if (!oldValue && newValue) {
+        setIframeEvents(iframesNoInteract, true);
+    } else {
+        setIframeEvents(iframesNoInteract, false);
+    }
+});
 </script>
 
 <template>
-    <b-modal v-model="isFileOverDocument" :modal-class="modalClass" hide-header hide-footer centered>
+    <BModal v-model="isFileOverDocument" :modal-class="modalClass" hide-header hide-footer centered>
         <div ref="modalContentElement" class="inner-content h-xl">Drop Files here to Upload</div>
-    </b-modal>
+    </BModal>
 </template>
 
 <style lang="scss">
 @import "theme/blue.scss";
 
 .ui-drag-and-drop-modal {
+    .modal-dialog {
+        width: 100%;
+        max-width: 85%;
+    }
+
     .modal-content {
         background-color: transparent;
         border-radius: 16px;
         border: 6px dashed;
         border-color: $brand-secondary;
-        min-height: 40vh;
+        min-height: 80vh;
 
         .modal-body {
             display: flex;
@@ -61,6 +87,7 @@ function onDrop(event) {
     &.drag-over {
         .modal-content {
             border-color: lighten($brand-info, 30%);
+            background-color: rgba(darken($brand-info, 20%), 0.4);
 
             .inner-content {
                 color: lighten($brand-info, 30%);

client/src/components/Upload/UploadModal.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { setIframeEvents } from "components/Upload/utils";
 import { useConfig } from "composables/config";
 import { useUserHistories } from "composables/userHistories";
 import { storeToRefs } from "pinia";
@@ -59,16 +60,9 @@ async function open(overrideOptions) {
     }
 }
 
-function setIframeEvents(disableEvents) {
-    const element = document.getElementById("galaxy_main");
-    if (element) {
-        element.style["pointer-events"] = disableEvents ? "none" : "auto";
-    }
-}
-
 watch(
     () => showModal.value,
-    (modalShown) => setIframeEvents(modalShown)
+    (modalShown) => setIframeEvents(["galaxy_main"], modalShown)
 );
 
 defineExpose({

client/src/components/Upload/utils.js

@@ -143,3 +143,13 @@ export default {
     getUploadDatatypes,
     getUploadDbKeys,
 };
+
+export function setIframeEvents(elements, disableEvents) {
+    let element;
+    elements.forEach((e) => {
+        element = document.querySelector(`iframe#${e}`);
+        if (element) {
+            element.style.pointerEvents = disableEvents ? "none" : "auto";
+        }
+    });
+}

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 onDropCancel callback function called when drop cancelled
  * @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,
+    onDropCancel: 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 dropCancelHandler = unref(onDropCancel);
+                        dropCancelHandler(event as DragEvent);
                     }
                     return "idle";
                 case "dragend":