Need to load an additional library:

npm i blueimp-load-image --S

Load it into your page

import loadImage from "blueimp-load-image/js";

And instead of using the fileReader, use the library like so:

  onSelectFile = e => {
    if (e.target.files && e.target.files.length > 0) {
      loadImage(
        e.target.files[0],
        img => {
          var base64data = img.toDataURL(`image/jpeg`);
          this.setState({ src: base64data });
        },
        { orientation: true, canvas: true }
      );

      // const reader = new FileReader();
      // reader.addEventListener('load', () =>
      //   this.setState({ src: reader.result })
      // );
      // reader.readAsDataURL(e.target.files[0]);
    }
  };

Here is a working example in codesandbox

I’m using react-image-crop library to get users to select a picture and crop it.

The library works beautifully until you are on an iPhone. Taking a portrait (aka vertical) picture places the image in the correct rotation while cropping on canvas but on complete is in the wrong direction.

Here is a codesandbox from the creator himself.

ISSUE
Below is an image where on top, the cropping section, the image is in correct orientation, but the output image on the bottom is in the wrong direction.