upload icon

.env

@@ -1,7 +1,7 @@
 VITE_TOKEN_NAME = 'dmnu_a_t'
 VITE_REFRESH_TOKEN_NAME = 'dmnu-a-rt'
 
-VITE_BASE_URL = 'https://dmenuplus-api-production.dev.danakcorp.com'
+VITE_BASE_URL = 'https://dmenu-api.danakcorp.com'
 # VITE_BASE_URL = 'http://192.168.99.131:2000'
 
 VITE_SOCKET_URL = 'https://dmenu-api.danakcorp.com'

src/pages/food/components/CategoryForm.tsx

@@ -1,5 +1,5 @@
-import { type FC, useState } from 'react'
-import { Add, Image } from 'iconsax-react'
+import { type FC, useEffect, useRef, useState } from 'react'
+import { Add, DocumentUpload, Image } from 'iconsax-react'
 import Input from '@/components/Input'
 import SwitchComponent from '@/components/Switch'
 import Button from '@/components/Button'
@@ -29,6 +29,8 @@ const CategoryForm: FC<Props> = ({
   formik,
   isActive,
   onActiveChange,
+  onIconChange,
+  iconFiles = [],
   isSubmitting,
   isEditing = false,
   onIconUrlChange,
@@ -37,6 +39,17 @@ const CategoryForm: FC<Props> = ({
   const { data: iconsData } = useGetIcons()
   const icons = iconsData?.data || []
   const [isIconModalOpen, setIsIconModalOpen] = useState(false)
+  const [uploadPreviewUrl, setUploadPreviewUrl] = useState('')
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    if (iconFiles.length > 0) {
+      const url = URL.createObjectURL(iconFiles[0])
+      setUploadPreviewUrl(url)
+      return () => URL.revokeObjectURL(url)
+    }
+    setUploadPreviewUrl('')
+  }, [iconFiles])
 
   const handleIconSelect = (url: string) => {
     if (onIconUrlChange) {
@@ -45,6 +58,18 @@ const CategoryForm: FC<Props> = ({
     setIsIconModalOpen(false)
   }
 
+  const handleUploadIconChange = (files: File[]) => {
+    onIconChange?.(files)
+    formik.setFieldValue('icon', files)
+  }
+
+  const handleClearUploadedIcon = () => {
+    handleUploadIconChange([])
+    if (fileInputRef.current) {
+      fileInputRef.current.value = ''
+    }
+  }
+
   return (
     <div className="w-full lg:w-[300px] bg-white rounded-3xl p-4 lg:p-6 h-fit lg:sticky top-4 lg:top-6">
       <h2 className="font-light mb-4 lg:mb-6 text-sm lg:text-base">{isEditing ? 'ویرایش دسته بندی' : 'اضافه کردن دسته بندی'}</h2>
@@ -88,6 +113,51 @@ const CategoryForm: FC<Props> = ({
           <Image size={18} color="#fff" className="lg:w-5 lg:h-5" />
           <span>انتخاب آیکون</span>
         </Button>
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept="image/*"
+          className="hidden"
+          onChange={(e) => {
+            const files = e.target.files ? Array.from(e.target.files) : []
+            if (files.length > 0) {
+              handleUploadIconChange(files)
+            }
+          }}
+        />
+        <Button
+          type="button"
+          onClick={() => fileInputRef.current?.click()}
+          className="w-full max-h-10 lg:h-12 flex items-center justify-center gap-2 text-xs lg:text-sm mt-2 bg-transparent text-primary border-primary border"
+        >
+          <DocumentUpload size={18} color="currentColor" className="lg:w-5 lg:h-5" />
+          <span>آپلود آیکون</span>
+        </Button>
+        {iconFiles.length > 0 && uploadPreviewUrl && (
+          <div className="mt-3 flex items-center gap-2 lg:gap-3 p-2 lg:p-3 bg-gray-50 rounded-xl border border-gray-200">
+            <div className="w-10 h-10 lg:w-12 lg:h-12 flex items-center justify-center bg-white rounded-lg border border-gray-200 p-1.5 lg:p-2 flex-shrink-0">
+              <img
+                src={uploadPreviewUrl}
+                alt="uploaded icon"
+                className="w-full h-full object-contain max-w-full max-h-full"
+              />
+            </div>
+            <div className="flex-1 min-w-0">
+              <div className="text-[10px] lg:text-xs text-gray-500 mb-0.5 lg:mb-1">آیکون آپلود شده</div>
+              <div className="text-[10px] lg:text-xs text-gray-400 truncate">
+                {iconFiles[0].name}
+              </div>
+            </div>
+            <button
+              type="button"
+              onClick={handleClearUploadedIcon}
+              className="text-gray-400 hover:text-red-500 transition-colors text-lg lg:text-xl leading-none flex-shrink-0 w-5 h-5 lg:w-6 lg:h-6 flex items-center justify-center"
+              title="حذف آیکون"
+            >
+              ×
+            </button>
+          </div>
+        )}
         {selectedIconUrl && (
           <div className="mt-3 flex items-center gap-2 lg:gap-3 p-2 lg:p-3 bg-gray-50 rounded-xl border border-gray-200">
             <div className="w-10 h-10 lg:w-12 lg:h-12 flex items-center justify-center bg-white rounded-lg border border-gray-200 p-1.5 lg:p-2 flex-shrink-0">