feat: add Bytescale image uploads

2026-04-14 17:33:21 +05:30
parent 0fddd7a656
commit c282b1825e
15 changed files with 498 additions and 197 deletions
@@ -0,0 +1,109 @@
+import { useState, useRef } from "react";
+import * as Bytescale from "@bytescale/sdk";
+import { Button } from "@/components/ui/button";
+import { User, X, Loader2 } from "lucide-react";
+
+interface BytescaleUploaderProps {
+	value: string;
+	onChange: (url: string) => void;
+	folderPath: "/doctors" | "/departments" | "/news";
+}
+
+const uploadManager = new Bytescale.UploadManager({
+	apiKey: "public_223k2cv3MyaAxBeyALCfJa8EMLek",
+});
+
+export function BytescaleUploader({ value, onChange }: BytescaleUploaderProps) {
+	const [isUploading, setIsUploading] = useState(false);
+	const fileInputRef = useRef<HTMLInputElement>(null);
+
+	const onFileSelected = async (event: React.ChangeEvent<HTMLInputElement>) => {
+		const file = event.target.files?.[0];
+		if (!file) return;
+
+		setIsUploading(true);
+		try {
+			const { fileUrl } = await uploadManager.upload({
+				data: file,
+				path: {
+					folderPath: "/doctors",
+				},
+			});
+
+			onChange(fileUrl);
+		} catch (e: any) {
+			console.error("Upload Error:", e);
+			alert(`Error:\n${e.message}`);
+		} finally {
+			setIsUploading(false);
+			if (fileInputRef.current) fileInputRef.current.value = "";
+		}
+	};
+
+	return (
+		<div className="flex flex-col gap-2 p-3 border rounded-md bg-muted/5">
+			<div className="flex items-center gap-4">
+				<div className="relative">
+					{value ? (
+						<>
+							<img
+								src={value}
+								className="w-16 h-16 rounded-full object-cover border-2 border-primary/20"
+								alt="Doctor Profile"
+							/>
+							<button
+								type="button"
+								onClick={() => onChange("")}
+								className="absolute -top-1 -right-1 bg-destructive text-white rounded-full p-0.5 shadow-sm hover:scale-110 transition-transform"
+							>
+								<X className="w-3 h-3" />
+							</button>
+						</>
+					) : (
+						<div className="w-16 h-16 rounded-full bg-muted flex items-center justify-center">
+							{isUploading ? (
+								<Loader2 className="w-8 h-8 animate-spin text-primary" />
+							) : (
+								<User className="w-8 h-8 text-muted-foreground" />
+							)}
+						</div>
+					)}
+				</div>
+
+				<input
+					type="file"
+					ref={fileInputRef}
+					onChange={onFileSelected}
+					accept="image/jpeg,image/png,image/webp"
+					className="hidden"
+				/>
+
+				<Button
+					type="button"
+					variant="outline"
+					size="sm"
+					disabled={isUploading}
+					onClick={() => fileInputRef.current?.click()}
+				>
+					{isUploading ? (
+						<>
+							<Loader2 className="mr-2 h-4 w-4 animate-spin" />
+							Uploading...
+						</>
+					) : value ? (
+						"Change Photo"
+					) : (
+						"Upload Photo"
+					)}
+				</Button>
+			</div>
+
+			{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.
+				</p>
+			)}
+		</div>
+	);
+}