121 lines
2.9 KiB
TypeScript
121 lines
2.9 KiB
TypeScript
"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;
|