97 lines
2.8 KiB
TypeScript
97 lines
2.8 KiB
TypeScript
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>
|
|
)
|
|
}
|