js_quene.js

const queneDropZone = document.getElementById('QueneDropzone');
const nextFileButton = document.getElementById('nextFileButton');

let droppedFiles = [];
let currentIndex = 0;

['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
	queneDropZone.addEventListener(eventName, e => {
		e.preventDefault();
		e.stopPropagation();
	}, false);
});

queneDropZone.addEventListener('drop', (e) => {

	const newFiles = Array.from(e.dataTransfer.files);
	droppedFiles.push(...newFiles);

    queneDropZone.innerHTML =`Filecount: ${droppedFiles.length}`;
    console.log(`Added ${newFiles.length} new file(s). Total in queue: ${droppedFiles.length}.`);

});

function startNextImageInQuene(){
	if (droppedFiles.length === 0) {
		console.log('No files loaded. Drop some files first.');
        queneDropZone.innerHTML ='Add To Quene';
		return;
	}

	if (currentIndex >= droppedFiles.length) {
		console.log('No more files. Queue is empty. Counter reset.');
        queneDropZone.innerHTML ='Add To Quene';
		currentIndex = 0;
		droppedFiles = [];
		return;
	}

	const file = droppedFiles[currentIndex];
	console.log(`File ${currentIndex + 1} of ${droppedFiles.length} Name: ${file.name}`);
    queneDropZone.innerHTML =`Filecount: ${droppedFiles.length}`;
	currentIndex++;
};

nextFileButton.addEventListener('click', () => {
  startNextImageInQuene();
});