refactor(ui5-file-uploader): remove form element and cleanup (#12789)

* File input can reset by assigning `new DataTransfer().files` directly, so there's no need to create an extra `<form>` element.
* An empty file input already returns `null`, so you don't need to create a temporary input element just to retrieve its default value.

Author: nnaydenow

packages/main/src/FileUploader.ts

@@ -304,8 +304,6 @@ class FileUploader extends UI5Element implements IFormInputElement {
 	@property({ type: Boolean, noAttribute: true })
 	_tokenizerOpen = false;
 
-	static emptyInput: HTMLInputElement;
-
 	@i18n("@ui5/webcomponents")
 	static i18nBundle: I18nBundle;
 
@@ -488,18 +486,14 @@ class FileUploader extends UI5Element implements IFormInputElement {
 		this._clearFileSelection();
 	}
 
-	_onFormSubmit(e: SubmitEvent) {
-		e.preventDefault();
-	}
-
 	_openFileBrowser() {
 		this._input.click();
 	}
 
 	_clearFileSelection() {
 		this._selectedFilesNames = [];
 		this.value = "";
-		this._form?.reset();
+		this._input.files = new DataTransfer().files;
 		this.fireDecoratorEvent("change", {
 			files: this.files,
 		});
@@ -515,7 +509,7 @@ class FileUploader extends UI5Element implements IFormInputElement {
 			return this._input.files;
 		}
 
-		return FileUploader._emptyFilesList;
+		return null;
 	}
 
 	onAfterRendering() {
@@ -621,18 +615,6 @@ class FileUploader extends UI5Element implements IFormInputElement {
 		}
 	}
 
-	/**
-	 * in case when the component is not placed in the DOM, return empty FileList, like native input would do
-	 * @private
-	 */
-	static get _emptyFilesList() {
-		if (!this.emptyInput) {
-			this.emptyInput = document.createElement("input");
-			this.emptyInput.type = "file";
-		}
-		return this.emptyInput.files;
-	}
-
 	get accInfo(): InputAccInfo {
 		return {
 			"ariaRoledescription": FileUploader.i18nBundle.getText(FILEUPLOADER_ROLE_DESCRIPTION),

packages/main/src/FileUploaderTemplate.tsx

@@ -20,7 +20,7 @@ export default function FileUploaderTemplate(this: FileUploader) {
 				onDragOver={this._ondrag}
 				onDrop={this._ondrop}
 			>
-				<form class="ui5-file-uploader-form" onSubmit={this._onFormSubmit}>
+				<div class="ui5-file-uploader-form">
 					<input
 						type="file"
 						class="ui5-file-uploader-native-input"
@@ -39,7 +39,7 @@ export default function FileUploaderTemplate(this: FileUploader) {
 						onChange={this._onChange}
 						data-sap-focus-ref
 					/>
-				</form>
+				</div>
 
 				{this.hideInput ? (
 					<slot></slot>