I have form where the user fill it and send it along with a file to the admin, and the admmin should receive the data in data grid……the inputs like name and phone and email i retrive it and display it correctly but the file i retrieve it and the filePreview also and i tried to display it but i got this error : this error Failed to execute ‘createObjectURL’ on ‘URL’: Overload resolution failed.
const Form = () => {
const [inputs, setInputs] = useState({
name: "",
phone: "",
email: "",
assurance: "",
message: "",
file: null,
filePreview: null
});
const handleInput = (e) => {
if (e.target.name === "file") {
const file = e.target.files[0];
const filePreview = URL.createObjectURL(file);
setInputs({ ...inputs, [e.target.name]: file, filePreview });
} else {
setInputs({ ...inputs, [e.target.name]: e.target.value });
}
};
const uploadFile = async (file) => {
try {
const formData = new FormData();
formData.append("file", file);
const filename = file.name;
const response = await axios.post("http://localhost:5000/backend/upload", formData);
console.log("File uploaded successfully", response.data);
return filename;
} catch (err) {
console.error("Error uploading file:", err);
throw new Error("Error uploading file");
}
};
and this the component where i display it
name phone email and ect…..
const [selectedFormData, setSelectedFormData] = useState({
name: '',
phone: '',
email: '',
assurance: '',
file:'',
filePreview:''
});
handleCellClick when i click in message cell i got this data and the file
**const handleCellClick = (params) => {
if (params.field === 'message') {
const { name, phone, email, assurance, file } = params.row;
const filePreview = URL.createObjectURL(file) ;
setSelectedMessage(params.value);
setSelectedFormData({ name, phone, email, assurance, file, filePreview });
setOpenModal(true);
}
};
<Modal open={openModal} onClose={handleCloseModal} className="modal-container">
<Slide direction="up" in={openModal} mountOnEnter unmountOnExit>
<div className="modal-content" style={{ background: "white" }}>
<Typography variant="h5">Selected Form</Typography>
<p>Name: {selectedFormData.name}</p>
<p>Phone: {selectedFormData.phone}</p>
<p>Email: {selectedFormData.email}</p>
<p>Assurance: {selectedFormData.assurance}</p>
<p>Message: {selectedMessage}</p>
<p>File: {selectedFormData.file}</p>
<div className="action-buttons">
<Button variant="contained" onClick={handleCloseModal}>
Close
</Button>
</div>
</div>
</Slide>
</Modal>**