uploader.jsx

import React, { useEffect, useRef, useState, useCallback, useMemo } from 'react';

export default () => {
    const inputRef = useRef();
    const [percentage, setPercentage] = useState(0);
    const [start, setStart] = useState(false);
    let intervalRef = useRef();

    useEffect(() => { console.log(percentage) }, [percentage])
    useEffect(() => {
        if (!start) return;
        setInterval(() => {
            setPercentage(percentage + 1)
        }, 1000);
    }, [start])

    console.log(percentage);
    
    const onClickHandler = () => {
        setStart(true);
       
    }


    return (
        <div style={{
            display: 'flex', position: 'relative', height: "57px", padding: "20px", border: "1px solid rgb(202, 202, 202)", borderRadius: "20px",
            overflow: "hidden", boxShadow: "0px 2px 10px rgba(202, 202, 202, 0.89)"
        }}>
            <div style={{ position: "absolute", top: "0px", left: "0px", bottom: "0px", background: 'pink', width: `${percentage}%` }}></div>
            <input type="file" ref={inputRef} style={{ display: "none" }} />
            <div
                onClick={onClickHandler}
                style={{ display: "flex", position: 'relative', justifyContent: "space-between", flex: 1 }}>
                <div style={{ display: 'flex', flexDirection: "column"}}>
                    <div style={{ flex: 1, fontSize: "2em", fontWeight: 'bold' }}>Upladable</div>
                    <div>upload file here.</div>
                    
                </div>
                <div style={styles.upload}>
                    {!start? "upload": "upload starting" }
                </div>
            </div>
        </div>
    )
}

const styles = {
    upload: {
        display: "flex",
        alignItems: "center"
    }
}