From e37f0eb240f6a8614a4dc4240df0a2ceeaa5e3a7 Mon Sep 17 00:00:00 2001
From: Martin Brennan <mjrbrennan@gmail.com>
Date: Wed, 15 Dec 2021 15:43:07 +1000
Subject: [PATCH] DEV: Add DropTarget options function for Uppy mixins (#15307)

This is so the target element for file drag + drop is
not always just this.element for the component, and
provides a way to hook into onDragOver and onDragLeave.
By default also adds a .uppy-is-drag-over class to the target
element.
---
 .../discourse/app/mixins/composer-upload-uppy.js     | 12 +++++++++++-
 .../javascripts/discourse/app/mixins/uppy-upload.js  | 12 +++++++++++-
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/mixins/composer-upload-uppy.js b/app/assets/javascripts/discourse/app/mixins/composer-upload-uppy.js
index badd1590abe..90bc04e681b 100644
--- a/app/assets/javascripts/discourse/app/mixins/composer-upload-uppy.js
+++ b/app/assets/javascripts/discourse/app/mixins/composer-upload-uppy.js
@@ -429,7 +429,7 @@ export default Mixin.create(ExtendableUploader, UppyS3Multipart, {
   },
 
   _setupUIPlugins() {
-    this._uppyInstance.use(DropTarget, { target: this.element });
+    this._uppyInstance.use(DropTarget, this._uploadDropTargetOptions());
   },
 
   _uploadFilenamePlaceholder(file) {
@@ -584,4 +584,14 @@ export default Mixin.create(ExtendableUploader, UppyS3Multipart, {
   _resetUploadFilenamePlaceholder() {
     this.set("uploadFilenamePlaceholder", null);
   },
+
+  // target must be provided as a DOM element, however the
+  // onDragOver and onDragLeave callbacks can also be provided.
+  // it is advisable to debounce/add a setTimeout timer when
+  // doing anything in these callbacks to avoid jumping. uppy
+  // also adds a .uppy-is-drag-over class to the target element by
+  // default onDragOver and removes it onDragLeave
+  _uploadDropTargetOptions() {
+    return { target: this.element };
+  },
 });
diff --git a/app/assets/javascripts/discourse/app/mixins/uppy-upload.js b/app/assets/javascripts/discourse/app/mixins/uppy-upload.js
index 84ca638dfb2..e37353001f1 100644
--- a/app/assets/javascripts/discourse/app/mixins/uppy-upload.js
+++ b/app/assets/javascripts/discourse/app/mixins/uppy-upload.js
@@ -138,7 +138,7 @@ export default Mixin.create(UppyS3Multipart, {
       },
     });
 
-    this._uppyInstance.use(DropTarget, { target: this.element });
+    this._uppyInstance.use(DropTarget, this._uploadDropTargetOptions());
     this._uppyInstance.use(UppyChecksum, { capabilities: this.capabilities });
 
     this._uppyInstance.on("progress", (progress) => {
@@ -353,4 +353,14 @@ export default Mixin.create(UppyS3Multipart, {
       this.inProgressUploads.filter((upl) => upl.id !== fileId)
     );
   },
+
+  // target must be provided as a DOM element, however the
+  // onDragOver and onDragLeave callbacks can also be provided.
+  // it is advisable to debounce/add a setTimeout timer when
+  // doing anything in these callbacks to avoid jumping. uppy
+  // also adds a .uppy-is-drag-over class to the target element by
+  // default onDragOver and removes it onDragLeave
+  _uploadDropTargetOptions() {
+    return { target: this.element };
+  },
 });