DownloadAll = ({ zipReady, images }) => {
    const Button = ({ disabled }) => (
        <button className="btn download-all mb-2" disabled={disabled}>
            Download All
        </button>
    )
    if (zipReady) {
        let imagesInfo = [];
        images.forEach(it => {
            if (it.status === 'done') {
                imagesInfo.push({ id: it.id, size: it.squashed, name: it.name });
            }
        });

        if (imagesInfo.length) {
            return (
                <form action={`${process.env.API_HOST}/zip`} method="post">
                    <input type="hidden" value={JSON.stringify(imagesInfo)} name="files" />
                    <Button disabled={!zipReady} />
                </form>
            )
        }
        else return <Button disabled={true} />
    }
    else {
        return <Button disabled={!zipReady} />
    }
    // return (
    //     <form action={`${process.env.API_HOST}/zip`} method="post">
    //         <input type="hidden" value={JSON.stringify([
    //             {id: '1513167392474q92.jpg', size: 35480, name: 'q92.jpg'},
    //             {id: '1513238746187q20-4x.jpg', size: 1780000, name: 'q20-4x.jpg'},
    //             {id: '1513238856384map-compressed.png', size: 13900, name: 'map-compressed.jpg'},
    //             {id: '513239155854andreas-p-30199.jpg', size: 336850, name: 'q392.jpg'}
    //         ])} name="files"/>
    //         <button className="btn download-all mb-2" type="submit">
    //             Download All
    //         </button>
    //     </form>
    // )
}
Some points
    - Four status: uploading, compressing, done, error
    - Add extra info to images : `status`, `squashed`, `download_url`, progress.