93 lines
3.2 KiB
TypeScript
93 lines
3.2 KiB
TypeScript
import React, { useCallback, useState } from 'react';
|
|
import { Upload, FileText, AlertCircle } from 'lucide-react';
|
|
|
|
interface FileUploadProps {
|
|
onFileLoaded: (content: string) => void;
|
|
}
|
|
|
|
export const FileUpload: React.FC<FileUploadProps> = ({ onFileLoaded }) => {
|
|
const [dragActive, setDragActive] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
const handleFile = (file: File) => {
|
|
setError(null);
|
|
if (!file.name.endsWith('.md') && !file.name.endsWith('.txt') && !file.name.endsWith('.markdown')) {
|
|
setError('Please upload a Markdown (.md) or Text (.txt) file.');
|
|
return;
|
|
}
|
|
|
|
const reader = new FileReader();
|
|
reader.onload = (e) => {
|
|
const text = e.target?.result;
|
|
if (typeof text === 'string') {
|
|
onFileLoaded(text);
|
|
}
|
|
};
|
|
reader.onerror = () => setError('Error reading file.');
|
|
reader.readAsText(file);
|
|
};
|
|
|
|
const handleDrag = useCallback((e: React.DragEvent) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
if (e.type === 'dragenter' || e.type === 'dragover') {
|
|
setDragActive(true);
|
|
} else if (e.type === 'dragleave') {
|
|
setDragActive(false);
|
|
}
|
|
}, []);
|
|
|
|
const handleDrop = useCallback((e: React.DragEvent) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
setDragActive(false);
|
|
if (e.dataTransfer.files && e.dataTransfer.files[0]) {
|
|
handleFile(e.dataTransfer.files[0]);
|
|
}
|
|
}, []);
|
|
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
e.preventDefault();
|
|
if (e.target.files && e.target.files[0]) {
|
|
handleFile(e.target.files[0]);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="w-full max-w-xl mx-auto">
|
|
<div
|
|
className={`relative group flex flex-col items-center justify-center w-full h-64 border-2 border-dashed rounded-2xl transition-all duration-300 ease-in-out cursor-pointer overflow-hidden
|
|
${dragActive ? 'border-indigo-500 bg-indigo-500/10' : 'border-zinc-700 bg-zinc-900/50 hover:border-zinc-500 hover:bg-zinc-800/50'}`}
|
|
onDragEnter={handleDrag}
|
|
onDragLeave={handleDrag}
|
|
onDragOver={handleDrag}
|
|
onDrop={handleDrop}
|
|
>
|
|
<input
|
|
type="file"
|
|
className="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10"
|
|
onChange={handleChange}
|
|
accept=".md,.txt,.markdown"
|
|
/>
|
|
|
|
<div className="flex flex-col items-center justify-center pt-5 pb-6 text-zinc-400 group-hover:text-zinc-200 transition-colors">
|
|
<div className={`p-4 rounded-full mb-4 ${dragActive ? 'bg-indigo-500/20 text-indigo-400' : 'bg-zinc-800 text-zinc-500'}`}>
|
|
<Upload size={32} />
|
|
</div>
|
|
<p className="mb-2 text-lg font-medium">
|
|
<span className="font-semibold text-indigo-400">Click to upload</span> or drag and drop
|
|
</p>
|
|
<p className="text-sm text-zinc-500">Markdown or Plain Text files</p>
|
|
</div>
|
|
</div>
|
|
|
|
{error && (
|
|
<div className="mt-4 p-4 bg-red-900/20 border border-red-800 rounded-lg flex items-center gap-3 text-red-200 animate-in fade-in slide-in-from-top-2">
|
|
<AlertCircle size={20} />
|
|
<span>{error}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|