Оборачивать каждый звгружаемый файл drag and drop в свой собственный div

[рони]

Kurt_D_Cobain,
выше удаление блока по клику на крестик, удалить из инпута не помогу, не знаю, нужен другой специалист.

[Kurt_D_Cobain]

Работает, благодарю. Не подскажете как на основании этого скрипта выводить данные файлов через ручное добавление файлов в инпут. Сейчас выводятся данные файлов только через закидывание в дроп зону. А при стандартной загрузке ничего не выводится. Я так понимаю это нужно в другом копать?

[Kurt_D_Cobain]

По удалению из инпута понял. Спасибо.

[рони]

Я так понимаю это нужно в другом копать?

на событие change инпута надо ставить обработку
что-то типа

input.addEventListener("change", function() {
handleFiles(this.files)
})

[Kurt_D_Cobain]

Спасибо! подключил, выводи, работает =)

let input = document.getElementById("callpopupform-uploads")
	input.addEventListener("change", function() {
		handleFiles(this.files)
	})

[рони]

Kurt_D_Cobain,

[Kurt_D_Cobain]

Можете подсказать еще разок, хочу выводить счетчик количества загруженных файлов
когда загружаю файлы ничего не выводит, может тут не .on нужно???
Попробовал написать такое:

input.on('change', function counterFile(file) {
		let reader = new FileReader()
		reader.readAsDataURL(file)
		reader.onloadend = function() {
			let counter = document.createElement('span')
			counter.className = "counter";
			document.getElementById('gallery').appendChild(counter)
			counter.innerHTML = (this.files.length)
		}
	})

[рони]

Kurt_D_Cobain,
если jquery то
$(input).on...

[Kurt_D_Cobain]

Я сделал, выводит только количество одного причем у каждого файла - закидываю файл рядом пишет 1, кидаю второй тоже рядом один у второго.

function handleFiles(files) {
		document.querySelectorAll("#gallery > div.new").forEach(div => div.classList.remove("new"));
		initializeProgress(files.length)
		for (let i = 0; i < files.length; i++) {
			let div = document.createElement('div');
			div.className = "new";
			document.getElementById('gallery').appendChild(div)
		};
		files = [...files];
		files.forEach(uploadFile)
		files.forEach(previewFile)
		files.forEach(previewName)
		files.forEach(previewSize)
		files.forEach(removeFile);

		let counter = document.createElement('span')
		counter.className = "counter";
		document.getElementById('gallery').appendChild(counter)
		counter.innerHTML = (files.length)
		counter.html(newContent)

	}

[рони]

Kurt_D_Cobain,

let h1 = document.createElement('h1');
    document.getElementById('gallery').appendChild(h1);

	function handleFiles(files) {
	    document.querySelectorAll("#gallery > div.new").forEach(div => div.classList.remove("new"))
		initializeProgress(files.length)
        for (let i = 0; i < files.length; i++) {
            let div = document.createElement('div');
            div.className = "new";
            document.getElementById('gallery').appendChild(div)
        };
        h1.innerHTML = document.querySelectorAll("#gallery > div").length;
		files = [...files];
		files.forEach(uploadFile)
		files.forEach(previewFile)
		files.forEach(previewName)
		files.forEach(previewSize)
		files.forEach(removeFile);

	}