init /media route

src/pages/media/edit.tsx

@@ -0,0 +1,96 @@
+import {Box, TextField, Button, Typography} from '@mui/material'
+import {Edit} from '@refinedev/mui'
+import {useForm} from '@refinedev/react-hook-form'
+import {useState, useEffect} from 'react'
+import {useShow} from '@refinedev/core'
+
+export const MediaEdit = () => {
+  const {
+    saveButtonProps,
+    register,
+    formState: {errors},
+    setValue,
+  } = useForm({})
+
+  const {query} = useShow()
+  const {data} = query
+  const record = data?.data
+
+  const [selectedFile, setSelectedFile] = useState<File | null>(null)
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (record?.id) {
+      setPreviewUrl(`https://wn.krbl.ru/media/${record.id}/download`)
+    }
+  }, [record])
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0]
+    if (file) {
+      setValue('file', file)
+      setSelectedFile(file)
+
+      if (file.type.startsWith('image/')) {
+        const url = URL.createObjectURL(file)
+        setPreviewUrl(url)
+      }
+    }
+  }
+
+  return (
+    <Edit saveButtonProps={saveButtonProps}>
+      <Box component="form" sx={{display: 'flex', flexDirection: 'column'}} autoComplete="off">
+        <Box display="flex" flexDirection="column-reverse" alignItems="center" gap={6}>
+          <Box display="flex" alignItems="center" gap={2}>
+            <Button variant="contained" component="label">
+              {selectedFile ? 'Change File' : 'Upload File'}
+              <input type="file" hidden onChange={handleFileChange} />
+            </Button>
+
+            {selectedFile && (
+              <Typography variant="body2" color="text.secondary">
+                {selectedFile.name}
+              </Typography>
+            )}
+          </Box>
+
+          {previewUrl && (
+            <Box mt={2} display="flex" justifyContent="center">
+              <img src={previewUrl} alt="Preview" style={{maxWidth: '200px', borderRadius: 8}} />
+            </Box>
+          )}
+        </Box>
+
+        <TextField
+          {...register('filename', {
+            required: 'This field is required',
+          })}
+          error={!!(errors as any)?.filename}
+          helperText={(errors as any)?.filename?.message}
+          margin="normal"
+          fullWidth
+          InputLabelProps={{shrink: true}}
+          type="text"
+          label="File Name"
+          name="filename"
+        />
+
+        <TextField
+          {...register('media_type', {
+            required: 'This field is required',
+            valueAsNumber: true,
+          })}
+          error={!!(errors as any)?.media_type}
+          helperText={(errors as any)?.media_type?.message}
+          margin="normal"
+          fullWidth
+          InputLabelProps={{shrink: true}}
+          type="number"
+          label="Media Type"
+          name="media_type"
+        />
+      </Box>
+    </Edit>
+  )
+}