HTML/Javascript Access EXIF data before file upload

Question

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 ma

Answer 1

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.

Answer 2

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);
    // Uncomment 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);
      }

Answer 3

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 :)