refactor: move Bytescale upload logic to backend for security

frontend/src/components/BytescaleUploader/BytescaleUploader.tsx

@@ -1,7 +1,7 @@
-import { useState, useRef } from "react";
-import * as Bytescale from "@bytescale/sdk";
-import { Button } from "@/components/ui/button";
-import { User, X, Loader2 } from "lucide-react";
+import {useState, useRef} from "react";
+import {Button} from "@/components/ui/button";
+import {User, X, Loader2} from "lucide-react";
+import axios from "axios";
 
 interface BytescaleUploaderProps {
 	value: string;
@@ -9,11 +9,11 @@ interface BytescaleUploaderProps {
 	folderPath: "/doctors" | "/departments" | "/news";
 }
 
-const uploadManager = new Bytescale.UploadManager({
-	apiKey: "public_223k2cv3MyaAxBeyALCfJa8EMLek",
-});
-
-export function BytescaleUploader({ value, onChange }: BytescaleUploaderProps) {
+export function BytescaleUploader({
+	value,
+	onChange,
+	folderPath,
+}: BytescaleUploaderProps) {
 	const [isUploading, setIsUploading] = useState(false);
 	const fileInputRef = useRef<HTMLInputElement>(null);
 
@@ -21,19 +21,35 @@ export function BytescaleUploader({ value, onChange }: BytescaleUploaderProps) {
 		const file = event.target.files?.[0];
 		if (!file) return;
 
-		setIsUploading(true);
-		try {
-			const { fileUrl } = await uploadManager.upload({
-				data: file,
-				path: {
-					folderPath: "/doctors",
-				},
-			});
+		if (file.size > 5 * 1024 * 1024) {
+			alert("File is too large (Max 5MB)");
+			return;
+		}
 
+		setIsUploading(true);
+
+		const formData = new FormData();
+		formData.append("file", file);
+		formData.append("folderPath", folderPath);
+
+		try {
+			const response = await axios.post(
+				"http://localhost:3000/api/upload",
+				formData,
+				{
+					headers: {
+						"Content-Type": "multipart/form-data",
+					},
+				},
+			);
+
+			const {fileUrl} = response.data;
 			onChange(fileUrl);
 		} catch (e: any) {
 			console.error("Upload Error:", e);
-			alert(`Error:\n${e.message}`);
+			const errorMessage =
+				e.response?.data?.error || e.message || "Upload failed";
+			alert(`Upload Error: ${errorMessage}`);
 		} finally {
 			setIsUploading(false);
 			if (fileInputRef.current) fileInputRef.current.value = "";
@@ -49,7 +65,7 @@ export function BytescaleUploader({ value, onChange }: BytescaleUploaderProps) {
 							<img
 								src={value}
 								className="w-16 h-16 rounded-full object-cover border-2 border-primary/20"
-								alt="Doctor Profile"
+								alt="Preview"
 							/>
 							<button
 								type="button"
@@ -100,8 +116,8 @@ export function BytescaleUploader({ value, onChange }: BytescaleUploaderProps) {
 
 			{value && (
 				<p className="text-xs text-amber-600 pl-[72px]">
-					⚠️ Make sure to save the changes by clicking the "Save Changes" button
-					at the bottom.
+					⚠️ Make sure to save the changes by clicking the "Save Changes"
+					button.
 				</p>
 			)}
 		</div>