I am trying to extract EXIF data from a image(jpeg) which has been dragged into the browser or has been selected via a html file input element.

I managed to preview the image within the browser using FileReader and FileReader.readAsDataURL as described here.

and I found a EXIF library which allows to extract the EXIF data of an image via javascript. But for me it only works if I use it with normal img tags which load their content over a URL.

I also found this question on StackOverflow where the accepted answer states that it is just not possible.

But I am pretty sure that it can be realized because 500px extracts the EXIF data immediately after a file is added for upload and before the upload has been finished.

Some ideas how it should be possible to extract the EXIF data from the base64 encoded image I get from the FileReader?

I am trying to extract EXIF data from a image(jpeg) which has been dragged into the browser or has been selected via a html file input element.

I managed to preview the image within the browser using FileReader and FileReader.readAsDataURL as described here.

and I found a EXIF library which allows to extract the EXIF data of an image via javascript. But for me it only works if I use it with normal img tags which load their content over a URL.

I also found this question on StackOverflow where the accepted answer states that it is just not possible.

But I am pretty sure that it can be realized because 500px. extracts the EXIF data immediately after a file is added for upload and before the upload has been finished.

Some ideas how it should be possible to extract the EXIF data from the base64 encoded image I get from the FileReader?

• javascript
• jquery
• html
• file-upload
• exif

• a newer solution exif-js, based on the same EXIF_ Library from http://www.nihilogic.dk/ – arty Commented May 29, 2014 at 12:18

4 Answers 4

I finally found a client side solution for the problem:

1. Read the file using the FileReader and the method .readAsBinaryString
2. Then wrap that binary string into a BinaryFile object which is already included in the EXIF Library
3. Finally call EXIF.readFromBinaryFile(binaryFileObject);

and its done :)

jQuery-fileExif javascript library reads image exif data before upload.
GitHub link, example jsfiddle from the library.

var someCallback = function(exifObject) {

    $('#cameraModel').val(exifObject.Model);
    $('#lat').val(exifObject.GPSLatitude);
    $('#lng').val(exifObject.GPSLongitude);
    // Unment the line below to examine the
    // EXIF object in console to read other values
    //console.log(exifObject);

  }

      try {
        $('#file').change(function() {
            $(this).fileExif(someCallback);
        });
      }
      catch (e) {
        alert(e);
      }

Have a look at the code of the FxIF firefox extension. It reads exif data using only JavaScript. To read the file contents, you can use the FileReader API of modern browsers.

When you get your File class instance via the file input, do this:

import exif from 'exif-js';

const fr = new FileReader();

fr.onload = () => {
  const result = exif.readFromBinaryFile(fr.result);
  //    ^ EXIF data will be here
};

fr.readAsArrayBuffer(file);