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 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.com 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?

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

Valjas · Accepted Answer · 2016-07-15 17:35:35Z

17

I finally found a client side solution for the problem:

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

and its done :)

edited Jul 15, 2016 at 17:35

Valjas

5,0041 gold badge23 silver badges33 bronze badges

answered Apr 27, 2012 at 7:12

alex

5,0128 gold badges40 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Obi Wan Over a year ago

Trying to include binaryajax.js in my project causes an access denied error, so this is not a solution for me.

Evan Plaice Over a year ago

The link to nihilogic.dk is dead.

MDeuerlein Over a year ago

Links to BinaryFile object and EXIF Library are also dead.

Thomas Praxl Over a year ago

If you want to use exif-js, see my answer here: stackoverflow.com/questions/18981555/… – it does the trick pretty simple.

grumd Over a year ago

This code will work without creating an <img> tag: const fr = new FileReader(); fr.onload = () => { const result = exif.readFromBinaryFile(fr.result); }; fr.readAsArrayBuffer(file); "file" is an instance of "File" class

Nasser Al-Wohaibi · Accepted Answer · 2012-12-29 12:41:21Z

4

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

edited Dec 29, 2012 at 12:41

answered Dec 29, 2012 at 12:10

Nasser Al-Wohaibi

4,6912 gold badges40 silver badges29 bronze badges

1 Comment

Obi Wan Over a year ago

I get Access Denied in jquery simply trying to include the library in my project.

ThiefMaster · Accepted Answer · 2012-04-26 21:58:30Z

3

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.

answered Apr 26, 2012 at 21:58

ThiefMaster

320k85 gold badges608 silver badges648 bronze badges

1 Comment

alex Over a year ago

I really want to avoid browser extensions. As i mentioned i am already using FileReady but I don't know how to extract the EXIF data from the data I get from FileReader

grumd · Accepted Answer · 2023-05-04 18:00:25Z

0

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

answered May 4, 2023 at 18:00

grumd

913 bronze badges

Collectives™ on Stack Overflow

HTML/Javascript Access EXIF data before file upload

4 Answers 4

5 Comments

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related