add media_name prop for /media route

src/components/CustomDataGrid.tsx

@@ -12,7 +12,7 @@ interface CustomDataGridProps extends DataGridProps {
   resource?: string // Add this prop
 }
 
-const DEV_FIELDS = ['id', 'code', 'country_code', 'city_id', 'carrier_id', 'main_color', 'left_color', 'right_color', 'logo', 'slogan'] as const
+const DEV_FIELDS = ['id', 'code', 'country_code', 'city_id', 'carrier_id', 'main_color', 'left_color', 'right_color', 'logo', 'slogan', 'filename'] as const
 
 export const CustomDataGrid = ({hasCoordinates = false, columns = [], resource, ...props}: CustomDataGridProps) => {
   // const isDev = import.meta.env.DEV

src/pages/media/create.tsx

@@ -7,7 +7,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
 }
@@ -42,13 +42,20 @@ export const MediaCreate = () => {
         ...saveButtonProps,
         disabled: !!errors.file || !selectedFile,
         onClick: handleSubmit((data) => {
-          const formData = new FormData()
-          formData.append('filename', data.filename)
-          formData.append('type', String(data.media_type))
           if (data.file) {
+            const formData = new FormData()
+            formData.append('media_name', data.media_name)
+            formData.append('filename', data.file.name)
+            formData.append('type', String(data.media_type))
             formData.append('file', data.file)
+
+            console.log('Отправляемые данные:')
+            for (const pair of formData.entries()) {
+              console.log(pair[0] + ': ' + pair[1])
+            }
+
+            onFinish(formData)
           }
-          onFinish(formData)
         }),
       }}
     >
@@ -78,20 +85,20 @@ export const MediaCreate = () => {
       />
 
       <TextField
-        {...register('filename', {
+        {...register('media_name', {
           required: 'Это поле является обязательным',
         })}
-        error={!!(errors as any)?.filename}
+        error={!!(errors as any)?.media_name}
-        helperText={(errors as any)?.filename?.message}
+        helperText={(errors as any)?.media_name?.message}
         margin="normal"
         fullWidth
         InputLabelProps={{shrink: true}}
         type="text"
         label="Название *"
-        name="filename"
+        name="media_name"
       />
 
-      <Box component="form" sx={{display: 'flex', flexDirection: 'column'}} autoComplete="off">
+      <Box component="form" sx={{display: 'flex', flexDirection: 'column'}} autoComplete="off" style={{marginTop: 10}}>
         <Box display="flex" flexDirection="column-reverse" alignItems="center" gap={6}>
           <Box display="flex" flexDirection="column" alignItems="center" gap={2}>
             <Button variant="contained" component="label" disabled={!selectedMediaType}>
@@ -112,7 +119,7 @@ export const MediaCreate = () => {
             )}
           </Box>
 
-          {previewUrl && (
+          {previewUrl && selectedMediaType === 1 && (
             <Box mt={2} display="flex" justifyContent="center">
               <img src={previewUrl} alt="Preview" style={{maxWidth: '200px', borderRadius: 8}} />
             </Box>

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}
+          error={!!(errors as any)?.media_name}
-          helperText={(errors as any)?.filename?.message}
+          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>

src/pages/media/list.tsx

@@ -22,13 +22,22 @@ export const MediaList = () => {
       },
       {
         field: 'filename',
-        headerName: 'Название',
+        headerName: 'Название файла',
         type: 'string',
         minWidth: 250,
         display: 'flex',
         align: 'left',
         headerAlign: 'left',
       },
+      {
+        field: 'media_name',
+        headerName: 'Название',
+        type: 'string',
+        minWidth: 150,
+        display: 'flex',
+        align: 'left',
+        headerAlign: 'left',
+      },
       {
         field: 'media_type',
         headerName: 'Тип',

src/pages/media/show.tsx

@@ -11,7 +11,8 @@ export const MediaShow = () => {
   const record = data?.data
 
   const fields = [
-    {label: 'Название', data: 'filename'},
+    // {label: 'Название файла', data: 'filename'},
+    {label: 'Название', data: 'media_name'},
     {
       label: 'Тип',
       data: 'media_type',