feat: readFileAsBase64 function

grycap · Nov 9, 2024 · ee04b49 · ee04b49
1 parent 79e102c
commit ee04b49
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 25 deletions.
diff --git a/src/api/invoke/invokeServiceSync.ts b/src/api/invoke/invokeServiceSync.ts
@@ -1,4 +1,3 @@
-import { alert } from "@/lib/alert";
 import axios, { AxiosInstance } from "axios";
 
 interface InvokeServiceSyncProps {
@@ -8,47 +7,56 @@ interface InvokeServiceSyncProps {
   endpoint: string;
 }
 
-export async function invokeServiceSync({
+function readFileAsBase64(file: File): Promise<string> {
+  return new Promise<string>((resolve, reject) => {
+    const reader = new FileReader();
+
+    reader.onload = () => {
+      if (typeof reader.result === "string") {
+        const base64String = reader.result.startsWith("data:")
+          ? reader.result.split(",")[1]
+          : reader.result;
+        resolve(base64String);
+      } else {
+        reject(new Error("Failed to read file as a Base64 string."));
+      }
+    };
+
+    reader.onerror = () => {
+      reject(new Error("Error reading file."));
+    };
+
+    reader.readAsBinaryString(file);
+  });
+}
+
+export default async function invokeServiceSync({
   serviceName,
   file,
   token,
   endpoint,
 }: InvokeServiceSyncProps) {
+  // Create an Axios instance with the specified base URL
   const axiosInstance: AxiosInstance = axios.create({
     baseURL: endpoint,
-    headers: {
-      "Content-Type": "application/octet-stream",
-    },
   });
 
   try {
-    const base64Data = await new Promise<string>((resolve, reject) => {
-      const reader = new FileReader();
-      reader.readAsDataURL(file);
-      reader.onloadend = () => {
-        if (!reader.result || typeof reader.result !== "string") {
-          alert.error("Error reading file");
-          reject(new Error("Error reading file"));
-        } else {
-          resolve(reader.result.split(",")[1]);
-        }
-      };
-      reader.onerror = () => {
-        alert.error("Error reading file");
-        reject(new Error("Error reading file"));
-      };
-    });
+    const base64Data: string = await readFileAsBase64(file);
 
-    const url = `/run/${serviceName}`;
+    const url: string = `/run/${serviceName}`;
 
-    const response = await axiosInstance.post(url, base64Data, {
+    const response = await axiosInstance.post(url, btoa(base64Data), {
       headers: {
         Authorization: `Bearer ${token}`,
+        "Content-Type": "application/x-www-form-urlencoded",
       },
     });
 
     return response.data;
   } catch (error) {
-    alert.error("Error invoking service");
+    console.error("Error invoking service:", error);
+
+    throw new Error("Error invoking service");
   }
 }
diff --git a/src/pages/ui/services/components/InvokePopover/index.tsx b/src/pages/ui/services/components/InvokePopover/index.tsx
@@ -25,13 +25,13 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { invokeServiceSync } from "@/api/invoke/invokeServiceSync";
 import useServicesContext from "../../context/ServicesContext";
 import { Service } from "../../models/service";
 import { alert } from "@/lib/alert";
 import OscarColors from "@/styles";
 import { useAuth } from "@/contexts/AuthContext";
 import RequestButton from "@/components/RequestButton";
+import invokeServiceSync from "@/api/invoke/invokeServiceSync";
 
 type View = "upload" | "editor" | "response";
 
@@ -215,6 +215,10 @@ export function InvokePopover({ service, triggerRenderer }: Props) {
     </div>
   );
 
+  if (response) {
+    console.log("Response:", response);
+  }
+
   const [responseFileContent, setResponseFileContent] = useState<string>("");
   useEffect(() => {
     if (responseType === "file") {