74 lines
1.6 KiB
JavaScript
74 lines
1.6 KiB
JavaScript
dropzone = document.getElementById('dropzone');
|
|
|
|
filetypes = ['image/png', 'image/jpeg', 'image/gif'];
|
|
|
|
dropzone.addEventListener('dragover', function(e) {
|
|
e.preventDefault();
|
|
dropzone_toggle("on");
|
|
});
|
|
|
|
dropzone.addEventListener('dragleave', function(e) {
|
|
dropzone_toggle("off");
|
|
});
|
|
|
|
dropzone.addEventListener('mousedown', function(e) {
|
|
dropzone_toggle("on");
|
|
});
|
|
|
|
dropzone.addEventListener('mouseup', function(e) {
|
|
dropzone_toggle("off");
|
|
});
|
|
|
|
dropzone.addEventListener('click', function(e) {
|
|
input = document.createElement('input');
|
|
input.type = 'file';
|
|
input.click();
|
|
|
|
input.onchange = function(e) {
|
|
file = e.target.files[0];
|
|
if(filetypes.includes(file.type)) {
|
|
upload(e.target.files[0]);
|
|
}
|
|
}
|
|
});
|
|
|
|
dropzone.addEventListener('drop', function(e) {
|
|
e.preventDefault();
|
|
dropzone_toggle("off");
|
|
|
|
file = e.dataTransfer.files[0];
|
|
if(filetypes.includes(file.type)) {
|
|
upload(e.dataTransfer.files[0]);
|
|
}
|
|
});
|
|
|
|
function dropzone_toggle(state) {
|
|
if(state == "on") {
|
|
dropzone.classList.remove('inactive');
|
|
dropzone.classList.add('active');
|
|
} else if(state == "off") {
|
|
dropzone.classList.remove('active');
|
|
dropzone.classList.add('inactive');
|
|
}
|
|
}
|
|
|
|
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');
|
|
};
|