fix(ui5-upload-collection): fire drop only when files are dropped within dnd overlay (#2527)

Author: georgimkv

packages/fiori/src/UploadCollection.hbs

@@ -1,4 +1,4 @@
-<div class="ui5-uc-root">
+<div class="ui5-uc-root" @drop="{{_ondrop}}">
 	<div class="ui5-uc-header">
 		<slot name="header"></slot>
 	</div>
@@ -24,7 +24,6 @@
 				@dragenter="{{_ondragenter}}"
 				@dragleave="{{_ondragleave}}"
 				@dragover="{{_ondragover}}"
-				@drop="{{_ondrop}}"
 			>
 				<ui5-icon name="upload-to-cloud"></ui5-icon>
 				<span class="dnd-overlay-text">{{_dndOverlayText}}</span>

packages/fiori/src/UploadCollection.js

@@ -125,6 +125,18 @@ const metadata = {
 		},
 	},
 	events: /** @lends sap.ui.webcomponents.fiori.UploadCollection.prototype */ {
+		/**
+		 * Fired when an element is dropped inside the drag and drop overlay.
+		 * <br><br>
+		 * <b>Note:</b> The <code>drop</code> event is fired only when elements are dropped within the drag and drop overlay and ignored for the other parts of the <code>ui5-upload-collection</code>.
+		 *
+		 * @event sap.ui.webcomponents.fiori.UploadCollection#drop
+		 * @readonly
+		 * @param {DataTransfer} dataTransfer The <code>drop</code> event operation data.
+		 * @public
+		 */
+		drop: {},
+
 		/**
 		 * Fired when the Delete button of any item is pressed.
 		 * <br><br>
@@ -250,6 +262,10 @@ class UploadCollection extends UI5Element {
 			return;
 		}
 
+		if (event.target !== this.shadowRoot.querySelector(".uc-dnd-overlay")) {
+			event.stopPropagation();
+		}
+
 		this._dndOverlayMode = UploadCollectionDnDOverlayMode.None;
 	}