refactor: move Bytescale upload logic to backend for security

Reviewed-on: #8

backend/package-lock.json

@@ -9,6 +9,7 @@
 			"version": "1.0.0",
 			"license": "ISC",
 			"dependencies": {
+				"@bytescale/sdk": "^3.53.0",
 				"@editorjs/editorjs": "^2.31.4",
 				"@editorjs/header": "^2.8.8",
 				"@editorjs/list": "^2.0.9",
@@ -21,13 +22,21 @@
 				"express-session": "^1.19.0",
 				"jsonwebtoken": "^9.0.3",
 				"multer": "^2.1.1",
+				"node-fetch": "^3.3.2",
 				"postmark": "^4.0.7",
-				"prisma": "^6.19.2"
+				"prisma": "^6.19.2",
+				"slugify": "^1.6.9"
 			},
 			"devDependencies": {
 				"nodemon": "^3.1.11"
 			}
 		},
+		"node_modules/@bytescale/sdk": {
+			"version": "3.53.0",
+			"resolved": "https://registry.npmjs.org/@bytescale/sdk/-/sdk-3.53.0.tgz",
+			"integrity": "sha512-qCeNup3pSjaklXuBrO9JeKbozZEs/PjQEvuqCiOAWLBRl6lDjd0V9gRVYqyttPimXYFoV+J/7dmPWtK6RfOABQ==",
+			"license": "MIT"
+		},
 		"node_modules/@codexteam/icons": {
 			"version": "0.0.5",
 			"resolved": "https://registry.npmjs.org/@codexteam/icons/-/icons-0.0.5.tgz",
@@ -599,6 +608,15 @@
 				"url": "https://opencollective.com/express"
 			}
 		},
+		"node_modules/data-uri-to-buffer": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz",
+			"integrity": "sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 12"
+			}
+		},
 		"node_modules/debug": {
 			"version": "4.4.3",
 			"resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
@@ -899,6 +917,29 @@
 				"node": ">=8.0.0"
 			}
 		},
+		"node_modules/fetch-blob": {
+			"version": "3.2.0",
+			"resolved": "https://registry.npmjs.org/fetch-blob/-/fetch-blob-3.2.0.tgz",
+			"integrity": "sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==",
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/jimmywarting"
+				},
+				{
+					"type": "paypal",
+					"url": "https://paypal.me/jimmywarting"
+				}
+			],
+			"license": "MIT",
+			"dependencies": {
+				"node-domexception": "^1.0.0",
+				"web-streams-polyfill": "^3.0.3"
+			},
+			"engines": {
+				"node": "^12.20 || >= 14.13"
+			}
+		},
 		"node_modules/fill-range": {
 			"version": "7.1.1",
 			"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
@@ -990,6 +1031,18 @@
 				"node": ">= 0.6"
 			}
 		},
+		"node_modules/formdata-polyfill": {
+			"version": "4.0.10",
+			"resolved": "https://registry.npmjs.org/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz",
+			"integrity": "sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==",
+			"license": "MIT",
+			"dependencies": {
+				"fetch-blob": "^3.1.2"
+			},
+			"engines": {
+				"node": ">=12.20.0"
+			}
+		},
 		"node_modules/forwarded": {
 			"version": "0.2.0",
 			"resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -1521,6 +1574,44 @@
 				"node": "^18 || ^20 || >= 21"
 			}
 		},
+		"node_modules/node-domexception": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz",
+			"integrity": "sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==",
+			"deprecated": "Use your platform's native DOMException instead",
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/jimmywarting"
+				},
+				{
+					"type": "github",
+					"url": "https://paypal.me/jimmywarting"
+				}
+			],
+			"license": "MIT",
+			"engines": {
+				"node": ">=10.5.0"
+			}
+		},
+		"node_modules/node-fetch": {
+			"version": "3.3.2",
+			"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.3.2.tgz",
+			"integrity": "sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA==",
+			"license": "MIT",
+			"dependencies": {
+				"data-uri-to-buffer": "^4.0.0",
+				"fetch-blob": "^3.1.4",
+				"formdata-polyfill": "^4.0.10"
+			},
+			"engines": {
+				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/node-fetch"
+			}
+		},
 		"node_modules/node-fetch-native": {
 			"version": "1.6.7",
 			"resolved": "https://registry.npmjs.org/node-fetch-native/-/node-fetch-native-1.6.7.tgz",
@@ -1727,7 +1818,6 @@
 			"integrity": "sha512-XTKeKxtQElcq3U9/jHyxSPgiRgeYDKxWTPOf6NkXA0dNj5j40MfEsZkMbyNpwDWCUv7YBFUl7I2VK/6ALbmhEg==",
 			"hasInstallScript": true,
 			"license": "Apache-2.0",
-			"peer": true,
 			"dependencies": {
 				"@prisma/config": "6.19.2",
 				"@prisma/engines": "6.19.2"
@@ -2064,6 +2154,15 @@
 				"node": ">=10"
 			}
 		},
+		"node_modules/slugify": {
+			"version": "1.6.9",
+			"resolved": "https://registry.npmjs.org/slugify/-/slugify-1.6.9.tgz",
+			"integrity": "sha512-vZ7rfeehZui7wQs438JXBckYLkIIdfHOXsaVEUMyS5fHo1483l1bMdo0EDSWYclY0yZKFOipDy4KHuKs6ssvdg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=8.0.0"
+			}
+		},
 		"node_modules/statuses": {
 			"version": "2.0.2",
 			"resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz",
@@ -2207,6 +2306,15 @@
 				"node": ">= 0.8"
 			}
 		},
+		"node_modules/web-streams-polyfill": {
+			"version": "3.3.3",
+			"resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.3.3.tgz",
+			"integrity": "sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 8"
+			}
+		},
 		"node_modules/wrappy": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",

backend/package.json

@@ -15,6 +15,7 @@
 	"license": "ISC",
 	"type": "module",
 	"dependencies": {
+		"@bytescale/sdk": "^3.53.0",
 		"@editorjs/editorjs": "^2.31.4",
 		"@editorjs/header": "^2.8.8",
 		"@editorjs/list": "^2.0.9",
@@ -27,8 +28,10 @@
 		"express-session": "^1.19.0",
 		"jsonwebtoken": "^9.0.3",
 		"multer": "^2.1.1",
+		"node-fetch": "^3.3.2",
 		"postmark": "^4.0.7",
-		"prisma": "^6.19.2"
+		"prisma": "^6.19.2",
+		"slugify": "^1.6.9"
 	},
 	"devDependencies": {
 		"nodemon": "^3.1.11"

backend/prisma/migrations/20260414083619_added_slug/migration.sql

@@ -0,0 +1,8 @@
+/*
+  Warnings:
+
+  - Added the required column `slug` to the `Blog` table without a default value. This is not possible if the table is not empty.
+
+*/
+-- AlterTable
+ALTER TABLE "Blog" ADD COLUMN     "slug" TEXT NOT NULL;

backend/prisma/migrations/20260414091055/migration.sql

@@ -0,0 +1,8 @@
+/*
+  Warnings:
+
+  - A unique constraint covering the columns `[slug]` on the table `Blog` will be added. If there are existing duplicate values, this will fail.
+
+*/
+-- CreateIndex
+CREATE UNIQUE INDEX "Blog_slug_key" ON "Blog"("slug");

backend/prisma/schema.prisma

@@ -96,6 +96,7 @@ model Blog {
   image    String?
   content  Json
   isActive Boolean @default(true)
+  slug     String @unique
 
   createdAt DateTime @default(now())
   updatedAt DateTime @updatedAt
@@ -178,7 +179,6 @@ model AcademicsResearch {
   updatedAt DateTime @updatedAt
 }
 
-
 model EmailConfig {
   id       Int     @id @default(autoincrement())
   name     String
@@ -192,6 +192,7 @@ model EmailConfig {
 
 model NewsMedia {
   id Int @id @default(autoincrement())
+
   headline   String
   content    String?
   firstPara  String?

backend/src/controllers/blog.controller.js

@@ -1,4 +1,5 @@
 import prisma from "../prisma/client.js";
+import slugify from "slugify";
 
 /* CREATE BLOG */
 
@@ -13,6 +14,7 @@ export async function createBlog(req, res) {
 				image,
 				content,
 				isActive,
+				slug: slugify(title),
 			},
 		});
 
@@ -54,6 +56,26 @@ export async function getAllBlogs(req, res) {
 /* GET SINGLE BLOG */
 
 export async function getBlog(req, res) {
+	try {
+		const slug = req.params.slug;
+
+		const blog = await prisma.blog.findUnique({
+			where: {slug},
+		});
+
+		if (!blog) {
+			return res.status(404).json({error: "Blog not found"});
+		}
+
+		res.json(blog);
+	} catch (error) {
+		res.status(500).json({error: error.message});
+	}
+}
+
+/* GET SINGLE BLOG (ADMIN)*/
+
+export async function getBlogForAdmin(req, res) {
 	try {
 		const id = Number(req.params.id);
 

backend/src/routes/blog.routes.js

@@ -6,6 +6,7 @@ import {
 	updateBlog,
 	deleteBlog,
 	getAllBlogs,
+	getBlogForAdmin,
 } from "../controllers/blog.controller.js";
 
 import jwtAuthMiddleware from "../middleware/auth.js";
@@ -15,11 +16,14 @@ const router = express.Router();
 /* PUBLIC */
 
 router.get("/", getBlogs);
-router.get("/:id", getBlog);
+router.get("/:slug", getBlog);
 
 // Protected
 
 router.get("/admin/all", jwtAuthMiddleware, getAllBlogs);
+
+router.get("/admin/:id", jwtAuthMiddleware, getBlogForAdmin);
+
 router.post("/", jwtAuthMiddleware, createBlog);
 router.put("/:id", jwtAuthMiddleware, updateBlog);
 router.delete("/:id", jwtAuthMiddleware, deleteBlog);

backend/src/routes/upload.routes.js

@@ -1,15 +1,35 @@
 import express from "express";
-import {upload} from "../controllers/upload.controller.js";
+import * as Bytescale from "@bytescale/sdk";
+import multer from "multer";
 
 const router = express.Router();
 
-router.post("/image", upload.single("image"), (req, res) => {
+const uploadManager = new Bytescale.UploadManager({
-	res.json({
+	apiKey: process.env.BYTESCALE_SECRET_API_KEY,
-		success: 1,
+});
-		file: {
+
-			url: `http://localhost:3000/uploads/blog/${req.file.filename}`,
+const storage = multer.memoryStorage();
+const upload = multer({storage});
+
+router.post("/", upload.single("file"), async (req, res) => {
+	try {
+		const file = req.file;
+		const {folderPath} = req.body;
+
+		const result = await uploadManager.upload({
+			data: file.buffer,
+			name: file.originalname,
+			mime: file.mimetype,
+			path: {
+				folderPath: folderPath || "/general",
 			},
 		});
+
+		res.json({fileUrl: result.fileUrl});
+	} catch (error) {
+		console.error(error);
+		res.status(500).json({error: "Upload failed"});
+	}
 });
 
 export default router;

frontend/src/App.tsx

@@ -20,6 +20,7 @@ import CandidatePage from "./pages/candidates";
 import InquiryPage from "./pages/inquiry";
 import AcademicsPage from "./pages/Academics";
 import NewsPage from "./pages/newsMedia";
+import BlogDetail from "./pages/BlogDetails";
 
 export default function App() {
 	return (
@@ -35,6 +36,7 @@ export default function App() {
 							<Route path="/department" element={<Department />} />
 							<Route path="/doctor" element={<Doctor />} />
 							<Route path="/blog" element={<Blog />} />
+							<Route path="/blog/:id" element={<BlogDetail />} />
 							<Route path="/blog/create" element={<BlogEditorPage />} />
 							<Route path="/blog/edit/:id" element={<BlogEditorPage />} />
 							<Route path="/appointment" element={<Appointment />} />

frontend/src/api/blog.ts

@@ -14,7 +14,7 @@ export const getAllBlogsApi = async () => {
 };
 
 export const getBlogByIdApi = async (id: number) => {
-	const res = await apiClient.get(`/blogs/${id}`);
+	const res = await apiClient.get(`/blogs/admin/${id}`);
 	return res.data;
 };
 

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 axios from "axios";
 
 interface BytescaleUploaderProps {
 	value: string;
@@ -9,11 +9,11 @@ interface BytescaleUploaderProps {
 	folderPath: "/doctors" | "/departments" | "/news";
 }
 
-const uploadManager = new Bytescale.UploadManager({
+export function BytescaleUploader({
-	apiKey: "public_223k2cv3MyaAxBeyALCfJa8EMLek",
+	value,
-});
+	onChange,
-
+	folderPath,
-export function BytescaleUploader({ value, onChange }: BytescaleUploaderProps) {
+}: 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);
+		if (file.size > 5 * 1024 * 1024) {
-		try {
+			alert("File is too large (Max 5MB)");
-			const { fileUrl } = await uploadManager.upload({
+			return;
-				data: file,
+		}
-				path: {
-					folderPath: "/doctors",
-				},
-			});
 
+		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
+					⚠️ Make sure to save the changes by clicking the "Save Changes"
-					at the bottom.
+					button.
 				</p>
 			)}
 		</div>

frontend/src/pages/Blog.tsx

@@ -17,7 +17,7 @@ import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card";
 import {Button} from "@/components/ui/button";
 import {Input} from "@/components/ui/input";
 
-import {Loader2, RefreshCw, Plus, Pencil, Trash} from "lucide-react";
+import {Loader2, RefreshCw, Plus, Pencil, Trash, Eye} from "lucide-react";
 
 interface Blog {
 	id: number;
@@ -161,6 +161,13 @@ export default function BlogPage() {
 													<Pencil className="h-4 w-4" />
 												</Button>
 
+												<Button
+													size="sm"
+													variant="secondary"
+													onClick={() => navigate(`/blog/${blog.id}`)}
+												>
+													<Eye className="h-4 w-4" />
+												</Button>
 												<Button
 													size="sm"
 													variant="destructive"

frontend/src/pages/BlogDetails.tsx

@@ -0,0 +1,74 @@
+import React, {useEffect, useState} from "react";
+import {useParams, useNavigate} from "react-router-dom";
+import axios from "axios";
+
+import {Button} from "@/components/ui/button";
+import {Card, CardContent} from "@/components/ui/card";
+import {getBlogByIdApi} from "@/api/blog";
+
+const BlogDetail = () => {
+	const {id} = useParams();
+	const navigate = useNavigate();
+	const [blog, setBlog] = useState<any>(null);
+
+	const fetchBlogById = async () => {
+		try {
+			const response = await getBlogByIdApi(Number(id));
+
+			setBlog(response);
+		} catch (error) {
+			console.error("Error fetching blog", error);
+		}
+	};
+
+	useEffect(() => {
+		fetchBlogById();
+	}, [id]); // ✅ FIXED dependency
+
+	if (!blog) {
+		return <div className="mt-40 text-center text-gray-500">Loading...</div>;
+	}
+
+	return (
+		<div className=" mx-auto flex flex-col ">
+			<Card>
+				<CardContent className="p-6 space-y-4">
+					{/* Back */}
+					<Button
+						variant="ghost"
+						className="text-black-600 p-0"
+						onClick={() => navigate(-1)}
+					>
+						← Back
+					</Button>
+
+					{/* Title */}
+					<h1 className="text-2xl md:text-4xl lg:text-5xl font-bold">
+						{blog.title}
+					</h1>
+
+					{/* Meta */}
+					<p className="text-gray-500 text-sm">
+						{blog.writer} • {new Date(blog.createdAt).toLocaleDateString()}
+					</p>
+
+					{/* Image */}
+					<img
+						src={blog.image}
+						alt={blog.title}
+						className="w-full h-[220px] md:h-[400px] object-cover rounded-md"
+					/>
+
+					{/* Content */}
+					<div className="space-y-3 text-gray-800 leading-relaxed">
+						{blog.content?.blocks?.map((block: any, index: number) => (
+							<p key={index}>{block.data?.text}</p>
+						))}
+					</div>
+				</CardContent>
+			</Card>
+		</div>
+	);
+};
+
+export default BlogDetail;

frontend/src/pages/Department.tsx

@@ -457,7 +457,7 @@ export default function DepartmentPage() {
 							Cancel
 						</Button>
 						<Button onClick={handleSubmit}>
-							{editing ? "Update" : "Create"}
+							{editing ? "Save Changes" : "Create"}
 						</Button>
 					</DialogFooter>
 				</DialogContent>