feat: add file uploads

Author: syedubaid11

backend/package-lock.json

@@ -66,7 +66,8 @@
     "tsconfig-paths": "^4.2.0",
     "tsx": "^4.19.2",
     "typescript": "^5.7.3",
-    "typescript-eslint": "^8.20.0"
+    "typescript-eslint": "^8.20.0",
+    "wrangler": "^4.3.0"
   },
   "jest": {
     "moduleFileExtensions": [

backend/package.json

@@ -1,31 +1,9 @@
 import { Injectable } from '@nestjs/common';
-import { createClient } from '@supabase/supabase-js';
 require ('dotenv').config();
 
 @Injectable()
 export class FilesUploadService {
-    private supabase = createClient(
-        process.env.SUPABASE_URL as string,
-        process.env.SUPABASE_KEY as string
-    ); 
-    handlesupabase(){
-        if(this.supabase){
-            return 'supabase is connected'
-
-        }
-        else {
-            return 'supabase not connected'
-        }
-    }
 
-    handleFileUpload(file:Express.Multer.File): string {
-        if(!file){
-            return 'file not uploaded'
-        }
-        else{
-            return 'file uploaded successfully'
-        }
-        
-        //do error handling if file is not uploaded
-    }
+    
+    
 }

backend/src/admin/admin.controller.spec.ts

@@ -23,7 +23,6 @@ interface DashboardProps{
 export default function Dashboard(){
     const [upload,setUpload]=useState<boolean>(true);
     const [friends,setFriend]=useState<boolean>(false);
-   
 
     const {user}=useUser();
 
@@ -72,7 +71,9 @@ export default function Dashboard(){
 
 
                                     <div className={`flex flex-row items-center justify-center mt-[10px] gap-[10px] bg-gray-100 p-[5px] z-10 rounded-md`}>
-                                        <Button className="" variant="outline" size="lg" onClick={async () => { 
+                                        
+                                        
+                                        <Button className="" variant="outline" size="lg" onClick={async () => {
                                             setUpload(true);
                                             setFriend(false)
                                             const result = await axios.post('http://localhost:3001/files/upload');

backend/src/admin/admin.controller.ts

@@ -1,15 +1,46 @@
-import { Button } from "./ui/button"
-
-export const Upload=()=>{
-    return(
-        <>
-        <div className="flex flex-col items-center justify-center h-[200px] w-[350px] mt-[20px] border rounded-lg border-gray-300">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="0.8" stroke="currentColor" className="size-12">
-               <path stroke-linecap="round" stroke-linejoin="round" d="M9 8.25H7.5a2.25 2.25 0 0 0-2.25 2.25v9a2.25 2.25 0 0 0 2.25 2.25h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25H15m0-3-3-3m0 0-3 3m3-3V15" />
-            </svg>
-            <div className="hidden md:block text-gray-500 mt-[8px]">Drag and Drop the file</div>
-            <Button className="mt-[8px]">Browse</Button>
-        </div>
-        </>
-    )
-}
+import { Button } from "./ui/button";
+import { useState } from "react";
+import axios from "axios";
+
+export const Upload = () => {
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files && e.target.files.length > 0) {
+      setSelectedFile(e.target.files[0]);
+    }
+  };
+
+  const handleFileUpload = async () => {
+    if (!selectedFile) {
+      alert("Please select a file first");
+      return;
+    }
+
+    const formData = new FormData();
+    formData.append("file", selectedFile);
+
+    try {
+      const response = await axios.post("http://localhost:3001/upload", formData, {
+        headers: { "Content-Type": "multipart/form-data" },
+      });
+
+      console.log("File uploaded successfully:", response.data);
+    } catch (error) {
+      console.error("Error uploading file:", error);
+    }
+  };
+
+  return (
+    <div className="flex flex-col items-center justify-center h-[250px] w-[350px] mt-5 border rounded-lg border-gray-300 p-4">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="size-12">
+        <path strokeLinecap="round" strokeLinejoin="round" d="M9 8.25H7.5a2.25 2.25 0 0 0-2.25 2.25v9a2.25 2.25 0 0 0 2.25 2.25h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25H15m0-3-3-3m0 0-3 3m3-3V15" />
+      </svg>
+      <div className="text-gray-500 mt-2">Drag and Drop the file</div>
+      <input type="file" onChange={handleFileChange} className="mt-3 mb-2" />
+      <Button onClick={handleFileUpload} disabled={!selectedFile}>
+        Upload
+      </Button>
+    </div>
+  );
+};