fix: envkey upload timeout

frontend/src/hooks/api/migration/mutations.tsx

@@ -8,20 +8,27 @@ export const useImportEnvKey = () => {
   const queryClient = useQueryClient();
 
   return useMutation({
-    mutationFn: async ({
-      encryptedJson,
-      decryptionKey
-    }: {
-      encryptedJson: {
-        nonce: string;
-        data: string;
-      };
-      decryptionKey: string;
-    }) => {
-      await apiRequest.post("/api/v3/migrate/env-key/", {
-        encryptedJson,
-        decryptionKey
-      });
+    mutationFn: async ({ file, decryptionKey }: { file: File; decryptionKey: string }) => {
+      const formData = new FormData();
+
+      formData.append("decryptionKey", decryptionKey);
+      formData.append("file", file);
+
+      try {
+        const response = await apiRequest.post("/api/v3/migrate/env-key/", formData, {
+          headers: {
+            "Content-Type": "multipart/form-data"
+          },
+          onUploadProgress: (progressEvent) => {
+            const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
+            console.log(`Upload Progress: ${percentCompleted}%`);
+          }
+        });
+
+        console.log("Upload successful:", response.data);
+      } catch (error) {
+        console.error("Upload failed:", error);
+      }
     },
     onSuccess: () => {
       queryClient.invalidateQueries(workspaceKeys.getAllUserWorkspace);

frontend/src/views/Settings/OrgSettingsPage/components/ImportTab/components/EnvKeyPlatformModal.tsx

@@ -13,17 +13,13 @@ type Props = {
   onClose: () => void;
 };
 
-const formSchema = z.object({
-  encryptionKey: z.string().min(1),
-  encryptedJson: z.object({
-    nonce: z.string().min(1),
-    data: z.string().min(1)
-  })
-});
-
-type TFormData = z.infer<typeof formSchema>;
-
 export const EnvKeyPlatformModal = ({ onClose }: Props) => {
+  const formSchema = z.object({
+    encryptionKey: z.string().min(1),
+    file: z.instanceof(File)
+  });
+  type TFormData = z.infer<typeof formSchema>;
+
   const fileUploadRef = useRef<HTMLInputElement>(null);
 
   const { mutateAsync: importEnvKey } = useImportEnvKey();
@@ -40,8 +36,8 @@ export const EnvKeyPlatformModal = ({ onClose }: Props) => {
   });
 
   const onSubmit = async (data: TFormData) => {
-    if (!data.encryptedJson) {
-      setError("encryptedJson", {
+    if (!data.file) {
+      setError("file", {
         type: "required",
         message: "File is required"
       });
@@ -50,7 +46,7 @@ export const EnvKeyPlatformModal = ({ onClose }: Props) => {
 
     try {
       await importEnvKey({
-        encryptedJson: data.encryptedJson,
+        file: data.file,
         decryptionKey: data.encryptionKey
       });
       createNotification({
@@ -71,7 +67,6 @@ export const EnvKeyPlatformModal = ({ onClose }: Props) => {
   };
 
   const onImportFileDrop = (file?: File) => {
-    const reader = new FileReader();
     if (!file) {
       createNotification({
         text: "No file selected.",
@@ -79,40 +74,8 @@ export const EnvKeyPlatformModal = ({ onClose }: Props) => {
       });
       return;
     }
-    reader.onload = (event) => {
-      if (!event?.target?.result) return;
 
-      const droppedFile = event.target.result.toString();
-      const formattedData: Record<string, string> = JSON.parse(droppedFile);
-      if (
-        Object.keys(formattedData).includes("nonce") &&
-        Object.keys(formattedData).includes("data")
-      ) {
-        const data = {
-          nonce: formattedData.nonce,
-          data: formattedData.data
-        };
-        setValue("encryptedJson", data, { shouldDirty: true, shouldValidate: true });
-      } else {
-        setValue(
-          "encryptedJson",
-          {
-            nonce: "",
-            data: ""
-          },
-          { shouldDirty: true, shouldValidate: true }
-        );
-
-        if (fileUploadRef.current) {
-          fileUploadRef.current.value = "";
-        }
-        createNotification({
-          text: "Improper file format, please upload the EnvKey export.",
-          type: "error"
-        });
-      }
-    };
-    reader.readAsText(file);
+    setValue("file", file, { shouldDirty: true, shouldValidate: true });
   };
 
   return (