Image Upload Input
This Image Upload Input component is a wrapper around input[file]
which
improves the UX of uploading file images.
The component accepts the following props:
type Props = Omit<React.InputHTMLAttributes<unknown>, 'value'> & {
innerRef?: LegacyRef<HTMLInputElement>;
image?: string | null;
onClear?: () => void;
};
Usage
function Form() {
const onClear = () => console.log(`The user cleared the existing image`);
const existingImage = `/a/url/to/an/image.png`;
return (
<form>
<ImageUploadInput
onClear={onClear}
name={'photoUrl'}
image={existingImage}
>
Upload Image
</ImageUploadInput>
</form>
);
}
Demo
Select an image: