pdf-reader-web/components/WatermarkImageSelector/index.tsx

import React from 'react';

import Icon from '../Icon';
import Button from '../Button';
import { uploadFile } from '../../helpers/utility';

import { ContentWrapper } from './styled';

type Props = {
  t: (key: string) => string;
  onChange: (data: string) => void;
};

const ImageSelector: React.FC<Props> = ({
  t,
  onChange,
}: Props): React.ReactElement => {
  const handleClick = () => {
    uploadFile('.png,.jpg,.jpeg,.svg')
      .then((urlData) => {
        onChange(urlData);
      });
  };

  return (
    <ContentWrapper>
      <Icon glyph="add-image" />
      <Button
        appearance="link"
        style={{ marginLeft: '10px' }}
        onClick={handleClick}
      >
        {t('selectImage')}
      </Button>
    </ContentWrapper>
  )
};

export default ImageSelector;