add media_name prop for /media route

src/pages/media/edit.tsx

@@ -9,7 +9,7 @@ import {MEDIA_TYPES} from '../../lib/constants'
 import {ALLOWED_IMAGE_TYPES, ALLOWED_VIDEO_TYPES, useMediaFileUpload} from '../../components/media/MediaFormUtils'
 
 type MediaFormValues = {
-  filename: string
+  media_name: string
   media_type: number
   file?: File
 }
@@ -28,7 +28,7 @@ export const MediaEdit = () => {
     control,
   } = useForm<MediaFormValues>({
     defaultValues: {
-      filename: '',
+      media_name: '',
       media_type: '',
       file: undefined,
     },
@@ -50,7 +50,7 @@ export const MediaEdit = () => {
   useEffect(() => {
     if (record?.id) {
       setPreviewUrl(`https://wn.krbl.ru/media/${record.id}/download`)
-      setValue('filename', record?.filename || '')
+      setValue('media_name', record?.media_name || '')
       setValue('media_type', record?.media_type)
     }
   }, [record, setValue, setPreviewUrl])
@@ -62,7 +62,8 @@ export const MediaEdit = () => {
         disabled: !!errors.file,
         onClick: handleSubmit((data) => {
           const formData = {
-            filename: data.filename,
+            media_name: data.media_name,
+            filename: selectedFile?.name || record?.filename,
             type: Number(data.media_type),
           }
           onFinish(formData)
@@ -97,20 +98,20 @@ export const MediaEdit = () => {
         />
 
         <TextField
-          {...register('filename', {
+          {...register('media_name', {
             required: 'Это поле является обязательным',
           })}
-          error={!!(errors as any)?.filename}
-          helperText={(errors as any)?.filename?.message}
+          error={!!(errors as any)?.media_name}
+          helperText={(errors as any)?.media_name?.message}
           margin="normal"
           fullWidth
           InputLabelProps={{shrink: true}}
           type="text"
           label="Название *"
-          name="filename"
+          name="media_name"
         />
 
-        <Box display="flex" flexDirection="column-reverse" alignItems="center" gap={4}>
+        <Box display="flex" flexDirection="column-reverse" alignItems="center" gap={4} style={{marginTop: 10}}>
           <Box display="flex" flexDirection="column" alignItems="center" gap={2}>
             <Button variant="contained" component="label" disabled={!selectedMediaType}>
               {selectedFile ? 'Изменить файл' : 'Загрузить файл'}
@@ -130,9 +131,9 @@ export const MediaEdit = () => {
             )}
           </Box>
 
-          {previewUrl && (
+          {previewUrl && selectedMediaType === 1 && (
             <Box mt={2} display="flex" justifyContent="center">
-              <img src={previewUrl} alt="Preview" style={{maxWidth: '300px', objectFit: 'contain'}} />
+              <img src={previewUrl} alt="Preview" style={{maxWidth: '200px', borderRadius: 8}} />
             </Box>
           )}
         </Box>