How to get image Height and Width while uploading image in React?

Question

Is there any way to get Image Height and Width while uploading image...

I am trying the code below but always getting 0 0:

const uploadedImage = e.target.files[0];
var image = new Image();

image.src = uploadedImage;

console.log(image.naturalWidth,image.naturalHeight);

How Can I Solve this?

James L · Accepted Answer · 2024-07-23 15:34:24Z

1

  const [dimensions, setDimensions] = React.useState({ width: 0, height: 0 })

 const src = URL.createObjectURL(file)
<img
        src={src}
        alt={file.file.name}
        onLoad={(e: React.SyntheticEvent<HTMLImageElement>) => {
          const { naturalWidth, naturalHeight } = e.currentTarget
          setDimensions({ width: naturalWidth, height: naturalHeight })
        }}
      />

edited Jul 23, 2024 at 15:34

answered Jul 23, 2024 at 15:32

James L

112 bronze badges

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

1 Comment

dbc Over a year ago

Thank you for posting this answer. While this code may answer the question, might you please edit your post to add an explanation as to why/how it works? This can help future readers learn and apply your answer. You are also more likely to get positive feedback (upvotes) when you include an explanation.

Tanjin Alam · Accepted Answer · 2022-02-16 12:07:38Z

0

var _URL = window.URL || window.webkitURL;
$("#file").change(function (e) {
    var file, img;
    if ((file = this.files[0])) {
        img = new Image();
        var objectUrl = _URL.createObjectURL(file);
        img.onload = function () {
            alert(this.width + " " + this.height);
            _URL.revokeObjectURL(objectUrl);
        };
        img.src = objectUrl;
    }
});

You may find details HERE

answered Feb 16, 2022 at 12:07

Tanjin Alam

2,6541 gold badge18 silver badges22 bronze badges

Collectives™ on Stack Overflow

How to get image Height and Width while uploading image in React?

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related