About Lesson
There are two improvements you could / should make to that “Image Picker” component:
1) Reset the previewed image if no image was selected:
Add set setPickedImage(null); to the if (!file) block:
if (!file) {
setPickedImage(null);
return;
}
2) Add the required prop to the (hidden) <input> element:
<input
className={classes.input}
type="file"
id={name}
accept="image/png, image/jpeg"
name={name}
ref={imageInput}
onChange={handleImageChange}
required
/>
This ensures that the <form> can’t be submitted without an image being selected.
Exercise Files
Join the conversation
