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

[Kurt_D_Cobain]

Добрый день! Реализую загрузку файлов путем drag and drop. Возникло проблема, данные каждого загружаемого файла (при выводе а именно картинка, имя, размер) выводятся сплошным списком в общий div. Необходима помощь - выводить данные каждого файла в собственном div.
Буду очень благодарен за помощь.

В таком виде сейчас выгружаются

<label class="field-uploads highlight" id="drop-area" for="callpopupform-uploads">
<input class="uploads form-input" id="callpopupform-uploads" aria-label="File browser example" type="file" name="PopupForm[uploads]" aria-required="true" aria-invalid="false" multiple="" accept="image/jpeg,image/png,image/gif,.bmp,application/pdf,application/msword,.doc,.docx"><span class="file-custom">
<svg class="icon icon-uploads gold_mod">
 <use xlink:href="img/sprite/sprite.svg#icon-uploads"></use>
</svg><span class="drop-text">Перетащите сюда или<span class="color-accent">загрузите</span>файлы</span>
  <progress id="progress-bar" max="100" value="100"></progress>
 <div id="gallery">
<img src="data:image/png;base64/gg==">
<img src="data:image/png;base64/gg==">
<img src="data:image/png;base64/gg==">
<span>wp.png</span>
<span>bitrix.svg</span>
<span>OpenCart.png</span>
<div>28.63 KB</div>
<div>1.28 KB</div>
<div>34.04 KB</div>
</div></span>
 </label>

Желаемый результат - каждый в своем диве

<label class="field-uploads highlight" id="drop-area" for="callpopupform-uploads">
<input class="uploads form-input" id="callpopupform-uploads" aria-label="File browser example" type="file" name="PopupForm[uploads]" aria-required="true" aria-invalid="false" multiple="" accept="image/jpeg,image/png,image/gif,.bmp,application/pdf,application/msword,.doc,.docx"><span class="file-custom">
<svg class="icon icon-uploads gold_mod">
 <use xlink:href="img/sprite/sprite.svg#icon-uploads"></use>
</svg><span class="drop-text">Перетащите сюда или<span class="color-accent">загрузите</span>файлы</span>
  <progress id="progress-bar" max="100" value="100"></progress>
 <div id="gallery">
<div>
<img src="data:image/png;base64/gg==">
<span>wp.png</span>
<div>28.63 KB</div>
</div>
<div>
<img src="data:image/png;base64/gg==">
<span>bitrix.svg</span>
<div>1.28 KB</div>
</div>
<div>
<img src="data:image/png;base64/gg==">
<span>OpenCart.png</span>
<div>34.04 KB</div>
</div>
</div></span>
 </label>

Сам скрипт

let dropArea = document.getElementById("drop-area")

// Prevent default drag behaviors
	;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
		dropArea.addEventListener(eventName, preventDefaults, false)
		document.body.addEventListener(eventName, preventDefaults, false)
	})

// Highlight drop area when item is dragged over it
	;['dragenter', 'dragover'].forEach(eventName => {
		dropArea.addEventListener(eventName, highlight, false)
	})

	;['dragleave', 'drop'].forEach(eventName => {
		dropArea.addEventListener(eventName, unhighlight, false)
	})

// Handle dropped files
	dropArea.addEventListener('drop', handleDrop, false)

	function preventDefaults (e) {
		e.preventDefault()
		e.stopPropagation()
	}

	function highlight(e) {
		dropArea.classList.add('highlight')
	}

	function unhighlight(e) {
		dropArea.classList.remove('active')
	}

	function handleDrop(e) {
		var dt = e.dataTransfer
		var files = dt.files
		handleFiles(files)
	}

	let uploadProgress = []
	let progressBar = document.getElementById('progress-bar')

	function initializeProgress(numFiles) {
		progressBar.value = 0
		uploadProgress = []

		for(let i = numFiles; i > 0; i--) {
			uploadProgress.push(0)
		}
	}

	function updateProgress(fileNumber, percent) {
		uploadProgress[fileNumber] = percent
		let total = uploadProgress.reduce((tot, curr) => tot + curr, 0) / uploadProgress.length
		console.debug('update', fileNumber, percent, total)
		progressBar.value = total
	}


	function handleFiles(files) {
		initializeProgress(files.length)
		files = [...files]
		files.forEach(uploadFile)
		files.forEach(previewFile)
		files.forEach(previewName)
		files.forEach(previewSize)
		files.forEach(removeFile)
	}

	function previewFile(file) {
		let reader = new FileReader()
		reader.readAsDataURL(file)
		reader.onloadend = function () {
			let img = document.createElement('img')
			img.src = reader.result
				document.getElementById('gallery').appendChild(img)
		}
	}

	function previewName(file) {
			let reader = new FileReader()
			reader.readAsDataURL(file)
			reader.fileName = file.name
			reader.onloadend = function () {
				let title = document.createElement('span')
				title.innerHTML = reader.fileName
				document.getElementById('gallery').appendChild(title)
		}
	}

	function previewSize(file) {
		let reader = new FileReader()
		reader.readAsDataURL(file)
		reader.fileSize = formatBytes(file.size)

		function formatBytes(bytes,decimals) {
			if(bytes == 0) return '0 Bytes';
			var k = 1024,
				dm = decimals <= 0 ? 0 : decimals || 2,
				sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
				i = Math.floor(Math.log(bytes) / Math.log(k));
			return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
		}

		reader.onloadend = function() {
			let size = document.createElement('div')
			size.innerHTML = reader.fileSize
			document.getElementById('gallery').appendChild(size)
		}
	}

	function removeFile(file) {
		let reader = new FileReader()
		reader.readAsDataURL(file)
		reader.onloadend = function() {
			let remove = document.createElement('span')
			remove.setAttribute('id','RemoveFile')
			remove.innerHTML = 'x'
			document.getElementById('gallery').appendChild(title)
		}
	}
	var inputFile = dropArea.find("input");

	$('#RemoveFile').on('click', function(){
		//you can use "id" or "class" or this instead of  #id_input
		inputFile.each(function() {
			$(this).after($(this).clone(true)).remove();
		});
	})

	function uploadFile(file, i) {
		var url = 'https://api.cloudinary.com/v1_1/joezimim007/image/upload'
		var xhr = new XMLHttpRequest()
		var formData = new FormData()
		xhr.open('POST', url, true)
		xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest')

		// Update progress (can be used to show progress indicator)
		xhr.upload.addEventListener("progress", function(e) {
			updateProgress(i, (e.loaded * 100.0 / e.total) || 100)
		})

		xhr.addEventListener('readystatechange', function(e) {
			if (xhr.readyState == 4 && xhr.status == 200) {
				updateProgress(i, 100) // <- Add this
			}
			else if (xhr.readyState == 4 && xhr.status != 200) {
				// Error. Inform the user
			}
		})

		formData.append('upload_preset', 'ujpu6gyk')
		formData.append('file', file)
		xhr.send(formData)
	}

[рони]

Kurt_D_Cobain,
создать в строке 62 нужное количество div и заменить строки
function ...(file) { ... document.getElementById('gallery').appendChild на
function ...(file, i) { ... document.querySelectorAll("#gallery > div")[i].appendChild

[Kurt_D_Cobain]

Благодарю за подсказку.
С 62 строкой немного не понял, при загрузке файла параметры каждого должны ложиться в свой див.
Ниже я создал див но файл не загружается, а появляется только этот див. Очевидно не то сделалю

function handleFiles(files) {
		initializeProgress(files.length)
		files = [...files]
		files.forEach(uploadFile)
		files.forEach(previewFile)
		files.forEach(previewName)
		files.forEach(previewSize)
		files.forEach(removeFile)
		let UploadPrew = document.createElement('div')
		UploadPrew.setAttribute('id', 'box-files')
		document.getElementById('gallery').appendChild(UploadPrew)
	}

[рони]

Kurt_D_Cobain,

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

	function previewFile(file, i) {
		let reader = new FileReader()
		reader.readAsDataURL(file)
		reader.onloadend = function () {
			let img = document.createElement('img')
			img.src = reader.result
				document.querySelectorAll("#gallery > div")[i].appendChild(img)
		}
	}

	function previewName(file, i) {
			let reader = new FileReader()
			reader.readAsDataURL(file)
			reader.fileName = file.name
			reader.onloadend = function () {
				let title = document.createElement('span')
				title.innerHTML = reader.fileName
				document.querySelectorAll("#gallery > div")[i].appendChild(title)
		}
	}

	function previewSize(file, i) {
		let reader = new FileReader()
		reader.readAsDataURL(file)
		reader.fileSize = formatBytes(file.size)

		function formatBytes(bytes,decimals) {
			if(bytes == 0) return '0 Bytes';
			var k = 1024,
				dm = decimals <= 0 ? 0 : decimals || 2,
				sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
				i = Math.floor(Math.log(bytes) / Math.log(k));
			return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
		}

		reader.onloadend = function() {
			let size = document.createElement('div')
			size.innerHTML = reader.fileSize
			document.querySelectorAll("#gallery > div")[i].appendChild(size)
		}
	}

	function removeFile(file, i) {
		let reader = new FileReader()
		reader.readAsDataURL(file)
		reader.onloadend = function() {
			let remove = document.createElement('span')
			remove.setAttribute('id','RemoveFile')
			remove.innerHTML = 'x'
			document.querySelectorAll("#gallery > div")[i].appendChild(title)
		}
	}

[Kurt_D_Cobain]

Спасибо! Работает. Вас не затруднит еще один момент подсказать. Когда закидываю несколько сразу все четко каждый в свой див. А когда по очереди - первый в див, затем содержимое второго в первый див, а сам див второго пустой. Заранее благодарю.

[рони]

Kurt_D_Cobain,
может так ...

function handleFiles(files) {
		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);
        document.querySelectorAll("#gallery > div.new").forEach(div => div.classList.remove("new"))
	}

	function previewFile(file, i) {
		let reader = new FileReader()
		reader.readAsDataURL(file)
		reader.onloadend = function () {
			let img = document.createElement('img')
			img.src = reader.result
				document.querySelectorAll("#gallery > div.new")[i].appendChild(img)
		}
	}

	function previewName(file, i) {
			let reader = new FileReader()
			reader.readAsDataURL(file)
			reader.fileName = file.name
			reader.onloadend = function () {
				let title = document.createElement('span')
				title.innerHTML = reader.fileName
				document.querySelectorAll("#gallery > div.new")[i].appendChild(title)
		}
	}

	function previewSize(file, i) {
		let reader = new FileReader()
		reader.readAsDataURL(file)
		reader.fileSize = formatBytes(file.size)

		function formatBytes(bytes,decimals) {
			if(bytes == 0) return '0 Bytes';
			var k = 1024,
				dm = decimals <= 0 ? 0 : decimals || 2,
				sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
				i = Math.floor(Math.log(bytes) / Math.log(k));
			return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
		}

		reader.onloadend = function() {
			let size = document.createElement('div')
			size.innerHTML = reader.fileSize
			document.querySelectorAll("#gallery > div.new")[i].appendChild(size)
		}
	}

	function removeFile(file, i) {
		let reader = new FileReader()
		reader.readAsDataURL(file)
		reader.onloadend = function() {
			let remove = document.createElement('span')
			remove.setAttribute('id','RemoveFile')
			remove.innerHTML = 'x'
			document.querySelectorAll("#gallery > div.new")[i].appendChild(title)
		}
	}

[Kurt_D_Cobain]

Выводит пустые дивы с пустым атрибутом class - <div class="">, так каждый файл при загрузке.

[рони]

Kurt_D_Cobain,
можно так попробовать

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

	}

[Kurt_D_Cobain]

Огромное спасибо, все вышло работает как часы.
Я уже хочу добить этот скрипт. Может еще в одно место посмотрите.
Этот участок кода я им пытался вывести див по клику на который удалялся бы выведенный div с данными и очищался input.

function removeFile(file, i) {
		let reader = new FileReader()
		reader.readAsDataURL(file)
		reader.onloadend = function() {
			let remove = document.createElement('span')
			remove.setAttribute('id','RemoveFile')
			remove.innerHTML = 'x'
			document.querySelectorAll("#gallery > div.new")[i].appendChild(title)
		}
	}
	var inputFile = dropArea.find("input");

	$('#RemoveFile').on('click', function(){
		//you can use "id" or "class" or this instead of  #id_input
		inputFile.each(function() {
			$(this).after($(this).clone(true)).remove();
		});
	})

[рони]

Kurt_D_Cobain,

function removeFile(file, i) {
		let reader = new FileReader()
		reader.readAsDataURL(file)
		reader.onloadend = function() {
			let remove = document.createElement('span')
			remove.setAttribute('id','RemoveFile')
			remove.innerHTML = 'x';
            const div = document.querySelectorAll("#gallery > div.new")[i];
			div.appendChild(title);
            remove.addEventListener("click", () => div.remove())
		}
	}