Custom media upload component for Wordpress Gutenberg.

custom-media-upload.js

import { MediaUpload } from '@wordpress/block-editor';
import { Button } from '@wordpress/components';

function CustomMediaUpload(props){
    return <MediaUpload
    onSelect={ media => { props.onMediaSelected(media.url) } }
    type="image"
    value={ props.mediaUrl }
    render={
        ({open}) => {
            if(props.mediaUrl) {
                return <>
                    <img src={props.mediaUrl} />
                    <hr/>
                    <Button onClick={ () => { props.onMediaSelected(null) }}>Remove Image</Button>
                </>;
            }
            return <Button onClick={open}>Select Image</Button>;
        }
    }/>;
}

export { CustomMediaUpload };

/*
Usage:
import { CustomMediaUpload } from 'custom-media-upload'

<CustomMediaUpload
    mediaUrl={attributes.mediaUrl}
    onMediaSelected={ ( value ) => { setAttributes({'mediaUrl': value}) } }
/>
*/