How to get image name and size for the uploaded image

Question

I am using this code for making my things workaround. By using the below code I'm trying to get the image name and its the size in bytes/Mbps.

'use strict';

const myImages = [];

function addImage(imageBlob) {
  myImages.push(imageBlob);
}

function redrawImages() {
  const divForImages = document.getElementById('myImages');
  divForImages.innerHTML = '';
  myImages.forEach((imageBlob) => {
    const img = document.createElement('img');
    img.src = URL.createObjectURL(imageBlob);
    divForImages.appendChild(img);
  });
}

function addImageAndRedraw() {
  const fileInput = document.getElementById('fileInput');
  if (fileInput.files.length === 1) {
    addImage(fileInput.files[0]);
    redrawImages();
  } else {
    alert('No file selected. Select a file and try again.');
  }
}

const button = document.getElementById('button');
button.addEventListener('click', addImageAndRedraw);

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <h1>My images</h1>
    <input id="fileInput" type="file" accept="image/*" multiple="false" value="Select image">
    <input id="button" type="button" value="Add image and redraw">   
    <hr>
    <div id="myImages"></div>
    <script src="album.js"></script>
  </body>
</html>

I have tried to use img.name but it's deprecated.

How to do it? Any help would be highly appreatiated

You can store the name in a data attribute, ie: img.setAttribute("data-name", value); — lissettdm, Feb 22 '21 at 12:29

score 1 · Answer 1 · answered Feb 22 '21 at 12:18

1

imageBlob is not a blob. It's a File, which has a name property. The name doesn't get transferred to the img DOMElement.

answered Feb 22 '21 at 12:18

Halcyon

57,230
10
89
128

what about size ? – Moeez Feb 22 '21 at 12:29
1

If you look at the documentation page I linked, you can see that it also has a `size` property. – Halcyon Feb 22 '21 at 12:31

How to get image name and size for the uploaded image

1 Answers1