I'm having trouble with this issue (It's a straightforward Drag & Drop implementation):
<!DOCTYPE html>
<style type="text/css>
body {
font-family: "Arial",sans-serif;
}
.dropzone {
width: 300px;
height: 300px;
border: 2px dashed #ccc;
color: #ccc;
line-height: 300px;
text-align: center;
}
.dropzone.dragover {
border-color: #000;
color: #000;
}
</style>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id = "uploads"></div>
<div class="dropzone" id="dropzone">Drop Here</div>
<script type="text/javascript">
(function () {
var dropzone = document.getElementById('dropzone');
dropzone.ondrop = function (e) {
e.preventDefault();
this.className = 'dropzone';
};
// On the area
dropzone.ondragover = function () {
this.className = 'dropzone dragover';
return false;
};
// Leave the area while pressing
dropzone.ondragleave = function () {
this.className = 'dropzone';
};
dropzone.ondrop = function (event) {
event.preventDefault();
this.className = 'dropzone';
};
}());
</script>
</body>
</html>I'm wondering how to retrieve the file that I dropped into the "box" (a JSON file in my case). How can I access this file and perform operations on it (like sending it to a server in POST format).
I'd like to understand how to retrieve this dropped file so that I can work with it in some way.
Also, I'm interested in sending this json as an object to a server that can process the data (preferably using an asynchronous HttpPOST request). I want to accomplish this without using ajax or similar methods (not $.get, etc.). I'd like to achieve this using fetch, then and catch methods. I'm unsure of how this process works, so any assistance would be greatly appreciated.
Thank you!