Merge pull request Sofie-Automation#1418 from SuperFlyTV/chore/upload-button-refactoring

chore: refactor UploadButton to avoid duplication

Author: nytamin

packages/webui/src/client/lib/Components/Base64ImageInput.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react'
+import { useCallback } from 'react'
 import { UploadButton } from '../uploadButton'
 import { faUpload } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
@@ -19,37 +19,27 @@ export function Base64ImageInputControl({
 }: Readonly<IBase64ImageInputControlProps>): JSX.Element {
 	const { t } = useTranslation()
 
-	const [uploadFileKey, setUploadFileKey] = useState(() => Date.now())
-
 	const handleSelectFile = useCallback(
-		(event: React.ChangeEvent<HTMLInputElement>) => {
-			// Clear the field
-			setUploadFileKey(Date.now())
-
-			const file = event.target.files?.[0]
-			if (!file) return
-
-			const reader = new FileReader()
-			reader.onload = (readEvent) => {
-				// On file upload
+		(fileContent: string) => {
+			if (typeof fileContent !== 'string' || !fileContent) return
 
-				const uploadResult = readEvent.target?.result
-				if (typeof uploadResult !== 'string' || !uploadResult) return
-
-				handleUpdate(uploadResult.toString())
-			}
-			reader.readAsDataURL(file)
+			handleUpdate(fileContent)
 		},
 		[handleUpdate]
 	)
 
+	const handleUploadError = useCallback((error: Error) => {
+		// Handle upload error
+		console.error('Error uploading file:', error)
+	}, [])
+
 	return (
 		<div className={classNames}>
 			<UploadButton
 				className="btn btn-primary"
 				accept="image/*"
-				onChange={handleSelectFile}
-				key={uploadFileKey}
+				onUploadContents={handleSelectFile}
+				onUploadError={handleUploadError}
 				disabled={disabled}
 			>
 				<FontAwesomeIcon icon={faUpload} />

packages/webui/src/client/lib/forms/SchemaFormTable/ObjectTable.tsx

@@ -1,7 +1,7 @@
 import { faDownload, faPlus, faUpload } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { getRandomString, joinObjectPathFragments, literal, objectPathGet } from '@sofie-automation/corelib/dist/lib'
-import React, { useCallback, useMemo, useState } from 'react'
+import React, { useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
 	WrappedOverridableItemNormal,
@@ -30,6 +30,8 @@ import { ObjectTableDeletedRow } from './ObjectTableDeletedRow'
 import { SchemaFormSectionHeader } from '../SchemaFormSectionHeader'
 import { UploadButton } from '../../uploadButton'
 import Tooltip from 'rc-tooltip'
+import { NoticeLevel, Notification, NotificationCenter } from '../../notifications/notifications'
+import { stringifyError } from '@sofie-automation/shared-lib/dist/lib/stringifyError'
 
 interface SchemaFormObjectTableProps {
 	/** Schema for each row in the table */
@@ -293,8 +295,6 @@ interface ImportExportButtonsProps {
 function ImportExportButtons({ schema, overrideHelper, wrappedRows }: Readonly<ImportExportButtonsProps>) {
 	const { t } = useTranslation()
 
-	const [uploadFileKey, setUploadFileKey] = useState(0)
-
 	const exportTable = () => {
 		const exportObject: Record<string, any> = {}
 		for (const obj of wrappedRows) {
@@ -319,73 +319,73 @@ function ImportExportButtons({ schema, overrideHelper, wrappedRows }: Readonly<I
 		URL.revokeObjectURL(url)
 	}
 
-	const importTable = (e: React.ChangeEvent<HTMLInputElement>) => {
-		const file = e.target.files?.[0]
-		if (!file) return
-
-		const reader = new FileReader()
-		reader.onload = (e2) => {
-			// On file upload
-			setUploadFileKey(Date.now())
-
-			const uploadFileContents = e2.target?.result
-			if (!uploadFileContents) return
-
-			const newRows = JSON.parse(uploadFileContents as string)
-			if (!newRows || typeof newRows !== 'object') return
+	const importTable = (uploadFileContents: string, file: File) => {
+		const newRows = JSON.parse(uploadFileContents)
+		if (!newRows || typeof newRows !== 'object') return
+
+		doModalDialog({
+			title: t('Import file?'),
+			yes: t('Replace rows'),
+			no: t('Cancel'),
+			message: (
+				<p>
+					{t('Are you sure you want to import the contents of the file "{{fileName}}"?', {
+						fileName: file.name,
+					})}
+				</p>
+			),
+			onAccept: () => {
+				const batch = overrideHelper()
+
+				for (const row of wrappedRows) {
+					batch.deleteRow(row.id)
+				}
 
-			doModalDialog({
-				title: t('Import file?'),
-				yes: t('Replace rows'),
-				no: t('Cancel'),
-				message: (
-					<p>
-						{t('Are you sure you want to import the contents of the file "{{fileName}}"?', {
-							fileName: file.name,
-						})}
-					</p>
-				),
-				onAccept: () => {
-					const batch = overrideHelper()
+				for (const [rowId, row] of Object.entries<unknown>(newRows)) {
+					batch.insertRow(rowId, row)
+				}
 
-					for (const row of wrappedRows) {
-						batch.deleteRow(row.id)
-					}
+				batch.commit()
+			},
+			actions: [
+				{
+					label: t('Append rows'),
+					on: () => {
+						const batch = overrideHelper()
 
-					for (const [rowId, row] of Object.entries<unknown>(newRows)) {
-						batch.insertRow(rowId, row)
-					}
+						for (const [rowId, row] of Object.entries<unknown>(newRows)) {
+							batch.insertRow(rowId, row)
+						}
 
-					batch.commit()
-				},
-				actions: [
-					{
-						label: t('Append rows'),
-						on: () => {
-							const batch = overrideHelper()
-
-							for (const [rowId, row] of Object.entries<unknown>(newRows)) {
-								batch.insertRow(rowId, row)
-							}
-
-							batch.commit()
-						},
-						classNames: 'btn-secondary',
+						batch.commit()
 					},
-				],
-			})
-		}
-		reader.readAsText(file)
+					classNames: 'btn-secondary',
+				},
+			],
+		})
 	}
+	const importError = useCallback(
+		(err: Error) => {
+			NotificationCenter.push(
+				new Notification(
+					undefined,
+					NoticeLevel.WARNING,
+					t('Import error: {{errorMessage}}', { errorMessage: stringifyError(err) }),
+					'ConfigManifestSettings'
+				)
+			)
+		},
+		[t]
+	)
 
 	return (
 		<>
 			<Tooltip overlay={t('Import')} placement="top">
 				<span className="inline-block">
 					<UploadButton
-						key={uploadFileKey}
 						className="btn btn-secondary"
-						onChange={importTable}
+						onUploadContents={importTable}
+						onUploadError={importError}
 						accept="application/json,.json"
 					>
 						<FontAwesomeIcon icon={faUpload} />

packages/webui/src/client/lib/uploadButton.tsx

@@ -3,19 +3,45 @@ import * as React from 'react'
 interface IProps {
 	className?: string
 	accept?: string
-	onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
+	onUploadContents: (contents: string, file: File) => void
+	onUploadError: (err: Error) => void
 	children?: React.ReactNode
 	disabled?: boolean
 }
 
 export const UploadButton: React.FunctionComponent<IProps> = function (props: IProps) {
+	const [timestampedFileKey, setTimestampedFileKey] = React.useState(0)
+
+	const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		setTimestampedFileKey(Date.now())
+
+		const file = e.target.files?.[0]
+		if (!file) return
+
+		const reader = new FileReader()
+
+		reader.onload = () => {
+			const fileContents = reader.result as string
+
+			try {
+				props.onUploadContents(fileContents, file)
+			} catch (err: any) {
+				props.onUploadError(err)
+			}
+		}
+		reader.onerror = () => {
+			props.onUploadError(new Error('Error reading file'))
+		}
+		reader.readAsText(file)
+	}
 	return (
 		<label className={props.className}>
 			{props.children}
 			<input
+				key={timestampedFileKey}
 				type="file"
 				accept={props.accept}
-				onChange={props.onChange}
+				onChange={handleChange}
 				style={{
 					visibility: 'hidden',
 					width: 0,