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 · Accepted Answer · 2019-05-28 04:06:58Z

1

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.

edited May 28, 2019 at 4:06

answered May 28, 2019 at 3:29

Kaiido

139k15 gold badges266 silver badges333 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

michalinator Over a year ago

Very interesting. What is this "= e =>" ? I will try it.

Kaiido Over a year ago

That's Arrow Functions introduced in ES6. You could very well rewrite it as function(e) {

Dosisod · Accepted Answer · 2019-05-28 03:16:07Z

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, 2019 at 3:16

Dosisod

3575 silver badges18 bronze badges

4 Comments

michalinator Over a year ago

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 <img> tag.

Dosisod Over a year ago

Is the data that you are grabbing just an image?

michalinator Over a year ago

It's supposed to be images, they're uploaded together, they're effectively inputed as files.

Dosisod Over a year ago

In that case I would use @Kaiido's answer

Collectives™ on Stack Overflow

Javascript - Image dimensions form multiple file input

2 Answers 2

2 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related