Function AvatarField

apps/web/ui/ProfileForm/AvatarField/index.tsx:17–54

({
  uploading,
  user,
  progress,
  onChange,
}: Props)

}

export default function AvatarField({
  uploading,
  user,
  progress,
  onChange,
}: Props) {
  let ref = useRef<HTMLInputElement>(null);
  const openFileDialog = () => {
    if (ref.current) {
      ref.current.value = '';
      ref.current?.click();
    }
  };
  return (
    <Field>
      <div className={styles.row}>
        <Avatar src={user.profileImageUrl} text={user.displayName} size="xl" />
        <div>
          <Button onClick={openFileDialog} disabled={uploading} color="gray">
            <FiUploadCloud />{' '}
            {!uploading ? 'Change avatar' : `Uploading... ${progress}%`}
          </Button>
          <div className={styles.text}>JPG, GIF or PNG. 2MB max.</div>
        </div>
      </div>
      <input
        className={styles.input}
        disabled={uploading}
        type="file"
        id="avatar"
        accept=".jpg,.gif,.png"
        name="avatar"
        ref={ref}
        onChange={onChange}
      />
    </Field>
  );
}