CODEWITHSUNDEEP
javascriptreactjsinput
Alexander McNulty
Alexander McNulty

Reputation: 890

get image size before upload in React

The desired results have been done in vanilla here

To be clear, I won't be using alert(), I'd like to place the dimensions in the state object.

How would I recreate this code in React under the OnChange() event handler?

enter image description here

Upvotes: 1

Views: 15458

Answers (2)

Alexander McNulty
Alexander McNulty

Reputation: 890

I have a img src that looks something like this:

<img src="dataurl"

I was able to solve the problem with code like this

if (e.target.files && e.target.files[0]) {
  var img = document.createElement("img");
  this.state.backgroundImageFile = e.target.files[0];

  img.onload = function () {
    debugger;
    console.log(this.width + " " + this.height);
  });

  var reader = new FileReader();
    reader.onloadend = function (ended) {
    img.src = ended.target.result;
  }
reader.readAsDataURL(e.target.files[0]);
}

Upvotes: 3

monkeyjumps
monkeyjumps

Reputation: 712

React is still JavaScript, everything you do in regular js can be done in React. At a high level, React is just the framework that helps you create more modular reusable code.

With that being said, thinking as a React developer, you should create the upload process first get that to work in a separate class. The class could accept an image through its props. Then once that is working correctly you could create a Higher order component that wraps the upload component or rather receives the upload component as a parameter and checks the image size. At this point you can return an Invalid component or just process the image and upload.

You might want to look at a few tutorial on Getting started with React. This is an excellent start egghead.io

Upvotes: 3

Related Questions