Merge pull request #7 from landing-ai/feat/upload-api

app/api/upload/route.ts

@@ -1,4 +1,5 @@
 import { auth } from '@/auth';
+import { upload } from '@/lib/aws';
 import { ChatEntity, MessageBase } from '@/lib/types';
 import { nanoid } from '@/lib/utils';
 import { kv } from '@vercel/kv';
@@ -17,31 +18,56 @@ export async function POST(req: Request): Promise<Response> {
     });
   }
 
-  const { url, initMessages } = (await req.json()) as {
-    url?: string;
-    file?: File;
-    base64?: string;
-    initMessages?: MessageBase[];
-  };
-
-  const id = nanoid();
-
-  const payload: ChatEntity = {
-    url: url!, // TODO can be uploaded as well
-    id,
-    user: email,
-    messages: initMessages ?? [],
-  };
-
-  await kv.hmset(`chat:${id}`, payload);
-  await kv.zadd(`user:chat:${email}`, {
-    score: Date.now(),
-    member: `chat:${id}`,
-  });
-  await kv.zadd('user:chat:all', {
-    score: Date.now(),
-    member: `chat:${id}`,
-  });
-
-  return Response.json(payload);
+  try {
+    const { url, base64, initMessages, fileType } = (await req.json()) as {
+      url?: string;
+      file?: File;
+      base64?: string;
+      fileType?: string;
+      initMessages?: MessageBase[];
+    };
+
+    if (!url && !base64) {
+      return new Response('Missing both url and base64 in payload', {
+        status: 400,
+      });
+    }
+
+    const id = nanoid();
+
+    let urlToSave = url;
+    if (base64) {
+      const fileName = `${email}/${id}/${Date.now()}-image.jpg`;
+      const res = await upload(base64, fileName, fileType ?? 'image/png');
+      if (res.ok) {
+        console.log('Image uploaded successfully');
+        urlToSave = `https://${process.env.AWS_BUCKET_NAME}.s3.${process.env.AWS_REGION}.amazonaws.com/${fileName}`;
+      } else {
+        throw new Error('Failed to upload image');
+      }
+    }
+
+    const payload: ChatEntity = {
+      url: urlToSave!, // TODO can be uploaded as well
+      id,
+      user: email,
+      messages: initMessages ?? [],
+    };
+
+    await kv.hmset(`chat:${id}`, payload);
+    await kv.zadd(`user:chat:${email}`, {
+      score: Date.now(),
+      member: `chat:${id}`,
+    });
+    await kv.zadd('user:chat:all', {
+      score: Date.now(),
+      member: `chat:${id}`,
+    });
+
+    return Response.json(payload);
+  } catch (error) {
+    return new Response((error as Error).message, {
+      status: 400,
+    });
+  }
 }

components/chat-sidebar/ChatCard.tsx

@@ -30,7 +30,7 @@ const ChatCard: React.FC<ChatCardProps> = ({ chat }) => {
           className="rounded w-1/4 "
         />
         <p className="text-xs text-gray-500 w-3/4 ml-2">
-          {messages?.[0].content.slice(0, 50) + ' ...' ?? 'new chat'}
+          {messages?.[0]?.content.slice(0, 50) + ' ...' ?? 'new chat'}
         </p>
       </div>
     </Link>

components/chat/ImageSelector.tsx

@@ -32,7 +32,30 @@ const examples: Example[] = [
 
 const ImageSelector: React.FC<ImageSelectorProps> = () => {
   const router = useRouter();
-  const { getRootProps, getInputProps } = useImageUpload();
+  const { getRootProps, getInputProps } = useImageUpload(
+    undefined,
+    async files => {
+      const formData = new FormData();
+      if (files.length !== 1) {
+        throw new Error('Only one image can be uploaded at a time');
+      }
+      console.log();
+      const reader = new FileReader();
+      reader.readAsDataURL(files[0]);
+      reader.onload = async () => {
+        const resp = await fetcher<ChatEntity>('/api/upload', {
+          method: 'POST',
+          body: JSON.stringify({
+            base64: reader.result as string,
+            fileType: files[0].type,
+          }),
+        });
+        if (resp) {
+          router.push(`/chat/${resp.id}`);
+        }
+      };
+    },
+  );
   return (
     <div className="mx-auto max-w-2xl px-4 mt-8">
       <div className="rounded-lg border bg-background p-8">
@@ -62,6 +85,9 @@ const ImageSelector: React.FC<ImageSelectorProps> = () => {
               onClick={async () => {
                 const resp = await fetcher<ChatEntity>('/api/upload', {
                   method: 'POST',
+                  headers: {
+                    'Content-Type': 'application/json',
+                  },
                   body: JSON.stringify({ url, initMessages }),
                 });
                 if (resp) {

lib/aws.ts

@@ -0,0 +1,43 @@
+import { createPresignedPost } from '@aws-sdk/s3-presigned-post';
+import { S3Client } from '@aws-sdk/client-s3';
+import { fromEnv } from '@aws-sdk/credential-providers';
+
+const s3Client = new S3Client({
+  region: process.env.AWS_REGION,
+  credentials: fromEnv(),
+});
+
+const FILE_SIZE_LIMIT = 10485760; // 10MB
+
+export const upload = async (
+  base64: string,
+  fileName: string,
+  fileType: string,
+) => {
+  const imageBuffer = Buffer.from(base64, 'base64');
+  const { url, fields } = await createPresignedPost(s3Client, {
+    Bucket: process.env.AWS_BUCKET_NAME ?? 'vision-agent-dev',
+    Key: fileName,
+    Conditions: [
+      ['content-length-range', 0, FILE_SIZE_LIMIT],
+      ['starts-with', '$Content-Type', fileType],
+    ],
+    Fields: {
+      acl: 'public-read',
+      'Content-Type': fileType,
+    },
+    Expires: 600,
+  });
+  const formData = new FormData();
+  Object.entries(fields).forEach(([key, value]) => {
+    formData.append(key, value as string);
+  });
+  const res = await fetch(base64);
+  const blob = await res.blob();
+  formData.append('file', blob);
+
+  return fetch(url, {
+    method: 'POST',
+    body: formData,
+  });
+};

lib/hooks/useImageUpload.ts

@@ -1,52 +1,55 @@
-import { useAtom } from 'jotai';
 import { DropzoneOptions, useDropzone } from 'react-dropzone';
-import { datasetAtom } from '../../state';
-import { toast } from 'react-hot-toast';
+// import { toast } from 'react-hot-toast';
 
-const useImageUpload = (options?: Partial<DropzoneOptions>) => {
+const useImageUpload = (
+  options?: Partial<DropzoneOptions>,
+  onDrop?: (files: File[]) => void,
+) => {
   const { getRootProps, getInputProps, isDragActive } = useDropzone({
     accept: {
       'image/*': ['.jpeg', '.png'],
     },
-    multiple: true,
-    onDrop: acceptedFiles => {
-      // if (acceptedFiles.length > 10) {
-      // 	toast('You can only upload 10 images max.', {
-      // 		icon: '⚠️',
-      // 	});
-      // }
-      acceptedFiles.forEach(file => {
-        try {
-          const reader = new FileReader();
-          reader.onloadend = () => {
-            // const newImage = reader.result as string;
-            // setTarget(prev => {
-            // 	// Check if the image already exists in the state
-            // 	if (
-            // 		// prev.length >= 10 ||
-            // 		prev.find(entity => entity.url === newImage)
-            // 	) {
-            // 		// If it does, return the state unchanged
-            // 		return prev;
-            // 	} else {
-            // 		// If it doesn't, add the new image to the state
-            // 		return [
-            // 			...prev,
-            // 			{
-            // 				url: newImage,
-            // 				selected: false,
-            // 				name: `i-${prev.length + 1}`,
-            // 			} satisfies DatasetImageEntity,
-            // 		];
-            // 	}
-            // });
-          };
-          reader.readAsDataURL(file);
-        } catch (err) {
-          console.error(err);
-        }
-      });
-    },
+    multiple: false,
+    onDrop: onDrop
+      ? onDrop
+      : acceptedFiles => {
+          // if (acceptedFiles.length > 10) {
+          // 	toast('You can only upload 10 images max.', {
+          // 		icon: '⚠️',
+          // 	});
+          // }
+          acceptedFiles.forEach(file => {
+            try {
+              const reader = new FileReader();
+              reader.onloadend = () => {
+                // const newImage = reader.result as string;
+                // setTarget(prev => {
+                //   // Check if the image already exists in the state
+                //   if (
+                //     // prev.length >= 10 ||
+                //     prev.find(entity => entity.url === newImage)
+                //   ) {
+                //     // If it does, return the state unchanged
+                //     return prev;
+                //   } else {
+                //     // If it doesn't, add the new image to the state
+                //     return [
+                //       ...prev,
+                //       {
+                //         url: newImage,
+                //         selected: false,
+                //         name: `i-${prev.length + 1}`,
+                //       } satisfies DatasetImageEntity,
+                //     ];
+                //   }
+                // });
+              };
+              reader.readAsDataURL(file);
+            } catch (err) {
+              console.error(err);
+            }
+          });
+        },
     ...options,
   });
 

package.json

@@ -13,6 +13,9 @@
     "format:check": "prettier --check \"{app,lib,components}**/*.{ts,tsx,mdx}\" --cache"
   },
   "dependencies": {
+    "@aws-sdk/client-s3": "^3.556.0",
+    "@aws-sdk/credential-providers": "^3.556.0",
+    "@aws-sdk/s3-presigned-post": "^3.556.0",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-select": "^2.0.0",