Developing a Drag-and-Drop Multiple Image Uploader in Joomla

<?php
// This is db field value in form of image.jpg#image2.jpg#image3.jpg
if(isset($this->item->gallery_images) && $this->item->gallery_images!=""):

$imgArr=explode("#",$this->item->gallery_images);
?>
<div class="control-group">
	<div class="control-label"><label id="jform_gallery_images-lbl" for="jform_gallery_images">&nbsp;</label></div>
	<div class="controls">
	<?php
	$countfiles = count($imgArr);

	for($i=0;$i<$countfiles;$i++) : 
		
		$src="../images/cars/".$imgArr[$i];
	?>
	<div style="border:1px solid; margin-right: 15px; display:inline-flex">
	   <img src="/<?php echo $src?>" alt="image not found" style="max-width:250px; height:auto;" />
	    <input type="text" name="gallery_images_file[]" id="jform_gallery_images<?=$i?>" value="<?=$imgArr[$i]?>" />
	</div>
	<?php
	endfor;
	?>
	</div>
</div>
<?php
endif;
?>
			
<div class="control-group">
<div class="control-label"><label id="jform_cell-lbl" for="jform_cell"><?=Text::_("COM_PAKCARS_CAR_IMAGES")?></label>
</div>
<div class="controls has-success">

<div class="box">
    <label>
        <strong>Choose files</strong>
        <span>or drag them here.</span>
        <input class="box__file" type="file" name="gallery_images[]" id="jform_gallery_images" multiple />
    </label>
    <div class="file-list"></div>
</div>


</div>
</div>
<!-- Script -->
<script>
	const box = document.querySelector('.box');
	const fileInput = document.querySelector('[name="gallery_images[]"');
	const selectButton = document.querySelector('label strong');
	const fileList = document.querySelector('.file-list');

	let droppedFiles = [];

	[ 'drag', 'dragstart', 'dragend', 'dragover', 'dragenter', 'dragleave', 'drop' ].forEach( event => box.addEventListener(event, function(e) {
		e.preventDefault();
		e.stopPropagation();
	}), false );

	[ 'dragover', 'dragenter' ].forEach( event => box.addEventListener(event, function(e) {
		box.classList.add('is-dragover');
	}), false );

	[ 'dragleave', 'dragend', 'drop' ].forEach( event => box.addEventListener(event, function(e) {
		box.classList.remove('is-dragover');
	}), false );

	box.addEventListener('drop', function(e) {
		droppedFiles = e.dataTransfer.files;
		fileInput.files = droppedFiles;
		updateFileList();
	}, false );

	fileInput.addEventListener( 'change', updateFileList );

	function updateFileList() {
		const filesArray = Array.from(fileInput.files);
		if (filesArray.length > 1) {
			fileList.innerHTML = '<p>Selected files:</p><ul><li>' + filesArray.map(f => f.name).join('</li><li>') + '</li></ul>';
		} else if (filesArray.length == 1) {
			fileList.innerHTML = `<p>Selected file: ${filesArray[0].name}</p>`;
		} else {
			fileList.innerHTML = '';
		}
	}

</script>
<style>
	.box {
		background-color: white;
		outline: 2px dashed black;
		height: 400px;
	}
	.box.is-dragover {
		background-color: grey;
	}

	.box {
		display:flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.box label strong {
		text-decoration: underline;
		color: blue;
		cursor: pointer;
	}

	.box label strong:hover {
		color: blueviolet
	}

	.box input {
		display: none;
	}
</style>