file.js

import React from "react";
import defaultImage from "./default-profile.jpg";

function If (props) {
    if (!props.condition) {
        return <>{ null }</>;
    }
    return <>{ props.children }</>;
}
function ImageUpload () {
    const [ file, setFile ] = React.useState(null);
    const [ imagePreviewUrl, setImagePreviewUrl ] = React.useState(
        defaultImage
    );

    const fileInput = React.createRef();

    const handleImageChange = (e) => {
        e.preventDefault();
        let reader = new FileReader();
        let file = e.target.files[ 0 ];
        reader.onloadend = () => {
            setFile(file);
            setImagePreviewUrl(reader.result);
        };
        if (file) {
            reader.readAsDataURL(file);
        }

    };

    const clickHandler = e => {
        e.preventDefault();
        fileInput.current.click();
    };

    const handleRemove = () => {
        setFile(null);
        setImagePreviewUrl(defaultImage);
        fileInput.current.value = null;
    };

    return (
        <div>
            <div>
                <input
                    type="file"
                    ref={ fileInput }
                    onChange={ handleImageChange }
                />
            </div>
            <div>
                <img src={ imagePreviewUrl } alt="..." />
            </div>
            <div>
                <button
                    type="button"
                    color="default"
                    onClick={ clickHandler }
                >
                    Add Photo
                    </button>
                <If condition={ file !== null }>
                    <button
                        type="button"
                        onClick={ handleRemove }
                    >
                        remove pic and stuff
                    </button>
                </If>
            </div>
        </div>
    );
}

export default ImageUpload;