use-file-upload.ts

function useFileUpload() {
    const [total, setTotal] = useState(0)
    const [file, setFile] = useState<File>()
    const [paused, setPaused] = useState(false)
    const [uploaded, setUploaded] = useState(0)
    
    const pause = () => setPaused(true)
    const resume = () => setPaused(false)
    
    function upload(file: File) {
        // setFile
        // chunck.split
        // setTotal(chunks.length)
    }
    
    useEffect(function () {
        // for chunks after uploaded
            // 
            // upload with fetch
            // setUploaded({ uploaded + 1 })
    }, [file, pause])
    
    return {
        upload,
        uploaded,
        paused,
        pause,
        resume,
        total,
    }
}

function Uploader({ onFileUpload }: { onFileUpload: () => void }) {
    const { uploaded, total, upload, paused, pause, resume } = useFileUpload()
    
    return (
        total ? (
            <div>
                <img />
                <button onClick={paused ? resume : pause} />
                <progress total={total} finished={uploaded} />
            </div>
        ) : (
            <div onDrop/onClick={...upload/onFileUpload} />
        )
    )
}

function UploadMultiple() {
    const [count, setCount] = useState(1)
    
    const onFileUpload = () => setCount(count + 1)
    
    return (
        <div>
        {...map((c) => <Uploader key={c} onFileUpload />}
    )
}