feat: fix upload file

src/screens/Category/components/AddCategory/AddCategory.tsx

@@ -14,24 +14,24 @@ export const AddCategory = ({ show, setShow, setRefCategory, innerRef }) => {
     const [imageUrl, setImageUrl] = useState('')
     const categoryRef = useRef()
 
-    const handleUpload = async (selectFile) => {
-        console.log(selectFile)
+    const handleUpload = async (selectedFile) => {
+        if (!selectedFile) {
+            console.error('Không có file được chọn.')
+            return
+        }
 
         try {
             const formData = new FormData()
-            console.log(selectFile)
-            formData.append('file_request', selectFile)
-            console.log(formData)
-            console.log(formData.get('file_request'))
-            console.log(selectFile)
+            formData.append('file_request', selectedFile)
             const response = await uploadFile(formData)
-            console.log(response)
 
-            if (response && response.data.url) {
+            if (response?.data?.url) {
                 setImageUrl(response.data.url)
+            } else {
+                console.error('Không nhận được URL từ server.')
             }
         } catch (error) {
-            console.error('error updating category with image URL: ', error)
+            console.error('Lỗi khi tải file: ', error)
         }
     }
 
@@ -46,7 +46,6 @@ export const AddCategory = ({ show, setShow, setRefCategory, innerRef }) => {
                 })
                 categoryRef.current = postCategoryName
                 // setCategories([...categories, postCategoryName])
-                console.log(categoryRef)
                 setRefCategory(categoryRef)
                 setShow(!show)
             } catch (error) {
@@ -67,8 +66,10 @@ export const AddCategory = ({ show, setShow, setRefCategory, innerRef }) => {
     }, [show, innerRef])
 
     const handleFileChange = (event) => {
-        // setFile(event.target.files[0])
-        handleUpload(event.target.files[0])
+        if (event.target.files.length > 0) {
+            console.log('data request: ', event.target.files[0])
+            handleUpload(event.target.files[0])
+        }
     }
 
     return (

src/services/categoryAPI.ts

@@ -1,4 +1,4 @@
-import { get, post } from './fetch'
+import { get, post, upload } from './fetch'
 
 const token = localStorage.getItem('access_token')
 
@@ -37,21 +37,24 @@ export const createCategory = async (newData: any) => {
     return res.data
 }
 
-export const uploadFile = async (newData: any) => {
-    // console.log(newData)
-    const res: any = await post(
-        'http://localhost:8008/api/v1/file/upload/',
-        newData,
-        {
-            headers: {
-                'Content-Type': 'multipart/form-data',
-                Authorization: `Bearer ${token} `,
+export const uploadFile = async (formData) => {
+    try {
+        const res = await upload(
+            'http://localhost:8008/api/v1/file/upload/',
+            formData,
+            {
+                headers: {
+                    Authorization: `Bearer ${token}`,
+                    // Không cần đặt 'Content-Type' ở đây
+                },
             },
-        },
-        true,
-    )
-    // console.log('uploadFile ', res)
-    return res
+            true,
+        )
+        return res
+    } catch (error) {
+        console.error('Lỗi trong hàm uploadFile: ', error)
+        throw error // Nên ném lỗi ra để xử lý tiếp
+    }
 }
 
 // Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3MzgxMDgwNDcsImlhdCI6MTcwMjEwODA0NywiaXNzIjoiZXJwIiwic3ViIjoiYjYwNjI5MzgtYzRkZS00OGFkLWI5NGYtZTk5NjFiMmNkMjNmIiwidG9rZW5fdHlwZSI6ImFjY2Vzc190b2tlbiJ9.hP13q4bEc90K6b5YFL1o6T9dKrZPBqBUpWDv_hNCpgM

src/services/fetch/index.ts

@@ -47,6 +47,22 @@ export async function post<T, U>(
     return await http<U>(path, init, isShowToast)
 }
 
+export async function upload<U>(
+    path: string,
+    body: FormData,
+    config?: RequestInit,
+    isShowToast = false,
+): Promise<U> {
+    const init: RequestInit = {
+        method: 'POST',
+        body: body,
+        headers: {
+            ...config?.headers,
+        },
+    }
+    return await http<U>(path, init, isShowToast)
+}
+
 export async function put<T, U>(
     path: string,
     body: T,