issue: How can I get image name, size, ext and display in 'imgDetail' div
update - filename is print as Name: ${file.name} rather than file name
drag and drop file html button
<div id="dropZone" style="width: 300px; height: 100px; background-color: red"></div>
display image information
<div id="imgDetail"></div>
drag and drop script
<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>
To display the image name or size in a div just use the property innerHTML and bytesToSize function to format the file size.
var dropZone = document.getElementById('dropZone');
var details = document.querySelector('#imgDetail');
dropZone.addEventListener('dragover', function(e) {
e.stopPropagation();
e.preventDefault();
e.dataTransfer.dropEffect = 'copy';
});
dropZone.addEventListener('drop', (e) => {
e.stopPropagation();
e.preventDefault();
details.innerHTML = '';
var files = e.dataTransfer.files;
Object.values(files).forEach((file) => {
var reader = new FileReader();
reader.onloadend = () => {
details.innerHTML += `
<p>Name: ${file.name}<p>
<p>Size: ${bytesToSize(file.size)}</p>
<img src="${reader.result}" alt="${file.name}">`;
};
reader.readAsDataURL(file);
});
});
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];
}img {
width: 200px;
height: 100px;
object-fit: cover;
}<div id="dropZone" style="width: 300px; height: 100px; background-color: red"></div>
<div id="imgDetail"></div>