Media upload

frontend/app/(auth)/dashboard/media/page.tsx

@@ -0,0 +1,30 @@
+"use client";
+import useFileUpload from "@/hooks/use-file-upload";
+import { ChangeEvent } from "react";
+
+const MyComponent = () => {
+	const { progress, isUploading, error, uploadFile, cancelUpload } =
+		useFileUpload();
+
+	const handleFileUpload = (event: ChangeEvent<HTMLInputElement>) => {
+		const file = event.target.files?.[0];
+		if (file) {
+			uploadFile(file, "/media/upload", (response) => {
+				console.log("Upload success:", response);
+			});
+		}
+	};
+
+	return (
+		<div>
+			<input type="file" onChange={handleFileUpload} />
+			{isUploading && <p>Uploading... {progress}%</p>}
+			{error && <p>Error: {error}</p>}
+			<button onClick={cancelUpload} disabled={!isUploading}>
+				Cancel Upload
+			</button>
+		</div>
+	);
+};
+
+export default MyComponent;

frontend/hooks/use-file-upload.tsx

@@ -0,0 +1,120 @@
+"use client";
+import { API_URL } from "@/lib/constants";
+import { getCookie } from "cookies-next";
+import { useState, useRef, useCallback } from "react";
+import { ApiResponse, useApi } from "./use-api";
+
+interface UseFileUploadReturn {
+	progress: number;
+	isUploading: boolean;
+	error: string | null;
+	uploadFile: (
+		file: File,
+		url: string,
+		onSuccess?: (response: any) => void,
+	) => void;
+	cancelUpload: () => void;
+}
+
+const useFileUpload = (): UseFileUploadReturn => {
+	const [progress, setProgress] = useState<number>(0);
+	const [isUploading, setIsUploading] = useState<boolean>(false);
+	const [error, setError] = useState<string | null>(null);
+	const xhrRef = useRef<XMLHttpRequest | null>(null);
+
+	const uploadFile = useCallback(
+		(file: File, url: string, onSuccess?: (response: any) => void) => {
+			url = `${API_URL}${url}`;
+			if (!file || !url) {
+				setError("File and upload URL are required.");
+				return;
+			}
+			const token = getCookie("auth_token");
+			if (!token) {
+				setError("You're not logged in.");
+				return;
+			}
+
+			fetch(`${API_URL}/media/verify`, {
+				method: "POST",
+				body: JSON.stringify({
+					name: file.name,
+					size: file.size,
+					type: file.type,
+				}),
+				headers: { Authorization: `Bearer ${token}` },
+			})
+				.then(async (r) => {
+					const res: ApiResponse<undefined> = await r.json();
+					if (res.status === "Error" || r.status !== 200) {
+						setError(res.message);
+						return;
+					}
+
+					const xhr = new XMLHttpRequest();
+					xhrRef.current = xhr;
+
+					xhr.open("POST", url);
+
+					// Optional: Add headers if needed
+					xhr.setRequestHeader("Authorization", `Bearer ${token}`);
+
+					xhr.upload.onprogress = (event) => {
+						if (event.lengthComputable) {
+							const percentComplete = Math.round(
+								(event.loaded / event.total) * 100,
+							);
+							setProgress(percentComplete);
+						}
+					};
+
+					xhr.onload = () => {
+						if (xhr.status >= 200 && xhr.status < 300) {
+							setProgress(100);
+							setIsUploading(false);
+							setError(null);
+							if (onSuccess) onSuccess(xhr.response);
+						} else {
+							setIsUploading(false);
+							setError(
+								`Upload failed with status ${xhr.status}: ${xhr.statusText}`,
+							);
+						}
+					};
+
+					xhr.onerror = () => {
+						setIsUploading(false);
+						setError("An error occurred during the upload.");
+					};
+
+					xhr.onabort = () => {
+						setIsUploading(false);
+						setError("Upload aborted.");
+					};
+
+					setIsUploading(true);
+					setError(null);
+					setProgress(0);
+
+					const formData = new FormData();
+					formData.append("file", file);
+
+					xhr.send(formData);
+				})
+				.catch((err) => {
+					setError(err.message);
+				});
+		},
+		[],
+	);
+
+	const cancelUpload = useCallback(() => {
+		if (xhrRef.current) {
+			xhrRef.current.abort();
+		}
+	}, []);
+
+	return { progress, isUploading, error, uploadFile, cancelUpload };
+};
+
+export default useFileUpload;