REMB / frontend /src /components /FileUploadPanel.tsx
Cuong2004's picture
update agent/mcp/tool, add algo jupyter
56e31ec
// FileUploadPanel Component
import React, { useRef } from 'react';
import { Upload, FileJson, Zap } from 'lucide-react';
interface FileUploadPanelProps {
onUpload: (file: File) => void;
onSampleData: () => void;
loading: boolean;
hasData: boolean;
}
export const FileUploadPanel: React.FC<FileUploadPanelProps> = ({
onUpload,
onSampleData,
loading,
hasData,
}) => {
const fileInputRef = useRef<HTMLInputElement>(null);
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const file = e.target.files?.[0];
if (file) {
onUpload(file);
}
};
const handleClick = () => {
fileInputRef.current?.click();
};
return (
<div className="upload-panel">
<div className="upload-header">
<FileJson size={24} />
<h3>Site Boundary</h3>
</div>
<div className="upload-buttons">
<button
className="btn btn-primary"
onClick={handleClick}
disabled={loading}
>
<Upload size={18} />
{hasData ? 'Replace Boundary' : 'Upload DXF / DWG / GeoJSON'}
</button>
<button
className="btn btn-secondary"
onClick={onSampleData}
disabled={loading}
>
<Zap size={18} />
Use Sample Data
</button>
</div>
<input
ref={fileInputRef}
type="file"
accept=".dxf,.dwg,.geojson,.json"
onChange={handleFileChange}
style={{ display: 'none' }}
/>
{hasData && (
<div className="upload-status">
✅ Boundary loaded
</div>
)}
</div>
);
};
export default FileUploadPanel;