BLOB

const fileToDataUri = (file) => new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = (event) => {
        resolve(event.target.result)
    };
    reader.readAsDataURL(file);
})

const Preview = (props) => {
    const [data, setData] = useState()

    useEffect(() => {
        props.promise.then(e => setData(e)).catch(e => console.log(e))
    })

    return (
        <div className={styles.preview}>
            <img src={data} />
        </div>
    )
}

const FileList = (props) => {

    return (
        <ul className={styles.fileList}>
            {props.photos.map((e, i) => (
                <li key={i}>
                    <div className={styles.left}>
                        <Preview promise={e.blobPromise} />
                        <p>{e.name}</p>
                    </div>

                    <div className={styles.right}>
                        <button onClick={() => props.onRemove(i)}>Remove</button>
                    </div>
                </li>))}
        </ul>
    )
}