From 7185e60fb0686f0c60d12c65ad4ec43aff215f41 Mon Sep 17 00:00:00 2001
From: Arnei <arnewilken@yahoo.de>
Date: Tue, 17 Mar 2026 14:46:53 +0100
Subject: [PATCH] Fix input element not displaying file in Create Event

If you open the create event modal and upload a file in the source tab,
switch to a different tab and then switch back to the source tab,
the name of the uploaded file will not be displayed, even though the
file is actually uploaded.
While this is just a visual bug, it can be very confusing for users.

This patch fixes the issue by adding some html and css to fake
the look of an input dialog, instead of relying on the native
implementation. This gives us full control of what the user sees.
Afaik it is also necessary, because browsers will not allow feeding
an exisiting file handle into a file
upload input.
---
 .../ModalTabsAndPages/NewSourcePage.tsx       | 33 ++++++++++++++----
 .../adminui/languages/lang-en_US.json         |  3 ++
 src/styles/components/_inputs.scss            | 34 +++++++++++++++++++
 src/styles/main.scss                          |  7 ----
 4 files changed, 64 insertions(+), 13 deletions(-)

diff --git a/src/components/events/partials/ModalTabsAndPages/NewSourcePage.tsx b/src/components/events/partials/ModalTabsAndPages/NewSourcePage.tsx
index 2bfedc4ae3..d151e6c8ee 100644
--- a/src/components/events/partials/ModalTabsAndPages/NewSourcePage.tsx
+++ b/src/components/events/partials/ModalTabsAndPages/NewSourcePage.tsx
@@ -277,18 +277,39 @@ const Upload = <T extends RequiredFormPropsUpload>({
 												</p>
 											</td>
 											<td>
-												<div className="file-upload">
+												<div
+													className="fake-file-input blue-btn"
+													role="button"
+													tabIndex={0}
+													onClick={() => document.getElementById(asset.id)?.click()}
+													onKeyDown={e => {
+														if (e.key === "Enter" || e.key === " ") {
+															e.preventDefault();
+															document.getElementById(asset.id)?.click();
+														}
+													}}
+													aria-label={t("EVENTS.EVENTS.NEW.SOURCE.UPLOAD.ARIA_FILE_PICKER")}
+												>
+													<span className="file-button">
+														{t("EVENTS.EVENTS.NEW.SOURCE.UPLOAD.FILE_PICKER")}
+													</span>
+
+													<span className="file-text">
+														{asset.file && asset.file.length > 0
+															? asset.file[0].name
+															: t("EVENTS.EVENTS.NEW.SOURCE.UPLOAD.NO_FILE_PICKED")}
+													</span>
+
 													<input
 														id={asset.id}
-														className="blue-btn file-select-btn"
+														type="file"
+														name={`uploadAssetsTrack.${key}.file`}
+														hidden
 														accept={asset.accept}
+														multiple={asset.multiple}
 														onChange={e =>
 															handleChange(e, `uploadAssetsTrack.${key}.file`)
 														}
-														type="file"
-														multiple={asset.multiple}
-														name={`uploadAssetsTrack.${key}.file`}
-														tabIndex={0}
 													/>
 												</div>
 											</td>
diff --git a/src/i18n/org/opencastproject/adminui/languages/lang-en_US.json b/src/i18n/org/opencastproject/adminui/languages/lang-en_US.json
index 875c235f63..48c6ab976a 100644
--- a/src/i18n/org/opencastproject/adminui/languages/lang-en_US.json
+++ b/src/i18n/org/opencastproject/adminui/languages/lang-en_US.json
@@ -526,6 +526,9 @@
 						"CAPTION": "Upload",
 						"RECORDING_ELEMENTS": "Recording elements",
 						"RECORDING_METADATA": "Recording metadata",
+						"FILE_PICKER": "Upload file...",
+						"NO_FILE_PICKED": "No file chosen",
+						"ARIA_FILE_PICKER": "Upload file",
 						"SEGMENTABLE": {
 							"SHORT": "Presentation",
 							"DETAIL": "The file contains a recording of a what is shown to an audience (Keynote, Powerpoint, etc)."
diff --git a/src/styles/components/_inputs.scss b/src/styles/components/_inputs.scss
index a2a98aad2a..0a20c7f84b 100644
--- a/src/styles/components/_inputs.scss
+++ b/src/styles/components/_inputs.scss
@@ -226,3 +226,37 @@ input[type="radio"].ios {
 
 }
 
+/**
+ * Fake upload for create event dialog
+ */
+.fake-file-input {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-width: 256px;
+  max-width: 320px;
+  max-height: 34px;
+}
+
+/* Left button */
+.file-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  max-height: 22px;
+  background: variables.$modal-nav-bg-color;
+  border: 1px solid variables.$main-border-color;
+  border-radius: 4px;
+  padding: 0px 8px;
+  color: variables.$color-black;
+  margin-right: 8px;
+  white-space: nowrap;
+}
+
+/* Right text */
+.file-text {
+  color: variables.$color-white;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 0e1c32bd06..5a6bcb3eb6 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -155,10 +155,3 @@ select {
 input.disabled, select.disabled {
   background: variables.$modal-nav-bg-color;
 }
-
-// Use HTML5 input field for file upload
-.file-upload > input[type="file"] {
-  width: 100%;
-  visibility: visible !important;
-  text-align: left;
-}