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

I know this may be already solved but I'd like to offer an alternative solution, for the people stumbling upon this question.

There's a new library exifr with which you can do exactly that. It's maintained, actively developed library with focus on performance and works in both nodejs and browser.

Simple example of extracting exif from one file:

document.querySelector('#filepicker').addEventListener('change', async e => {
  let file = e.target.files[0]
  let exifData = await exif.parse(file)
  console.log('exifData', exifData)
})

Complex example of extracting exif from multile files:

document.querySelector('#filepicker').addEventListener('change', async e => {
    let files = Array.from(e.target.files)
    let promises = files.map(exif.parse)
    let exifs = await Promise.all(promises)
    let dates = exifs.map(exif => exif.DateTimeOriginal.toGMTString())
    console.log(`${files.length} photos taken on:`, dates)
})

And you can even extract thumbnail thats embedded in the file:

let img = document.querySelector("#thumb")
document.querySelector('input[type="file"]').addEventListener('change', async e => {
  let file = e.target.files[0]
  img.src = await exifr.thumbnailUrl(file)
})

You can also try out the library's playground and experiment with images and their output, or check out the repository and docs.

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

Update 26.07.2022 The package has been moved to Gitlab. The patch is included in the newest version. You can find the package here.