perf: 🚸 Type: Refactoring, Improvement | Title: Refactoring file upload and handling in the application

app/api/uploadthing/core.ts

@@ -6,19 +6,13 @@ const f = createUploadthing();
 export const ourFileRouter = {
   imageUploader: f({ image: { maxFileSize: "4MB" } })
     .middleware(async ({ req }) => {
-      const user = await getToken({ req, secret: process.env.SECRET });
+      const user = await getToken({ req });
 
       if (!user) throw new Error("Unauthorized");
 
       return { userId: user.id };
     })
-    .onUploadComplete(async ({ metadata, file }) => {
-      console.log("Upload complete for userId:", metadata.userId);
-
-      console.log("file url", file.url);
-
-      return { uploadedBy: metadata.userId };
-    }),
+    .onUploadComplete(async ({ metadata, file }) => {}),
 } satisfies FileRouter;
 
 export type OurFileRouter = typeof ourFileRouter;

components/rich-text-editor/editor-setup.tsx

@@ -3,7 +3,7 @@
 import { BlockNoteEditor } from "@blocknote/core";
 import { BlockNoteView, useBlockNote } from "@blocknote/react";
 import "@blocknote/core/style.css";
-import { Uploader } from "@/lib/uploadthing";
+import { uploadFiles } from "@/lib/uploadthing";
 
 type EditorSetupProps = {
   onChange: (value: string) => void;
@@ -12,19 +12,28 @@ type EditorSetupProps = {
 };
 
 const EditorSetup = ({ onChange, editable }: EditorSetupProps) => {
-  const handleUpload = async (file: File) => {
-    const uploadData = { file: file, endpoint: "imageUploader" as const };
-    const res = await Uploader(uploadData);
+  const handleUploadFile = async (file: File): Promise<string> => {
+    try {
+      const endpoint = "imageUploader";
+      const options = {
+        files: [file],
+      };
 
-    return res.props.file;
+      const [res] = await uploadFiles(endpoint, options);
+
+      return res.url;
+    } catch (error) {
+      console.error("Error uploading file:", error);
+      throw new Error("File upload failed");
+    }
   };
 
   const editor: BlockNoteEditor = useBlockNote({
     editable,
     onEditorContentChange: (editor) => {
       onChange(JSON.stringify(editor.topLevelBlocks, null, 2));
     },
-    uploadFile: handleUpload,
+    uploadFile: handleUploadFile,
   });
 
   return (

lib/uploadthing.ts

@@ -1,6 +1,9 @@
 import { generateComponents } from "@uploadthing/react";
+import { generateReactHelpers } from "@uploadthing/react/hooks";
 
 import type { OurFileRouter } from "@/app/api/uploadthing/core";
 
 export const { UploadButton, UploadDropzone, Uploader } =
   generateComponents<OurFileRouter>();
+
+export const { uploadFiles } = generateReactHelpers<OurFileRouter>();