exif-js -> exifreader

[ornic]

There is an example for those who want to move from buggy exif-js.

Current code: https://github.com/kirill3333/react-avatar/blob/master/src/avatar.jsx#L198-L209

import EXIF from "exif-js";
...
  onFileLoad(e) {
    e.preventDefault();

    this.onBeforeFileLoadCallback(e);
    if (!e.target.value) return;

    let file = e.target.files[0];

    this.onFileLoadCallback(file);

    const ref = this;
    EXIF.getData(file, function () {
      let exifOrientation = EXIF.getTag(this, "Orientation");
      LoadImage(
        file,
        function (image, data) {
          ref.setState({ image, file, showLoader: false }, () => {
            ref.init();
          });
        },
        { orientation: exifOrientation, meta: true }
      );
    });
  }

Code with exifreader 4.13.0:

import ExifReader from "exifreader";
...
  onFileLoad(e) {
    e.preventDefault();

    this.onBeforeFileLoadCallback(e);
    if (!e.target.value) return;

    let file = e.target.files[0];

    this.onFileLoadCallback(file);

    const ref = this;
    let exifOrientation = 1;
    ExifReader.load(file)
      .then(
        tags => exifOrientation = tags["Orientation"]?.value || 1,
        error => console.warn('Error reading exif data, using defaults', error)
      )
      .finally(
        () => {
          LoadImage(
            file,
            function (image, data) {
              ref.setState({ image, file, showLoader: false }, () => {
                ref.init();
              });
            },
            { orientation: exifOrientation, meta: true }
          )
        }
      );
  }

Changes begin after const ref = this;: we do 2 steps on the stairs to the promise hell and voi la!

P.S. LoadImage call is unchanged, just moved inside .finally callback to wait for promise from ExifReader.

[buster95]

@ornic we should create a fork of this and create a new library, because owner is lost for a long time

[ornic]

@buster95 go for it :)

I made the version for internal use on local git. There are much "just for one case" changes and I certainly can't afford to support it over time if made public.

[buster95]

I made this
https://github.com/buster95/react-avatar
https://www.npmjs.com/package/react-avatar-clip