Hookup channel icon upload / preview. Doesn't actually upload file yet

web2/src/components/channel_config/ChannelPropertiesEditor.tsx

@@ -11,7 +11,7 @@ import {
 } from '@mui/material';
 import { usePrevious } from '@uidotdev/usehooks';
 import { isEmpty } from 'lodash-es';
-import { useEffect } from 'react';
+import { ChangeEvent, useEffect, useRef, useState } from 'react';
 import useDebouncedState from '../../hooks/useDebouncedState.ts';
 import { updateCurrentChannel } from '../../store/channelEditor/actions.ts';
 import useStore from '../../store/index.ts';
@@ -29,6 +29,7 @@ const VisuallyHiddenInput = styled('input')({
 });
 
 export default function ChannelPropertiesEditor() {
+  const imgRef = useRef<HTMLImageElement | null>(null);
   const channel = useStore((s) => s.channelEditor.currentEntity);
   const prevChannel = usePrevious(channel);
 
@@ -40,12 +41,31 @@ export default function ChannelPropertiesEditor() {
   const [channelNumber, debounceChannelNumber, setChannelNumber] =
     useDebouncedState(channel?.number ?? 1, 250);
 
+  const [channelIcon, setChannelIcon] = useState(channel?.icon.path);
+
+  const [, channelIconPreview, setChannelIconPreview] = useDebouncedState(
+    channel?.icon.path,
+    250,
+  );
+
   useEffect(() => {
     if (!prevChannel && channel) {
       setChannelName(channel.name);
       setChannelNumber(channel.number);
+      const url = isEmpty(channel.icon.path)
+        ? `/dizquetv.png`
+        : channel.icon.path;
+      setChannelIcon(url);
+      setChannelIconPreview(url);
     }
-  }, [prevChannel, channel, setChannelName, setChannelNumber]);
+  }, [
+    prevChannel,
+    channel,
+    setChannelName,
+    setChannelNumber,
+    setChannelIcon,
+    setChannelIconPreview,
+  ]);
 
   useEffect(() => {
     if (
@@ -63,6 +83,29 @@ export default function ChannelPropertiesEditor() {
     }
   }, [channel, debounceChannelNumber]);
 
+  const onloadstart = () => {
+    console.log('on load start');
+  };
+
+  useEffect(() => {
+    if (imgRef.current) {
+      const current = imgRef.current;
+      current.onloadstart = onloadstart;
+      return () => {
+        current.removeEventListener('onloadstart', onloadstart);
+      };
+    }
+  }, [imgRef]);
+
+  const handleFileUpload = (e: ChangeEvent<HTMLInputElement>) => {
+    console.log(e.target.files);
+    if (e.target.files && e.target.files.length > 0) {
+      const file = e.target.files[0];
+      setChannelIcon(`http://localhost:8000/images/uploads/${file.name}`); // Placeholder
+      setChannelIconPreview(URL.createObjectURL(file));
+    }
+  };
+
   return (
     channel && (
       <Box>
@@ -85,23 +128,35 @@ export default function ChannelPropertiesEditor() {
           value={channel.groupTitle}
           margin="normal"
         />
-        <FormControl fullWidth margin="normal">
-          <InputLabel>Thumbnail URL</InputLabel>
-          <OutlinedInput
-            label="Thumbnail URL"
-            value={
-              isEmpty(channel.icon.path) ? `/dizquetv.png` : channel.icon.path
-            }
-            endAdornment={
-              <InputAdornment position="end">
-                <IconButton component="label">
-                  <CloudUploadIcon />
-                  <VisuallyHiddenInput type="file" />
-                </IconButton>
-              </InputAdornment>
-            }
+        <Box sx={{ display: 'flex', alignItems: 'end' }}>
+          <Box
+            component="img"
+            width="10%"
+            src={channelIconPreview}
+            sx={{ mr: 1 }}
+            ref={imgRef}
           />
-        </FormControl>
+          <FormControl fullWidth margin="normal">
+            <InputLabel>Thumbnail URL</InputLabel>
+            <OutlinedInput
+              label="Thumbnail URL"
+              value={channelIcon}
+              type="url"
+              onChange={(e) => setChannelIcon(e.target.value)}
+              endAdornment={
+                <InputAdornment position="end">
+                  <IconButton component="label">
+                    <CloudUploadIcon />
+                    <VisuallyHiddenInput
+                      onChange={(e) => handleFileUpload(e)}
+                      type="file"
+                    />
+                  </IconButton>
+                </InputAdornment>
+              }
+            />
+          </FormControl>
+        </Box>
       </Box>
     )
   );