apc518/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
    <style>
        #droparea {
            min-height: 200px;
            background-color: rgb(25, 180, 89);
        }
    </style>
</head>
<body>
    <div id='droparea'>File drop</div>
    <script>
        const fileDropArea = document.getElementById('droparea');
        fileDropArea.addEventListener('dragover', e => {
            e.preventDefault();
            e.stopPropagation();
            e.dataTransfer.dropEffect = 'copy';
        });
        fileDropArea.addEventListener('drop', e => {
            e.preventDefault();
            e.stopPropagation();

            console.log("before loop:", e.dataTransfer.files);
            for(let f of e.dataTransfer.files){
                f.arrayBuffer().then(res => {
                    console.log("no more files??", e.dataTransfer.files);
                });
            }
        });
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	#droparea {
	min-height: 200px;
	background-color: rgb(25, 180, 89);
	}
	</style>
	</head>
	<body>
	<div id='droparea'>File drop</div>
	<script>
	const fileDropArea = document.getElementById('droparea');
	fileDropArea.addEventListener('dragover', e => {
	e.preventDefault();
	e.stopPropagation();
	e.dataTransfer.dropEffect = 'copy';
	});
	fileDropArea.addEventListener('drop', e => {
	e.preventDefault();
	e.stopPropagation();

	console.log("before loop:", e.dataTransfer.files);
	for(let f of e.dataTransfer.files){
	f.arrayBuffer().then(res => {
	console.log("no more files??", e.dataTransfer.files);
	});
	}
	});
	</script>
	</body>
	</html>