39 lines
1.4 KiB
TypeScript
39 lines
1.4 KiB
TypeScript
import { useState } from "react";
|
|
import { useDropzone } from "react-dropzone";
|
|
import { uploadDoc } from "../lib/fetchers";
|
|
|
|
const textFormats = [
|
|
".doc", ".docx", ".md", ".txt", "text/*",
|
|
"application/vnd.oasis.opendocument.text", ".odt",
|
|
"application/msword", "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
|
|
".rtf"
|
|
]
|
|
|
|
function DocReceiver({ handleReceiveText }: {
|
|
handleReceiveText: (content: string) => void,
|
|
}) {
|
|
const [state, setState] = useState<string>("");
|
|
function onDrop(files: File[]) {
|
|
uploadDoc(files[0], {
|
|
error: () => setState("Error"),
|
|
progress: (p) => setState(p < 100 ? `Uploading ${p}%...` : "Processing..."),
|
|
complete: (m: string) => {
|
|
setState("");
|
|
handleReceiveText(m);
|
|
}
|
|
})
|
|
}
|
|
const {getRootProps, getInputProps, isDragActive} = useDropzone({
|
|
onDrop,
|
|
multiple: false,
|
|
accept: textFormats,
|
|
});
|
|
return <div {...getRootProps()} className="clickable d-flex flex-row align-items-center justify-content-center" style={{ padding: "2rem 1rem", border: "2px dashed grey", textAlign: "center", backgroundColor: isDragActive ? "#34a8eb" : "inherit" }}>
|
|
<input {...getInputProps()} />
|
|
<div className="text-muted">
|
|
{state ? state : "Drag file or click to add text file/document"}
|
|
</div>
|
|
</div>;
|
|
}
|
|
|
|
export default DocReceiver; |