Add FileUpload component for GSoC 2025 prep

src/App.tsx

@@ -17,6 +17,7 @@ import UseShare from "./components/UseShare";
 import LearnContent from "./components/Content";
 import FloatingFAB from "./components/FabButton";
 import ResizableContainer from "./components/ResizableContainer";
+import FileUpload from "./components/FileUpload";
 
 const { Content } = Layout;
 
@@ -129,7 +130,7 @@ const App = () => {
                 display: "flex",
                 justifyContent: "center",
                 alignItems: "center",
-                minHeight: "calc(100vh - 64px - 70px)", // Adjust for Navbar and Footer height
+                minHeight: "calc(100vh - 64px - 70px)",
               }}
             >
               <Spinner />
@@ -159,6 +160,7 @@ const App = () => {
                         >
                           <SampleDropdown setLoading={setLoading} />
                           <UseShare />
+                          <FileUpload />
                         </Row>
                       </Col>
                       <Col span={18}>
@@ -173,19 +175,19 @@ const App = () => {
                       }}
                     >
                       <ResizableContainer
-  leftPane={
-    <Collapse
-      defaultActiveKey={activePanel}
-      onChange={onChange}
-      items={panels}
-     style={{ marginBottom: "24px" }}
-    />
-  }
-  rightPane={<AgreementHtml loading={loading} isModal={false} />}
-  initialLeftWidth={66}
-  minLeftWidth={30}
-  minRightWidth={30}
-/>
+                        leftPane={
+                          <Collapse
+                            defaultActiveKey={activePanel}
+                            onChange={onChange}
+                            items={panels}
+                            style={{ marginBottom: "24px" }}
+                          />
+                        }
+                        rightPane={<AgreementHtml loading={loading} isModal={false} />}
+                        initialLeftWidth={66}
+                        minLeftWidth={30}
+                        minRightWidth={30}
+                      />
                     </div>
                     <FloatingFAB />
                   </div>

src/components/FileUpload.tsx

@@ -0,0 +1,64 @@
+import React, { useCallback } from 'react';
+import { Upload, Button, message } from 'antd';
+import { UploadOutlined } from '@ant-design/icons';
+import type { UploadFile } from 'antd/es/upload/interface';
+import useAppStore from '../store/store';
+
+const { Dragger } = Upload;
+
+const FileUpload: React.FC = () => {
+  const { setTemplateMarkdown, setModelCto, setData } = useAppStore();
+
+  const handleFileUpload = useCallback(async (file: File) => {
+    try {
+      const content = await file.text();
+
+      // Determine file type based on extension
+      const fileExtension = file.name.split('.').pop()?.toLowerCase();
+
+      switch (fileExtension) {
+        case 'md':
+          await setTemplateMarkdown(content);
+          message.success('Template file loaded successfully');
+          break;
+        case 'cto':
+          await setModelCto(content);
+          message.success('Model file loaded successfully');
+          break;
+        case 'json':
+          await setData(content);
+          message.success('Data file loaded successfully');
+          break;
+        default:
+          message.error('Unsupported file type. Please upload .md, .cto, or .json files');
+      }
+    } catch (error) {
+      message.error('Failed to read file');
+      console.error('File upload error:', error);
+    }
+  }, [setTemplateMarkdown, setModelCto, setData]);
+
+  const uploadProps = {
+    name: 'file',
+    multiple: false,
+    accept: '.md,.cto,.json',
+    beforeUpload: (file: File) => {
+      handleFileUpload(file);
+      return false; // Prevent default upload behavior
+    },
+  };
+
+  return (
+    <Dragger {...uploadProps}>
+      <p className="ant-upload-drag-icon">
+        <UploadOutlined />
+      </p>
+      <p className="ant-upload-text">Click or drag file to upload</p>
+      <p className="ant-upload-hint">
+        Support for .md (Template), .cto (Model), or .json (Data) files
+      </p>
+    </Dragger>
+  );
+};
+
+export default FileUpload;