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: