fix/uploader: onChange should not be called onMount

packages/assets/css/src/scss/_utils/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 16 Apr 2024 14:40:08 GMT
+// Generated on Thu, 18 Apr 2024 11:29:28 GMT
 
 $accordion-border-radius-sm: 10px;
 $advanced-banner-background: linear-gradient(90deg, #222 0%, #383323 48.96%, #514524 100%);

packages/ui/uploader/src/uploader.tsx

@@ -84,14 +84,6 @@ const Uploader: React.FC<UploaderProps> = ({
 		return false
 	}
 
-	// Send files to parent component
-	useEffect(() => {
-		if (onChange) {
-			onChange(files)
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [files])
-
 	// Callback to handle file selection
 	const onSelectFile = useCallback(
 		(filesOrEvent: unknown | Record<string, any>[]) => {
@@ -136,8 +128,14 @@ const Uploader: React.FC<UploaderProps> = ({
 				return file
 			})
 
+			// New files list
+			const _files = [...files, ...tempSelectedFiles]
+
 			// Append new files to the existing files array
-			setFiles([...files, ...tempSelectedFiles])
+			setFiles(_files)
+
+			// Call onChange function
+			onChange(_files)
 		},
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[files],
@@ -151,10 +149,21 @@ const Uploader: React.FC<UploaderProps> = ({
 	// Callback to remove a file from the selected files
 	const onRemoveFile = useCallback(
 		(fileIndex: number) => {
-			setFiles(files.filter((file: File, index: number) => index !== fileIndex))
+			// New files list
+			const _files = files.filter(
+				(file: File, index: number) => index !== fileIndex,
+			)
+
+			// Update Files state
+			setFiles(_files)
 
+			// Call onChange callback
+			onChange(_files)
+
+			// Empty the file input value
 			emptyFileInput()
 		},
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[files],
 	)