In my React project, I have created an input component that should trigger a custom handleSubmit function when a user uploads a file:
function PhotoInput({ enableInput }) {
const inputStyle = {
display: 'none'
};
const handleSubmit = (event) => {
console.log("Uploading file...")
// putToS3Bucket(event.target.files[0], '/upload')
};
if (enableInput) {
console.log("logged")
return (
<input
id="file-input"
type="file"
style={inputStyle}
accept="image/*"
onChange={handleSubmit}
/>
);
} else {
return null;
}
}
function PhotoPopover({ width, open, handlePhotoClickClose, enableInput, anchorRef }) {
const navigate = useNavigate();
return (
<>
<MenuPopover
open={open}
onClose={handlePhotoClickClose}
anchorEl={anchorRef.current}
sx={{ width: { width } }}
>
<label for="file-input">
<MenuItem
onClick={handlePhotoClickClose}
sx={{ typography: 'body2', py: 1, px: 2.5 }}
>
<Iconify
icon='eva:settings-2-fill'
sx={{
mr: 2,
width: 24,
height: 24
}}
/>
Change Profile Photo
</MenuItem>
</label>
<PhotoInput enableInput={enableInput} />
</MenuPopover>
</>
);
}
Despite setting everything up correctly, the handleSubmit function does not get triggered when selecting a file to upload from the file dialogue after clicking on the MenuItem. It's puzzling because it works fine in a sandbox example, but not in this code snippet. Any insights into what might be causing this discrepancy would be greatly appreciated.