refactor: Extract useUpload into its own reusable hook

1 files changed, 38 insertions, 0 deletions

diff --git a/apps/web/lib/hooks/upload-file.ts b/apps/web/lib/hooks/upload-file.ts
new file mode 100644
index 00000000..42d1cb42
--- /dev/null
+++ b/apps/web/lib/hooks/upload-file.ts
@@ -0,0 +1,38 @@
+import { useMutation } from "@tanstack/react-query";
+
+import {
+  ZUploadError,
+  zUploadErrorSchema,
+  ZUploadResponse,
+  zUploadResponseSchema,
+} from "@hoarder/shared/types/uploads";
+
+export default function useUpload({
+  onSuccess,
+  onError,
+}: {
+  onError?: (e: ZUploadError, req: File) => void;
+  onSuccess?: (resp: ZUploadResponse, req: File) => Promise<void>;
+}) {
+  return useMutation({
+    mutationFn: async (file: File) => {
+      const formData = new FormData();
+      formData.append("file", file);
+      const resp = await fetch("/api/assets", {
+        method: "POST",
+        body: formData,
+      });
+      if (!resp.ok) {
+        throw new Error(await resp.text());
+      }
+      return zUploadResponseSchema.parse(await resp.json());
+    },
+    onSuccess: onSuccess,
+    onError: (error, req) => {
+      const err = zUploadErrorSchema.parse(JSON.parse(error.message));
+      if (onError) {
+        onError(err, req);
+      }
+    },
+  });
+}