dropzone = document.getElementById('dropzone');

dropzone.addEventListener('dragover', function(e) {
	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');
};