React: Show Error Modal if uploaded image file is too large - reactjs

Question

I want to show a notification Modal if an image which I want to upload is too large. My problem is, that the handleUpload function is an external function. How can I render the modal?
My parent component:
const MyParent = () => {
const boundHandleUpload = React.useCallback(handleUpload);
return <UploadInput
onChange={boundHandleUpload}
accept="image/png,image/jpeg,image/gif,.jpg,.png,.jpeg,.gif"
/>
}
My upload input component
interface MyProps
extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
}
export const UploadInput = ({
onChange,
}: MyProps) => {
const inputRef = React.useRef<HTMLInputElement>(null);
return <input ref={inputRef as any} onChange={onChange} />
};
and my handleUpload function:
export const handleUpload = (evt: React.FormEvent<HTMLInputElement>): void => {
const target = evt.target as HTMLInputElement;
let file, img;
if ((file = target.files[0])) {
img = new Image();
img.onload = function () {
if(this.width > 1000) alert("Show Modal");
};
img.src = window.URL.createObjectURL(file);
}
};
How could I show a React component Modal instead of the alert?

Answer 1

Your function, even if external, must know about React state if you want it to work with React.
Just wrap your function handleUpload inside another function, to save setShowModal in the closure.
This way, you can edit the state of your component!
export const handleUpload = setShowModal => (evt: React.FormEvent<HTMLInputElement>): void => {
const target = evt.target as HTMLInputElement;
let file, img;
if ((file = target.files[0])) {
img = new Image();
img.onload = function () {
if(this.width > 1000) setShowModal(true);
};
img.src = window.URL.createObjectURL(file);
}
};
Now, handleUpload is a function that returns your event listener, so you just call it by passing setShowModal and it will return the same thing than before, but with the access to the state!
const MyParent = () => {
const [showModal, setShowModal] = useState(false);
const boundHandleUpload = React.useCallback(handleUpload(setShowModal));
return <>
<UploadInput
onChange={boundHandleUpload}
accept="image/png,image/jpeg,image/gif,.jpg,.png,.jpeg,.gif"
/>
{showModal && <Modal/>}
</>
}
Hope this is clear, feel free to ask if it is not!