fix(ui5-file-uploader): adjust drop area (#8828)

Issue:
- A file could be dragged over a very small transparent area representing
the inner input type file. That would mean that the same file couldn't be
dropped over the most of the visible ui5-file-uploader DOM.
Solution:
- Dragged files will be dropped over the root component area.

Fixes: #8572

packages/main/src/FileUploader.hbs

@@ -7,6 +7,8 @@
 	@keydown="{{_onkeydown}}"
 	@keyup="{{_onkeyup}}"
 	@click="{{_onclick}}"
+	@dragover="{{_ondrag}}"
+	@drop="{{_ondrop}}"
 >
 	<div class="ui5-file-uploader-mask">
 		{{#unless hideInput}}

packages/main/src/FileUploader.ts

@@ -253,6 +253,25 @@ class FileUploader extends UI5Element implements IFormElement {
 		}
 	}
 
+	_ondrag(e: DragEvent) {
+		e.preventDefault();
+		e.stopPropagation();
+	}
+
+	_ondrop(e: DragEvent) {
+		e.preventDefault();
+		e.stopPropagation();
+		const files = e.dataTransfer?.files;
+
+		if (files) {
+			this._input.files = files;
+			this._updateValue(files);
+			this.fireEvent<FileUploaderChangeEventDetail>("change", {
+				files,
+			});
+		}
+	}
+
 	_onfocusin() {
 		this.focused = true;
 	}