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');
};