[2] upgrade CreateSightArticle for /sight route

package.json

@@ -25,6 +25,7 @@
     "jwt-decode": "^4.0.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
+    "react-dropzone": "^14.3.8",
     "react-hook-form": "^7.30.0",
     "react-i18next": "^15.4.1",
     "react-router": "^7.0.2",

pnpm-lock.yaml

@@ -71,6 +71,9 @@ importers:
       react-dom:
         specifier: ^18.0.0
         version: 18.3.1(react@18.3.1)
+      react-dropzone:
+        specifier: ^14.3.8
+        version: 14.3.8(react@18.3.1)
       react-hook-form:
         specifier: ^7.30.0
         version: 7.54.2(react@18.3.1)
@@ -1162,6 +1165,10 @@ packages:
     resolution: {integrity: sha512-Xcz9l0z7y9yQ9rdDaxlmaI4uJHf/T8g9hOEzJcsEqX2SjCj4J20uK7+ldkDHMbpJDK76wF7xEIgxc/vSlsfw5w==}
     engines: {node: '>=10.12.0'}
 
+  attr-accept@2.2.5:
+    resolution: {integrity: sha512-0bDNnY/u6pPwHDMoF0FieU354oBi0a8rD9FcsLwzcGWbc8KS8KPIi7y+s13OlVY+gMWc/9xEMUgNE6Qm8ZllYQ==}
+    engines: {node: '>=4'}
+
   axios@1.7.9:
     resolution: {integrity: sha512-LhLcE7Hbiryz8oMDdDptSrWowmB4Bl6RCt6sIJKpRB4XtVf0iEgewX3au/pJqm+Py1kCASkb/FFKjxQaLtxJvw==}
 
@@ -1674,6 +1681,10 @@ packages:
     resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
     engines: {node: ^10.12.0 || >=12.0.0}
 
+  file-selector@2.1.2:
+    resolution: {integrity: sha512-QgXo+mXTe8ljeqUFaX3QVHc5osSItJ/Km+xpocx0aSqWGMSCf6qYs/VnzZgS864Pjn5iceMRFigeAV7AfTlaig==}
+    engines: {node: '>= 12'}
+
   fill-range@7.1.1:
     resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
     engines: {node: '>=8'}
@@ -2598,6 +2609,12 @@ packages:
     peerDependencies:
       react: ^18.3.1
 
+  react-dropzone@14.3.8:
+    resolution: {integrity: sha512-sBgODnq+lcA4P296DY4wacOZz3JFpD99fp+hb//iBO2HHnyeZU3FwWyXJ6salNpqQdsZrgMrotuko/BdJMV8Ug==}
+    engines: {node: '>= 10.13'}
+    peerDependencies:
+      react: '>= 16.8 || 18.0.0'
+
   react-hook-form@7.54.2:
     resolution: {integrity: sha512-eHpAUgUjWbZocoQYUHposymRb4ZP6d0uwUnooL2uOybA9/3tPUvoAKqEWK1WaSiTxxOfTpffNZP7QwlnM3/gEg==}
     engines: {node: '>=18.0.0'}
@@ -4433,6 +4450,8 @@ snapshots:
 
   atomically@1.7.0: {}
 
+  attr-accept@2.2.5: {}
+
   axios@1.7.9:
     dependencies:
       follow-redirects: 1.15.9(debug@4.4.0)
@@ -5001,6 +5020,10 @@ snapshots:
     dependencies:
       flat-cache: 3.2.0
 
+  file-selector@2.1.2:
+    dependencies:
+      tslib: 2.8.1
+
   fill-range@7.1.1:
     dependencies:
       to-regex-range: 5.0.1
@@ -5964,6 +5987,13 @@ snapshots:
       react: 18.3.1
       scheduler: 0.23.2
 
+  react-dropzone@14.3.8(react@18.3.1):
+    dependencies:
+      attr-accept: 2.2.5
+      file-selector: 2.1.2
+      prop-types: 15.8.1
+      react: 18.3.1
+
   react-hook-form@7.54.2(react@18.3.1):
     dependencies:
       react: 18.3.1

src/components/CreateSightArticle.tsx

@@ -4,10 +4,19 @@ import {axiosInstance} from '../providers/data'
 import {BACKEND_URL} from '../lib/constants'
 import {useForm, Controller} from 'react-hook-form'
 import {MarkdownEditor} from './MarkdownEditor'
-import React from 'react'
+import React, {useState, useCallback} from 'react'
+import {useDropzone} from 'react-dropzone'
+import {ALLOWED_IMAGE_TYPES, ALLOWED_VIDEO_TYPES} from '../components/media/MediaFormUtils'
 
 const MemoizedSimpleMDE = React.memo(MarkdownEditor)
 
+type MediaFile = {
+  file: File
+  preview: string
+  uploading: boolean
+  mediaId?: number
+}
+
 type Props = {
   parentId: string | number
   parentResource: string
@@ -17,6 +26,7 @@ type Props = {
 
 export const CreateSightArticle = ({parentId, parentResource, childResource, title}: Props) => {
   const theme = useTheme()
+  const [mediaFiles, setMediaFiles] = useState<MediaFile[]>([])
 
   const {
     register: registerItem,
@@ -39,30 +49,84 @@ export const CreateSightArticle = ({parentId, parentResource, childResource, tit
     [],
   )
 
+  const onDrop = useCallback((acceptedFiles: File[]) => {
+    const newFiles = acceptedFiles.map((file) => ({
+      file,
+      preview: URL.createObjectURL(file),
+      uploading: false,
+    }))
+    setMediaFiles((prev) => [...prev, ...newFiles])
+  }, [])
+
+  const {getRootProps, getInputProps, isDragActive} = useDropzone({
+    onDrop,
+    accept: {
+      'image/*': ALLOWED_IMAGE_TYPES,
+      'video/*': ALLOWED_VIDEO_TYPES,
+    },
+    multiple: true,
+  })
+
+  const uploadMedia = async (mediaFile: MediaFile) => {
+    const formData = new FormData()
+    formData.append('media_name', mediaFile.file.name)
+    formData.append('filename', mediaFile.file.name)
+    formData.append('type', mediaFile.file.type.startsWith('image/') ? '1' : '2')
+    formData.append('file', mediaFile.file)
+
+    const response = await axiosInstance.post(`${BACKEND_URL}/media`, formData)
+    return response.data.id
+  }
+
   const handleCreate = async (data: {heading: string; body: string}) => {
     try {
+      // Создаем статью
       const response = await axiosInstance.post(`${BACKEND_URL}/${childResource}`, data)
       const itemId = response.data.id
 
+      // Получаем существующие статьи для определения порядкового номера
       const existingItemsResponse = await axiosInstance.get(`${BACKEND_URL}/${parentResource}/${parentId}/${childResource}`)
       const existingItems = existingItemsResponse.data || []
-
       const nextPageNum = existingItems.length + 1
 
+      // Привязываем статью к достопримечательности
       await axiosInstance.post(`${BACKEND_URL}/${parentResource}/${parentId}/${childResource}/`, {
         [`${childResource}_id`]: itemId,
         page_num: nextPageNum,
       })
 
+      // Загружаем все медиа файлы и получаем их ID
+      const mediaIds = await Promise.all(
+        mediaFiles.map(async (mediaFile) => {
+          return await uploadMedia(mediaFile)
+        }),
+      )
+
+      // Привязываем все медиа к статье
+      await Promise.all(
+        mediaIds.map((mediaId, index) =>
+          axiosInstance.post(`${BACKEND_URL}/article/${itemId}/media/`, {
+            media_id: mediaId,
+            media_order: index + 1,
+          }),
+        ),
+      )
+
       resetItem()
+      setMediaFiles([])
       window.location.reload()
     } catch (err: any) {
       console.error('Error creating item:', err)
-      if (err?.response) {
-        console.error('Error response:', err.response.data)
-        console.error('Error status:', err.response.status)
     }
   }
+
+  const removeMedia = (index: number) => {
+    setMediaFiles((prev) => {
+      const newFiles = [...prev]
+      URL.revokeObjectURL(newFiles[index].preview)
+      newFiles.splice(index, 1)
+      return newFiles
+    })
   }
 
   return (
@@ -96,6 +160,82 @@ export const CreateSightArticle = ({parentId, parentResource, childResource, tit
 
           <Controller control={controlItem} name="body" rules={{required: 'Это поле является обязательным'}} defaultValue="" render={({field: {onChange, value}}) => <MemoizedSimpleMDE value={value} onChange={onChange} options={simpleMDEOptions} className="my-markdown-editor" />} />
 
+          {/* Dropzone для медиа файлов */}
+          <Box sx={{mt: 2, mb: 2}}>
+            <Box
+              {...getRootProps()}
+              sx={{
+                border: '2px dashed',
+                borderColor: isDragActive ? 'primary.main' : 'grey.300',
+                borderRadius: 1,
+                p: 2,
+                textAlign: 'center',
+                cursor: 'pointer',
+                '&:hover': {
+                  borderColor: 'primary.main',
+                },
+              }}
+            >
+              <input {...getInputProps()} />
+              <Typography>{isDragActive ? 'Перетащите файлы сюда...' : 'Перетащите файлы сюда или кликните для выбора'}</Typography>
+            </Box>
+
+            {/* Превью загруженных файлов */}
+            <Box sx={{mt: 2, display: 'flex', flexWrap: 'wrap', gap: 1}}>
+              {mediaFiles.map((mediaFile, index) => (
+                <Box
+                  key={mediaFile.preview}
+                  sx={{
+                    position: 'relative',
+                    width: 100,
+                    height: 100,
+                  }}
+                >
+                  {mediaFile.file.type.startsWith('image/') ? (
+                    <img
+                      src={mediaFile.preview}
+                      alt={mediaFile.file.name}
+                      style={{
+                        width: '100%',
+                        height: '100%',
+                        objectFit: 'cover',
+                      }}
+                    />
+                  ) : (
+                    <Box
+                      sx={{
+                        width: '100%',
+                        height: '100%',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        bgcolor: 'grey.200',
+                      }}
+                    >
+                      <Typography variant="caption">{mediaFile.file.name}</Typography>
+                    </Box>
+                  )}
+                  <Button
+                    size="small"
+                    color="error"
+                    onClick={() => removeMedia(index)}
+                    sx={{
+                      position: 'absolute',
+                      top: 0,
+                      right: 0,
+                      minWidth: 'auto',
+                      width: 20,
+                      height: 20,
+                      p: 0,
+                    }}
+                  >
+                    ×
+                  </Button>
+                </Box>
+              ))}
+            </Box>
+          </Box>
+
           <Box sx={{mt: 2, display: 'flex', gap: 2}}>
             <Button variant="contained" color="primary" type="submit">
               Создать
@@ -104,6 +244,8 @@ export const CreateSightArticle = ({parentId, parentResource, childResource, tit
               variant="outlined"
               onClick={() => {
                 resetItem()
+                mediaFiles.forEach((file) => URL.revokeObjectURL(file.preview))
+                setMediaFiles([])
               }}
             >
               Очистить