Author: John Au-Yeung

Sometimes, we want to get width and height of an image with JavaScript FileReader.

In this article, we’ll look at how to get width and height of an image with JavaScript FileReader.

How to get width and height of an image with JavaScript FileReader?

To get width and height of an image with JavaScript FileReader, we use the Image constructor.

For instance, we write

<input type="file" name="profileImg" accept="image/*" class="input-file" />

to add a file input.

Then we write

const input = document.querySelector("input");
input.onchange = (event) => {
  const reader = new FileReader();

  reader.onload = () => {
    const image = new Image();
    image.src = reader.result;
    image.onload = () => {
      consoe.log(image.width);
    };
  };
  const [file] = event.target.files;
  reader.readAsDataURL(file);
};

to select the input with querySelector.

And then we set its onchange property to a function that creates a FileReader object.

We set its onload property to a function that gets the read file data.

In it, we create an image with the Image constructor.

And we set image.src to the read file result which is a base64 URL string.

Then image.width has the width.

We get the file from the input with event.target.files.

And we call readAsDataURL to read the file into the base64 URL.

Conclusion

To get width and height of an image with JavaScript FileReader, we use the Image constructor.

Sometimes, we want to sum two arrays in single iteration with JavaScript.

In this article, we’ll look at how to sum two arrays in single iteration with JavaScript.

How to sum two arrays in single iteration with JavaScript?

To sum two arrays in single iteration with JavaScript, we use the array map method.

For instance, we write

const array1 = [1, 2, 3, 4];
const array2 = [5, 6, 7, 8];

const sum = array1.map((num, idx) => {
  return num + array2[idx];
});

to call array1.map with a function that returns the sum of num and the number in array2 at the same index as num.

An array with the sums of each entry from each array at the given index is returned.

Conclusion

To sum two arrays in single iteration with JavaScript, we use the array map method.

Sometimes, we want to use promise in forEach loop of array to populate an object with JavaScript.

In this article, we’ll look at how to use promise in forEach loop of array to populate an object with JavaScript.

How to use promise in forEach loop of array to populate an object with JavaScript?

To use promise in forEach loop of array to populate an object with JavaScript, we use the Promise.all method.

For instance, we write

const res = await Promise.all([...arr.map((i) => func())]);

to call Promise.all with an array of functions returned by arr.map.

func returns a promise which is run in parallel by Promise.all.

We get the results from the promises as an array with await.

Conclusion

To use promise in forEach loop of array to populate an object with JavaScript, we use the Promise.all method.

Sometimes, we want to get the selected element type with JavaScript.

In this article, we’ll look at how to get the selected element type with JavaScript.

How to get the selected element type with JavaScript?

To get the selected element type with JavaScript, we use the tagName property.

For instance, we write

const elementType = document.getElementById("born").tagName;

to get the element with getElementById.

Then we use the tagName property to get a string with the element type.

Conclusion

To get the selected element type with JavaScript, we use the tagName property.