Show existing files for exisiting themes

The theme details would not show already uploaded files.
This patch fixes that.

Author: Arnei

src/components/configuration/partials/wizard/BumperPage.tsx

@@ -93,6 +93,7 @@ const BumperPage = <T extends RequiredFormProps>({
 								acceptableTypes="video/*"
 								fileId={!isTrailer ? "bumperFile" : "trailerFile"}
 								fileName={!isTrailer ? "bumperFileName" : "trailerFileName"}
+								fileUrlKey={!isTrailer ? "bumperFileUrl" : "trailerFileUrl"}
 								formik={formik}
 								buttonKey="CONFIGURATION.THEMES.DETAILS.BUMPER.UPLOAD_BUTTON"
 								labelKey="CONFIGURATION.THEMES.DETAILS.BUMPER.UPLOAD_LABEL"

src/components/configuration/partials/wizard/TitleSlidePage.tsx

@@ -98,6 +98,7 @@ const TitleSlidePage = <T extends RequiredFormProps>({
 									acceptableTypes="image/*"
 									fileId="titleSlideBackground"
 									fileName="titleSlideBackgroundName"
+									fileUrlKey="titleSlideBackgroundUrl"
 									formik={formik}
 									labelKey="CONFIGURATION.THEMES.DETAILS.TITLE.UPLOAD_LABEL"
 									buttonKey="CONFIGURATION.THEMES.DETAILS.TITLE.UPLOAD_BUTTON"

src/components/configuration/partials/wizard/WatermarkPage.tsx

@@ -78,6 +78,7 @@ const WatermarkPage = <T extends RequiredFormProps>({
 									acceptableTypes="image/*"
 									fileId="watermarkFile"
 									fileName="watermarkFileName"
+									fileUrlKey="watermarkFileUrl"
 									formik={formik}
 									buttonKey="CONFIGURATION.THEMES.DETAILS.WATERMARK.UPLOAD_BUTTON"
 									labelKey="CONFIGURATION.THEMES.DETAILS.WATERMARK.UPLOAD_LABEL"

src/components/shared/wizard/FileUpload.tsx

@@ -23,6 +23,7 @@ const FileUpload = <T extends RequiredFormProps>({
 	acceptableTypes,
 	fileId,
 	fileName,
+	fileUrlKey,
 	formik,
 	isEdit,
 }: {
@@ -32,6 +33,7 @@ const FileUpload = <T extends RequiredFormProps>({
 	acceptableTypes: string,
 	fileId: string,
 	fileName: string,
+	fileUrlKey: string,
 	formik: FormikProps<T>,
 	isEdit?: boolean,
 }) => {
@@ -46,6 +48,16 @@ const FileUpload = <T extends RequiredFormProps>({
 	// reference used for activating file input when button is clicked
 	const hiddenFileInput = useRef<HTMLInputElement>(null);
 
+	const existingFileUrl = fileUrlKey ? formik.values[fileUrlKey] as string : undefined;
+
+	const displayName = file
+		? file.name
+		: (formik.values[fileName] as string);
+
+	const displayUrl = file
+		? URL.createObjectURL(file)
+		: existingFileUrl;
+
 	// Trigger formik validation
 	// Setting formik fields in a promise callback does not trigger formik
 	// validation (or at the very least, does not trigger it with the new
@@ -62,6 +74,9 @@ const FileUpload = <T extends RequiredFormProps>({
 		setLoaded(0);
 		formik.setFieldValue(fileId, "");
 		formik.setFieldValue(fileName, "");
+		if (fileUrlKey) {
+			formik.setFieldValue(fileUrlKey, "");
+		}
 	};
 
 	// upload file to backend
@@ -120,11 +135,11 @@ const FileUpload = <T extends RequiredFormProps>({
 					<div className="content-container">
 						{/* If user already uploaded a file, its name and a delete button is rendered */}
 						{/* else render button for upload */}
-						{!!formik.values[fileId] && file ? (
+						{(file || existingFileUrl) ? (
 							<div className="upload-file-info">
 								<p className={isEdit ? "edit" : ""}>
-									<a href={URL.createObjectURL(file)} target="_blank" rel="noreferrer">
-										{formik.values[fileName] as string}
+									<a href={displayUrl} target="_blank" rel="noreferrer">
+										{displayName}
 									</a>
 								</p>
 								<div className="button-container">