drag & drop photo view

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #dropbox {
            width: 500px;
            height: 300px;
            text-align: center;
            line-height: 300px;
            border: 5px solid indigo;
            margin-bottom: 50px;
        }
        .photo {
            display: inline-block;
            margin: 5px;
            border: 1px solid #888;
            border-radius: 5px;
            position: relative;
        }
        .photo img { max-width: 300px; }
        .photo span {
            position: absolute;
            top: 5px;
            right: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="dropbox" ondrop="dropHandler(event)" ondragover="dragOverHandler(event)" ondragleave="ondragLeaveHandler(event)">
        Drop Images Here.
    </div>
    <div id="photobox"></div>
    <script>
        const photobox = document.querySelector("#photobox");
        const dropbox = document.querySelector("#dropbox");

        const dropHandler = (event) => {
            event.preventDefault();
            dropbox.style.backgroundColor = "white";
            let photos = event.dataTransfer.items;
            dropbox.innerHTML = "";
            preview(photos);
        }

        const dragOverHandler = (event) => {
            event.preventDefault();
            dropbox.style.backgroundColor = "pink";
        }

        const ondragLeaveHandler = (event) => {
            event.preventDefault();
            dropbox.style.backgroundColor = "white";
        }

        const preview = (photos) => {
            if( ! photos ) return;
            for(let i=0; i<photos.length; i++) {
                if (photos[i].kind === 'file' && photos[i].type.match("^image/")) {
                    let reader = new FileReader();
                    let file = photos[i].getAsFile();
                    reader.readAsDataURL(file);
                    reader.onload = (event) => {
                        var src = event.target.result;
                        var img = "<div class='photo'><span onclick='removePhoto(this)'>X</span><img src='" + src + "'></div>";
                        photobox.innerHTML += img;
                    }
                }
            }
        }

        const removePhoto = (elm) => elm.parentElement.remove();
    </script>
</body>
</html>