Merge branch 'forgetful-file-input' of Arnei/opencast-admin-interface into r/19.x

gregorydlogan · gregorydlogan · commit fa26e416f976 · 2026-03-18T11:31:26.000-06:00
Pull request #1529 Fixes #946 Fix input element not displaying file in Create Event
diff --git 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
@@ -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
@@ -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
@@ -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;
-}
