Spaces:
Running
Running
File size: 2,952 Bytes
ddaa426 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 |
import { useState } from "react";
interface FileUploadProps {
isFileUploaded: boolean;
setIsFileUploaded: (isFileUploaded: boolean) => void;
}
function FileUpload({ isFileUploaded, setIsFileUploaded }: FileUploadProps) {
const [error, setError] = useState("");
const [isLoading, setIsLoading] = useState(false);
const onSubmitFile = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
const form = e.currentTarget;
const formData = new FormData(form);
const file = formData.get("file") as File;
if (!file) {
setError("Please choose a file");
return;
}
// if file is not a text or pdf file, set error
if (!file.name.endsWith(".txt") && !file.name.endsWith(".pdf")) {
setError("Please choose a text or PDF file");
return;
}
setIsLoading(true);
try {
const response = await fetch(form.action, {
method: "POST",
body: formData,
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
if (data.session_id) {
sessionStorage.setItem("session_id", data.session_id);
}
console.log("response", response);
setIsFileUploaded(true);
} catch (error) {
setError("Error uploading file");
console.error("Error uploading file", error);
} finally {
form.reset();
setIsLoading(false);
}
};
const onChangeFile = (e: React.ChangeEvent<HTMLInputElement>) => {
e.currentTarget.form?.requestSubmit();
};
return !isFileUploaded ? (
<>
{isLoading && (
<div className="flex flex-col items-center justify-center w-full">
<p className="text-gray-500 text-center mb-4">Loading...</p>
<div className="w-40 h-40 border-4 border-gray-300 border-t-blue-500 rounded-full animate-spin"></div>
</div>
)}
{!isLoading && (
<form
method="post"
action="/api/file"
onSubmit={onSubmitFile}
encType="multipart/form-data"
className="w-full"
>
{error && <p className="text-red-500 text-center mb-4">{error}</p>}
<div className="bg-white relative w-full h-40 flex items-center justify-center text-gray-500 rounded-3xl relative border border-transparent hover:border-blue-500 hover:text-blue-500 transition-colors duration-300 shadow-md">
<input
type="file"
name="file"
onChange={onChangeFile}
placeholder="Upload a file"
className="absolute inset-0 opacity-0 cursor-pointer"
/>
<p className="text-center">
<span className="font-bold text-xl">Drop a .pdf or .txt</span>
<br />
or click to upload
</p>
</div>
</form>
)}
</>
) : null;
}
export { FileUpload };
|