70 lines
1.6 KiB
JavaScript
70 lines
1.6 KiB
JavaScript
dropzone = document.getElementById('dropzone');
|
|
|
|
dropzone.addEventListener('dragover', function(e) {
|
|
e.preventDefault();
|
|
this.classList.remove('nodrop');
|
|
this.classList.add('drop');
|
|
});
|
|
|
|
dropzone.addEventListener('dragleave', function(e) {
|
|
this.classList.remove('drop');
|
|
this.classList.add('nodrop');
|
|
});
|
|
|
|
dropzone.addEventListener('mousedown', function(e) {
|
|
this.classList.remove('nodrop');
|
|
this.classList.add('drop');
|
|
console.log('click');
|
|
});
|
|
|
|
dropzone.addEventListener('mouseup', function(e) {
|
|
this.classList.remove('drop');
|
|
this.classList.add('nodrop');
|
|
console.log('unclick');
|
|
});
|
|
|
|
dropzone.addEventListener('click', function(e) {
|
|
input = document.createElement('input');
|
|
input.type = 'file';
|
|
input.click();
|
|
|
|
input.onchange = function(e) {
|
|
file = e.target.files[0];
|
|
if( file.type == 'image/png' || file.type == 'image/jpeg' ) {
|
|
upload(e.target.files[0]);
|
|
}
|
|
}
|
|
});
|
|
|
|
dropzone.addEventListener('drop', function(e) {
|
|
e.preventDefault();
|
|
|
|
this.classList.remove('drop');
|
|
this.classList.add('nodrop');
|
|
|
|
file = e.dataTransfer.files[0];
|
|
if( file.type == 'image/png' || file.type == 'image/jpeg' ) {
|
|
upload(e.dataTransfer.files[0]);
|
|
}
|
|
});
|
|
|
|
function upload(file) {
|
|
const data = new FormData();
|
|
data.append('upload', file)
|
|
|
|
fetch('upload.php', {
|
|
method: 'POST',
|
|
body: data
|
|
}).then(response => {
|
|
response.json().then(parsedValue => {
|
|
filename = parsedValue['filename'];
|
|
datadir = parsedValue['datadir'];
|
|
openUploadedFile(datadir, filename);
|
|
})
|
|
});
|
|
};
|
|
|
|
function openUploadedFile(datadir, filename) {
|
|
window.open(window.location.href + datadir + '/' + filename, '_self');
|
|
};
|