more blobbing

src/app/page.tsx

@@ -15,8 +15,22 @@ const Page: React.FC = (): React.ReactElement => {
 
   const handleImageAnalysis = () => {
     return async (imageFile: File): Promise<VisionAnalysisResult> => {
-
-      return analyzeImage(imageFile)
+      const reader = new FileReader();
+      return new Promise((resolve, reject) => {
+        reader.onload = async (event) => {
+          try {
+            const arrayBuffer = event.target.result as ArrayBuffer;
+            const buffer = Buffer.from(arrayBuffer);
+            const filename = imageFile.name;
+            const result = await analyzeImage(buffer, filename);
+            resolve(result);
+          } catch (error) {
+            reject(error);
+          }
+        };
+        reader.onerror = (error) => reject(error);
+        reader.readAsArrayBuffer(imageFile);
+      });
     }
   }
 

src/services/googleVisionService.ts

@@ -21,10 +21,13 @@ export const VISION_CONFIG: VisionConfig = {
   description: "Upload photos of " + APP_CONFIG.description + " in " + APP_CONFIG.location + " to help with conservation research.",
 }
 
-export async function analyzeImage(imageFile: File): Promise<VisionAnalysisResult> {
+export async function analyzeImage(imageBuffer: Buffer, filename: string): Promise<VisionAnalysisResult> {
   try {
     const formData = new FormData()
-    formData.append('image', imageFile)
+    
+    // Create file from buffer using Blob
+    const blob = new Blob([imageBuffer], { type: 'image/jpeg' })
+    formData.append('image', blob, filename)
 
     const response = await fetch('/api/analyze', {
       method: 'POST',