You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
70 lines
2.0 KiB
70 lines
2.0 KiB
<input type="file" style="display: hidden;" id="{{.ElemName}}" />
|
|
<div id="{{.ElemName}}_dropzone" ondrop="dropHandler(event);" ondragover="draghandler(event);" ondragenter="draghandler(event);" ondragleave="draghandler(event);" style="background-color: rgba(0,0,0,0.5); visibility: hidden; opacity:0; position: fixed; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; ; transition: visibility 175ms, opacity 175ms; z-index: 9999999;"></div>
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
var fileInput = document.getElementById('{{.ElemName}}');
|
|
var dropzone = document.getElementById('{{.ElemName}}_dropzone');
|
|
|
|
fileInput.onchange = function () {
|
|
var formData = new FormData();
|
|
fileInput.files.forEach(function (file) {
|
|
formData.append(file.name, file);
|
|
});
|
|
upload(formData);
|
|
}
|
|
|
|
var lastTarget = null;
|
|
|
|
window.addEventListener("dragenter", function(e)
|
|
{
|
|
lastTarget = e.target; // cache the last target here
|
|
// unhide our dropzone overlay
|
|
dropzone.style.visibility = "";
|
|
dropzone.style.opacity = 1;
|
|
});
|
|
|
|
window.addEventListener("dragleave", function(e)
|
|
{
|
|
// this is the magic part. when leaving the window,
|
|
// e.target happens to be exactly what we want: what we cached
|
|
// at the start, the dropzone we dragged into.
|
|
// so..if dragleave target matches our cache, we hide the dropzone.
|
|
if(e.target === lastTarget)
|
|
{
|
|
dropzone.style.visibility = "hidden";
|
|
dropzone.style.opacity = 0;
|
|
}
|
|
});
|
|
|
|
});
|
|
|
|
function draghandler(evt) {
|
|
evt.preventDefault();
|
|
}
|
|
|
|
function dropHandler(evt) {
|
|
evt.preventDefault();
|
|
|
|
var files = evt.dataTransfer.files;
|
|
var formData = new FormData();
|
|
|
|
for (var i = 0; i < files.length; i++) {
|
|
formData.append(files[i].name, files[i]);
|
|
}
|
|
|
|
upload(formData);
|
|
return false;
|
|
}
|
|
|
|
function upload(formData) {
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.onreadystatechange = function(e) {
|
|
if ( 4 == this.readyState ) {
|
|
window.location.reload(true);
|
|
}
|
|
}
|
|
xhr.open('POST', '/hugo/upload');
|
|
xhr.send(formData);
|
|
}
|
|
|
|
</script>
|
|
|