feat: add useUploadImage hook

Author: luannguyenQV

apps/web/@/actions/upload/index.ts

@@ -0,0 +1,47 @@
+import { useState } from "react"
+
+import { toast } from "react-toastify"
+import { useSWRConfig } from "swr"
+import useSWRMutation from "swr/mutation"
+import useSWRImmutable from "swr/mutation"
+
+// upload image to server API
+const uploadImage = async (file: File) => {
+  try {
+    const formData = new FormData()
+
+    formData.append("file", file)
+
+    // Todo: replace with hook
+    const response = await fetch("/api/protected/images", {
+      method: "POST",
+      body: formData,
+      headers: {
+        Authorization: `Bearer ${localStorage.getItem("token")}`,
+      },
+    })
+
+    toast.success("Image uploaded successfully")
+
+    return response.json()
+  } catch (error) {
+    toast.error("Error uploading image")
+    // throw error
+  }
+}
+
+// upload image hook
+export const useUploadImage = () => {
+  const { mutate } = useSWRConfig()
+
+  const { trigger, isMutating, error, data } = useSWRMutation(
+    "/api/protected/images",
+    async (url, { arg }: { arg: File }) => {
+      const result = await uploadImage(arg)
+      mutate(["/api/protected/images"])
+      return result
+    }
+  )
+
+  return { uploadImage: trigger, isMutating, error, data }
+}

apps/web/@/hooks/useUploadImage.ts

@@ -7,32 +7,18 @@ import { useTranslations } from "next-intl"
 import { toast } from "react-toastify"
 import { LoadingButton } from "ui"
 
+import { useUploadImage } from "@/hooks/useUploadImage"
+
 const UploadImageButton = () => {
   const fileInputRef = useRef<HTMLInputElement>(null)
   const t = useTranslations("uploads")
+  const { uploadImage, isMutating } = useUploadImage()
 
   const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0]
 
     if (file) {
-      const formData = new FormData()
-      formData.append("file", file)
-
-      // Todo: replace with hook
-      fetch("/api/protected/images", {
-        method: "POST",
-        body: formData,
-        headers: {
-          Authorization: `Bearer ${localStorage.getItem("token")}`,
-        },
-      })
-        .then((res) => res.json())
-        .then((data) => {
-          toast.success(t("image_uploaded_successfully"))
-        })
-        .catch((error) => {
-          toast.error(t("error_uploading_image"))
-        })
+      uploadImage(file)
     }
   }
 
@@ -51,6 +37,7 @@ const UploadImageButton = () => {
         multiple={false}
       />
       <LoadingButton
+        loading={isMutating}
         variant="default"
         onClick={handleButtonClick}
         className="gap-1"

apps/web/@/molecules/upload/UploadImageButton.tsx

@@ -80,21 +80,38 @@ export async function POST(request: NextRequest) {
 
     // Resize and save images
     const sizes = [
-      { name: "large", width: 1024 },
-      { name: "medium", width: 640, height: 360 },
-      { name: "thumbnail", width: 320, height: 180 },
+      { name: "large", width: 1024, quality: 80 },
+      { name: "medium", width: 640, height: 360, quality: 70 },
+      { name: "thumbnail", width: 320, height: 180, quality: 60 },
     ]
 
     const urls = await Promise.all(
       sizes.map(async (size) => {
-        const resizedBuffer = await sharp(buffer).resize(size.width).toBuffer()
+        let resizedImage = sharp(buffer).resize(size.width, size.height)
+        const format = file.type.split("/")[1]
+
+        switch (format) {
+          case "jpeg":
+          case "jpg":
+            resizedImage = resizedImage.jpeg({ quality: size.quality })
+            break
+          case "png":
+            resizedImage = resizedImage.png({ quality: size.quality })
+            break
+          case "webp":
+            resizedImage = resizedImage.webp({ quality: size.quality })
+            break
+          // Add more cases for other formats if needed
+        }
+
+        const resizedBuffer = await resizedImage.toBuffer()
 
         const resizedFileName = `${size.name}-${fileName}`
         const filePath = path.join(uploadDir, resizedFileName)
 
         await fs.writeFile(filePath, resizedBuffer)
 
-        return `/images/${folderName}/${resizedFileName}`
+        return `/uploads/${folderName}/${resizedFileName}`
       })
     )
 
@@ -118,8 +135,6 @@ export async function POST(request: NextRequest) {
       data: image,
     })
   } catch (error) {
-    console.log(">>>>>", error)
-
     // TODO: Log error
     // TODO: Return error message
     return Response.error()