Javascript - Image dimensions form multiple file input

Question

Can't get the dimensions - height and width: the result is always "undefined". I clearly don't understand how JavaScript works here. I am however, able to display the file.

The PHP file contains the following input tag, which selects multiple pictures:

$output = "<input class=\"wpisNazwyWkladow\" 
id=\"wpis_tabela_zdjecie_wybieracz\" type=\"file\" multiple 
name=\"ads_photofile\">";

This is the JavaScript script in question:

var input = $(this); // works
var ilosc = input[0].files.length;
var pliki = input[0].files;

for (var i = 0; i < ilosc; i++)
{
   var tmppath = URL.createObjectURL(pliki[i]); // works - displays
   var nazwa = pliki[i].name; // works
   var tempRozmiar = pliki[i].size; // works
   var typ = pliki[i].type; // typ fotki // works

   // The part that does not work:
   tempWysokosc = tmppath.height;
   tempSzerokosc = tmppath.width;

}

I'm expecting an integer value for "tempWysokosc" and "tempSzerokosc".

Need help please.

Kaiido · Answer 1 · 2019-05-28T04:06:58.667

In your code tmppath is the result of URL.createObjectURL(), that is, a String.
This string obviously doesn't have a width nor an height. What you want, is to retrieve these values from a loaded <img> element whose src will be set to tmppath. But this process is always asynchronous, so you'll probably need to refactor your code to embrace this asynchronicity:

input.oninput = e => {
const ilosc = input.files.length;
const pliki = input.files;

for (let i = 0; i < ilosc; i++)
{
   const tmppath = URL.createObjectURL(pliki[i]); // works - displays
   const nazwa = pliki[i].name; // works
   const tempRozmiar = pliki[i].size; // works
   const typ = pliki[i].type; // typ fotki // works
   
   const img = new Image();
   // async
   img.onload = e => {
    const tempWysokosc = img.height;
    const tempSzerokosc = img.width;
    console.log({
      name: nazwa,
      size: tempRozmiar,
      type: typ,
      width: tempWysokosc,
      height: tempSzerokosc
    });
   };
   img.src = tmppath;
  }

}

<input id="input" type="file" accept="image/*" multiple>

Note that if you have a lot of such images you want to retrieve the dimensions of, you might be interested in this Q/A which exposes a way of getting it from reading the files directly, avoiding the big overhead of decoding the images.

That's [Arrow Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) introduced in ES6. You could very well rewrite it as `function(e) {` — Kaiido, May 28 '19 at 04:06

score 0 · Answer 2 · answered May 28 '19 at 03:16

0

Chances are that the image hasnt fully rendered by the time you ask it for the height, so set the width and height after the onload event:

tmppath.onload=function() {
    tempWysokosc = tmppath.height;
    tempSzerokosc = tmppath.width;
}

Similar answer: Can't get height and width of image in javascript

answered May 28 '19 at 03:16

Dosisod

307
2
15

That's an interesting poing, because the picture is in no way loaded at the point, I'm trying to get the dimensions of the image file, from the array, which contains all files that were sent to the JavaScript file function in question - they're displayed later. I'm trying to find a way to obtain the dimensions of the image, assuming that's possible (I'm guessing now that it's not), before the temporary URL is set as the 'src' attribute of a later tag. – michalinator May 28 '19 at 03:24
Is the data that you are grabbing just an image? – Dosisod May 28 '19 at 03:31
It's supposed to be images, they're uploaded together, they're effectively inputed as files. – michalinator May 28 '19 at 03:54
In that case I would use @Kaiido's answer – Dosisod May 28 '19 at 04:00

Javascript - Image dimensions form multiple file input

2 Answers2