fix: validate the import preset

client/src/components/Input/Endpoints/FileUpload.jsx

@@ -3,23 +3,24 @@ import { useSetRecoilState } from 'recoil';
 import { FileUp } from 'lucide-react';
 import store from '~/store';
 import axios from 'axios';
+import cleanupPreset from '~/utils/cleanupPreset.js';
 
-async function fetchPresets(callback) {
-  try {
-    const response = await axios.get('/api/presets', {
-      timeout: 1000,
-      withCredentials: true
-    });
+// async function fetchPresets(callback) {
+//   try {
+//     const response = await axios.get('/api/presets', {
+//       timeout: 1000,
+//       withCredentials: true
+//     });
 
-    callback(response.data);
-  } catch (error) {
-    console.error(error);
-    console.log('[FileUpload] Error fetching presets');
-  }
-}
+//     callback(response.data);
+//   } catch (error) {
+//     console.error(error);
+//     console.log('[FileUpload] Error fetching presets');
+//   }
+// }
 
 const FileUpload = ({ onFileSelected }) => {
-  const setPresets = useSetRecoilState(store.presets);
+  // const setPresets = useSetRecoilState(store.presets);
 
   const handleFileChange = event => {
     const file = event.target.files[0];
@@ -28,7 +29,7 @@ const FileUpload = ({ onFileSelected }) => {
     const reader = new FileReader();
     reader.onload = e => {
       const jsonData = JSON.parse(e.target.result);
-      onFileSelected(jsonData, () => fetchPresets(setPresets));
+      onFileSelected({ ...cleanupPreset(jsonData), presetId: null });
     };
     reader.readAsText(file);
   };
@@ -42,6 +43,7 @@ const FileUpload = ({ onFileSelected }) => {
       <span className="ml-1 flex text-xs ">Import</span>
       <input
         id="file-upload"
+        value=""
         type="file"
         className="hidden "
         accept=".json"

client/src/components/Input/Endpoints/NewConversationMenu.jsx

@@ -42,6 +42,10 @@ export default function NewConversationMenu() {
     setPresets(data);
   });
 
+  const importPreset = jsonData => {
+    handleFileSelected(jsonData).then(setPresets);
+  };
+
   // update the default model when availableModels changes
   // typically, availableModels changes => modelsFilter or customGPTModels changes
   useEffect(() => {
@@ -136,7 +140,7 @@ export default function NewConversationMenu() {
           <DropdownMenuLabel className="flex items-center dark:text-gray-300">
             <span>Select a Preset</span>
             <div className="flex-1" />
-            <FileUpload onFileSelected={handleFileSelected} />
+            <FileUpload onFileSelected={importPreset} />
             <Dialog>
               <DialogTrigger asChild>
                 <Button

client/src/utils/fetchers.js

@@ -73,21 +73,23 @@ export function useManualSWR({ path, params, type, onSuccess }) {
   return useSWRMutation(path, fetchFunction, options);
 }
 
-export const handleFileSelected = async (jsonData, callback) => {
+export const handleFileSelected = async jsonData => {
   try {
-    const response = await fetch('/api/presets', {
+    const response = await axios({
+      url: '/api/presets',
       method: 'POST',
       headers: {
-        'Content-Type': 'application/json',
+        'Content-Type': 'application/json'
       },
-      body: JSON.stringify(jsonData),
+      withCredentials: true,
+      data: JSON.stringify(jsonData)
     });
 
-    if (!response.ok) {
-      throw new Error(`Error: ${response.statusText}`);
-    }
-
-    callback();
+    // if (!response.ok) {
+    //   throw new Error(`Error: ${response.statusText}`);
+    // }
+    console.log(response);
+    return response.data;
   } catch (error) {
     console.error('Error uploading the preset:', error);
   }