3

I am trying to get the exif metadata of an image that is uploaded with an input tag in react, and have the following function attached to the input tag's property "onChange":

    onChange(e) {
        const { input: { onChange } } = this.props;
        let img_arr = [];
        for (let i = 0; i < e.target.files.length; i++) {
            const file = e.target.files[i];
            console.log('exif data');
            console.log(EXIF.getData(file, () => {
                var orientation = EXIF.getTag(this, "Orientation");
                console.log('orientation');
                console.log(orientation);
            }));
            img_arr.push({file: file, url: URL.createObjectURL(file)});
        }
        //console.log("printing img arr");
        //console.log(img_arr);
        onChange(img_arr);
    }

However, I get EXIF is not defined. On the exif-js page, it is suggested to use window.onload. https://github.com/exif-js/exif-js. How does one use window.onload in a react component?

-- edit --

I changed my code to this, but still get undefined for orientation:

    onChange(e) {
        const { input: { onChange } } = this.props;
        let img_arr = [];
        for (let i = 0; i < e.target.files.length; i++) {
            const file = e.target.files[i];
            console.log('exif data');
            EXIF.getData(file, function() {
                const url = URL.createObjectURL(file);
                const image = new Image();
                image.onload = function() {
                    URL.revokeObjectURL(url);
                    const orientation = EXIF.getTag(this, 'Orientation');
                    console.log(orientation);
                };
                image.src = url;
            });
            img_arr.push({file: file, url: URL.createObjectURL(file)});
        }
        onChange(img_arr);
    }
zengod
  • 1,114
  • 13
  • 26

1 Answers1

7

exif-js provides an CommonJS equivalent. If EXIF is not defined you just need to import it:

import EXIF from 'exif-js'

Example: codesandbox.

To validate the EXIF data of the image you can check this website.

You can test with this image: http://fredericiana.com/media/2013/monalisa.jpg

Johnny Zabala
  • 2,285
  • 1
  • 12
  • 14
  • 1
    even though the error is gone, I get the value of orientation as "undefined" – zengod Jan 12 '20 at 13:23
  • I still get undefined for orientation. Check my full code in the edit I made. – zengod Jan 12 '20 at 13:57
  • @zengod were you able to resolve this? I'm also looking for way to identify and / or edit the orientation for a video captured by a webcam in a react app. – zero_cool May 27 '23 at 00:24