Problema: ¿Cómo puedo obtener el nombre, el tamaño, la extensión y la visualización de la imagen en el div 'imgDetail'

actualización: el nombre del archivo se imprime como Nombre: ${file.name} en lugar del nombre del archivo

botón de arrastrar y soltar archivo html

 <div id="dropZone" style="width: 300px; height: 100px; background-color: red"></div>

mostrar información de la imagen

 <div id="imgDetail"></div>

secuencia de comandos de arrastrar y soltar

 <script> var dropZone = document.getElementById('dropZone'); var detailsDiv = document.querySelector('#imgDetail'); // Optional. Show the copy icon when dragging over. Seems to only work for chrome. dropZone.addEventListener('dragover', function (e) { e.stopPropagation(); e.preventDefault(); e.dataTransfer.dropEffect = 'copy'; }); // Get file data on drop dropZone.addEventListener('drop', function (e) { document.getElementById('dropZone').classList.remove("hoverActive"); e.stopPropagation(); e.preventDefault(); var files = e.dataTransfer.files; // get all files Object.values(files).forEach((file) => { //loop though all files if (file.type.match(/image.*/)) { var reader = new FileReader(); reader.onload = function (e2) { var img = document.createElement('img'); img.src = e2.target.result; img.width = 100; img.height = 100; detailsDiv.innerHTML += '<p>Size: ${bytesToSize(file.size)}</p>'; //display image var div = document.getElementById('imageHold') div.appendChild(img); }; reader.readAsDataURL(file); }// end of if });// end of for }); function bytesToSize(bytes) { var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']; if (bytes == 0) return '0 Byte'; var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024))); return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i]; } </script>