71 lines
1.9 KiB
TypeScript
71 lines
1.9 KiB
TypeScript
// src/components/FileUpload.tsx
|
|
import React, { useState } from 'react';
|
|
import axios from 'axios';
|
|
|
|
interface FilterOptions {
|
|
[key: string]: string[];
|
|
}
|
|
|
|
interface FileUploadProps {
|
|
onUploadSuccess: (filters: FilterOptions) => void;
|
|
setIsLoading: (isLoading: boolean) => void;
|
|
setError: (error: string | null) => void;
|
|
}
|
|
|
|
const FileUpload: React.FC<FileUploadProps> = ({ onUploadSuccess, setIsLoading, setError }) => {
|
|
const [selectedFile, setSelectedFile] = useState<File | null>(null);
|
|
|
|
const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
if (event.target.files) {
|
|
setSelectedFile(event.target.files[0]);
|
|
}
|
|
};
|
|
|
|
const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
|
|
event.preventDefault();
|
|
if (!selectedFile) {
|
|
setError("Please select a file first.");
|
|
return;
|
|
}
|
|
if (!selectedFile.name.endsWith('.xlsx')) {
|
|
setError("Invalid file type. Please upload an .xlsx file.");
|
|
return;
|
|
}
|
|
|
|
const formData = new FormData();
|
|
formData.append('file', selectedFile);
|
|
|
|
setIsLoading(true);
|
|
setError(null);
|
|
|
|
try {
|
|
const response = await axios.post('http://localhost:8000/api/upload', formData, {
|
|
headers: {
|
|
'Content-Type': 'multipart/form-data',
|
|
},
|
|
});
|
|
onUploadSuccess(response.data.filters);
|
|
} catch (error: any) {
|
|
if (axios.isAxiosError(error) && error.response) {
|
|
setError(`Upload failed: ${error.response.data.detail || error.message}`);
|
|
} else {
|
|
setError(`Upload failed: ${error.message}`);
|
|
}
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="file-upload">
|
|
<h3>Upload XLSX File</h3>
|
|
<form onSubmit={handleSubmit}>
|
|
<input type="file" accept=".xlsx" onChange={handleFileChange} />
|
|
<button type="submit" disabled={!selectedFile}>Upload</button>
|
|
</form>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default FileUpload;
|