1 files changed, 50 insertions, 0 deletions
diff --git a/apps/web/app/(editor)/components/image-upload.ts b/apps/web/app/(editor)/components/image-upload.ts
new file mode 100644
index 00000000..d10be168
--- /dev/null
+++ b/apps/web/app/(editor)/components/image-upload.ts
@@ -0,0 +1,50 @@
+import { createImageUpload } from "novel/plugins";
+import { toast } from "sonner";
+
+const onUpload = (file: File) => {
+  //Endpoint: to upload the image
+  const promise = fetch("", {
+    method: "POST",
+    body: file,
+  });
+
+  return new Promise((resolve, reject) => {
+    toast.promise(
+      promise.then(async (res) => {
+        if (res.status === 200) {
+          const { url } = (await res.json()) as { url: string };
+          const image = new Image();
+          image.src = url;
+          image.onload = () => {
+            resolve(url);
+          };
+        } else {
+          throw new Error("Error uploading image. Please try again.");
+        }
+      }),
+      {
+        loading: "Uploading image...",
+        success: "Image uploaded successfully.",
+        error: (e) => {
+          reject(e);
+          return e.message;
+        },
+      },
+    );
+  });
+};
+
+export const uploadFn = createImageUpload({
+  onUpload,
+  validateFn: (file) => {
+    if (!file.type.includes("image/")) {
+      toast.error("File type not supported.");
+      return false;
+    }
+    if (file.size / 1024 / 1024 > 20) {
+      toast.error("File size too big (max 20MB).");
+      return false;
+    }
+    return true;
+  },
+});