Timeline/ClientApp/src/app/common/BlobImage.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

import React from 'react';

import { ExcludeKey } from '../utilities/type';

const BlobImage: React.FC<
  ExcludeKey<React.ImgHTMLAttributes<HTMLImageElement>, 'src'> & {
    blob?: Blob | unknown;
  }
> = (props) => {
  const { blob, ...otherProps } = props;

  const [url, setUrl] = React.useState<string | undefined>(undefined);

  React.useEffect(() => {
    if (blob instanceof Blob) {
      const url = URL.createObjectURL(blob);
      setUrl(url);
      return () => {
        URL.revokeObjectURL(url);
      };
    } else {
      setUrl(undefined);
    }
  }, [blob]);

  return <img {...otherProps} src={url} />;
};

export default BlobImage;