jquery - JavaScript: can I read EXIF data from a file upload input?

Question

I have the following task:

• Offer an <input type=file />
• When the user adds a file:
  • read the EXIF data (specifically, location information if available)
  • send the file and the information from the EXIF to an external API, using Ajax

So, I'd like to use JavaScript to extract some EXIF data when a file is added to the input.

Is this possible?

I know about this question: Can I read Exif data of a picture in the client-side with js? , which refers to http://blog.nihilogic.dk/2008/05/reading-exif-data-with-javascript.html

But my question is (I think?) slightly different - I want to extract the EXIF data before the image is even on my domain, while it's on the user's local filesystem, if you see what I mean. I can access the binary data, so can I get the EXIF too?

Thanks for your advice.

Answer 1

You can do this on the client with HTML5. You should have an appropriate server based fallback for older browsers that don't support File and FileReader.

You can write your own exif parser or use the jsjpegmeta library(Ben Leslie), which is a simple+awesome library that lets the browser extract the EXIF data from most jpeg files. There is a patch that says it fixes most of the compatibility problems. I haven't tested the patch, but be prepared to fork the project and put on your github hat.

To get the EXIF:

1. Open file dialog: I usually create a button that calls a function to generate the <file input and add a change handler
2. Get the files: In the file change handler ue $(this).get(0).files to get the list of selected files.
3. Parse the exif data: Send the browse results to jsjpegmeta

I had to tweak the library a bit to get it to do what I wanted (I wanted a commonJS library) I also made the tweak identified in issue 1.

Here is a fiddle