FIX: correctly supports dropping image (#29733)

This commit:
- Adds back the target drop options to enable the feature
- Applies the css to every elements and not just the one for admin emojis, also fixes the style as it was flashing and preventing it to work. For now we just change the color of the image icon.
- Adds a test to ensure we don't regress.

app/assets/javascripts/discourse/app/components/uppy-image-uploader.js

@@ -35,6 +35,9 @@ export default class UppyImageUploader extends Component {
       type: this.type,
       additionalParams: this.additionalParams,
       validateUploadedFilesOptions: { imagesOnly: true },
+      uploadDropTargetOptions: () => ({
+        target: document.querySelector(`#${this.id} .uploaded-image-preview`),
+      }),
       uploadDone: (upload) => {
         this.setProperties({
           imageFilesize: upload.human_filesize,

app/assets/javascripts/discourse/tests/integration/components/uppy-image-uploader-test.js

@@ -8,7 +8,7 @@ module("Integration | Component | uppy-image-uploader", function (hooks) {
 
   test("with image", async function (assert) {
     await render(hbs`
-      <UppyImageUploader @type="avatar" @id="test-uppy-image-uploader" @imageUrl="/images/avatar.png" @placeholderUrl="/not/used.png" />
+      <UppyImageUploader @type="avatar" @id="uploader" @imageUrl="/images/avatar.png" @placeholderUrl="/not/used.png" />
     `);
 
     assert.dom(".d-icon-far-image").exists("displays the upload icon");
@@ -29,7 +29,7 @@ module("Integration | Component | uppy-image-uploader", function (hooks) {
 
   test("without image", async function (assert) {
     await render(
-      hbs`<UppyImageUploader @type="site_setting" @id="test-uppy-image-uploader" />`
+      hbs`<UppyImageUploader @type="site_setting" @id="uploader" />`
     );
 
     assert.dom(".d-icon-far-image").exists("displays the upload icon");
@@ -42,7 +42,7 @@ module("Integration | Component | uppy-image-uploader", function (hooks) {
 
   test("with placeholder", async function (assert) {
     await render(
-      hbs`<UppyImageUploader @type="composer" @id="test-uppy-image-uploader" @placeholderUrl="/images/avatar.png" />`
+      hbs`<UppyImageUploader @type="composer" @id="uploader" @placeholderUrl="/images/avatar.png" />`
     );
 
     assert.dom(".d-icon-far-image").exists("displays the upload icon");
@@ -54,4 +54,51 @@ module("Integration | Component | uppy-image-uploader", function (hooks) {
 
     assert.dom(".placeholder-overlay").exists("displays the placeholder image");
   });
+
+  test("when dragging image", async function (assert) {
+    await render(
+      hbs`
+      <UppyImageUploader @type="composer" @id="uploader1" />
+      <UppyImageUploader @type="composer" @id="uploader2" />
+      `
+    );
+
+    const dropImage = (target) => {
+      target = document.querySelector(target);
+      const dataTransfer = new DataTransfer();
+      const file = new File(["dummy content"], "test-image.png", {
+        type: "image/png",
+      });
+      dataTransfer.items.add(file);
+      const dragEnterEvent = new DragEvent("dragenter", { dataTransfer });
+      target.dispatchEvent(dragEnterEvent);
+      const dragOverEvent = new DragEvent("dragover", { dataTransfer });
+      target.dispatchEvent(dragOverEvent);
+
+      return () => {
+        const dragLeaveEvent = new DragEvent("dragleave", { dataTransfer });
+        target.dispatchEvent(dragLeaveEvent);
+      };
+    };
+
+    const leave1 = dropImage("#uploader1 .uploaded-image-preview");
+
+    assert
+      .dom("#uploader1 .uploaded-image-preview")
+      .hasClass("uppy-is-drag-over");
+    assert
+      .dom("#uploader2 .uploaded-image-preview")
+      .hasNoClass("uppy-is-drag-over");
+
+    leave1();
+
+    dropImage("#uploader2 .uploaded-image-preview");
+
+    assert
+      .dom("#uploader2 .uploaded-image-preview")
+      .hasClass("uppy-is-drag-over");
+    assert
+      .dom("#uploader1 .uploaded-image-preview")
+      .hasNoClass("uppy-is-drag-over");
+  });
 });

app/assets/stylesheets/common/admin/admin_emojis.scss

@@ -8,10 +8,6 @@
   #emoji-uploader {
     transition: box-shadow ease-in-out 0.25s;
   }
-  .uppy-is-drag-over {
-    box-shadow: 0 0px 52px 0 #ffffff, 0px 7px 33px 0 var(--tertiary-low);
-    pointer-events: none;
-  }
   #custom_emoji.highlighted {
     background: var(--tertiary-very-low);
     @media (prefers-reduced-motion: no-preference) {

app/assets/stylesheets/common/base/upload.scss

@@ -6,6 +6,13 @@
   width: 100%;
   height: 150px;
   margin-bottom: 0.5em;
+  box-sizing: border-box;
+
+  &.uppy-is-drag-over {
+    .d-icon-far-image {
+      color: var(--success);
+    }
+  }
 
   .meta {
     display: none;