Skip to content

Instantly share code, notes, and snippets.

@hideya

hideya/image-drag-and-drop.html

Created May 16, 2018 03:38
Show Gist options
  • Save hideya/78a8818cd7cbbe686dd3b5b0854aea46 to your computer and use it in GitHub Desktop.
Save hideya/78a8818cd7cbbe686dd3b5b0854aea46 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
image-drag-and-drop.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#drop-area {
width:500px;
height:180px;
border: 10px dashed #ccc;
}
#drop-area.hover {
border: 10px dashed #0c0;
}
#drop-area.dropped {
border: 10px dashed #7A97FC;
}
#drop-area-img {
width: inherit;
height: inherit;
}
.hidden {
visibility: hidden;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
const dropArea = document.getElementById('drop-area');
dropArea.addEventListener('dragenter', function () {
this.classList.remove('dropped');
this.classList.add('hover');
});
dropArea.addEventListener('dragleave', function () {
this.classList.remove('hover');
});
dropArea.addEventListener('dragover', function (e) {
e.preventDefault(); // prevent the default behavior to enable dropping
});
dropArea.addEventListener('drop', function (e) {
this.classList.remove('hover');
this.classList.add('dropped');
e.preventDefault();
const file = e.dataTransfer.files[0];
const reader = new FileReader();
reader.onload = function (event) {
const dropAreaImg = document.getElementById('drop-area-img');
dropAreaImg.classList.remove('hidden');
dropAreaImg.src = event.target.result;
}
reader.readAsDataURL(file);
});
});
</script>
</head>
<body>
<form method="post" action="http://example.com/">
<div id="drop-area">
<img id="drop-area-img" class="hidden" src="" />
</div>
</form>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment