handle error when uploading avatar

app/components/dashboard/AvatarForm.tsx

@@ -41,10 +41,16 @@ const AvatarEditorModal: React.FC<{
 
   useEffect(() => {
     if (fetcher.type === "done") {
-      setIsOpen(false)
-      toast.success("Updated!")
+      if (fetcher.data.ok) {
+        setIsOpen(false)
+        toast.success("Updated!")
+      } else if (typeof fetcher.data === "string") {
+        toast.error(fetcher.data)
+      } else if (fetcher.data.error) {
+        toast.error(fetcher.data.error)
+      }
     }
-  }, [fetcher.type, setIsOpen])
+  }, [fetcher, setIsOpen])
 
   return (
     <Dialog

app/routes/api/save-avatar.ts

@@ -11,35 +11,45 @@ import { s3uploadFile } from "~/lib/s3.server"
 import { userModel } from "~/models/user.model"
 
 export const action: ActionFunction = async ({ request }) => {
-  const user = await getAuthUser(request, true)
+  try {
+    const user = await getAuthUser(request, true)
 
-  const uploadHandler: UploadHandler = async ({ stream }) => {
-    const chunks = []
-    for await (let chunk of stream) {
-      chunks.push(chunk)
+    const uploadHandler: UploadHandler = async ({ stream }) => {
+      const chunks = []
+      for await (let chunk of stream) {
+        chunks.push(chunk)
+      }
+      const buffer = Buffer.concat(chunks)
+      const filename = `${user.id}/${nanoid()}.jpg`
+      await s3uploadFile(filename, buffer, "image/jpeg")
+      return filename
+    }
+    const formData = await unstable_parseMultipartFormData(
+      request,
+      uploadHandler
+    )
+
+    const values = z
+      .object({
+        file: z.string(),
+        site: z.string().optional(),
+      })
+      .parse(Object.fromEntries(formData))
+
+    if (values.site) {
+      await siteController.updateSite(user, {
+        site: values.site,
+        icon: values.file,
+      })
+    } else {
+      await userModel.updateProfile(user, { avatar: values.file })
+    }
+
+    return { ok: true }
+  } catch (error: any) {
+    console.error(error)
+    return {
+      error: error.message,
     }
-    const buffer = Buffer.concat(chunks)
-    const filename = `${user.id}/${nanoid()}.jpg`
-    await s3uploadFile(filename, buffer, "image/jpeg")
-    return filename
   }
-  const formData = await unstable_parseMultipartFormData(request, uploadHandler)
-
-  const values = z
-    .object({
-      file: z.string(),
-      site: z.string().optional(),
-    })
-    .parse(Object.fromEntries(formData))
-
-  if (values.site) {
-    await siteController.updateSite(user, {
-      site: values.site,
-      icon: values.file,
-    })
-  } else {
-    await userModel.updateProfile(user, { avatar: values.file })
-  }
-
-  return null
 }