angularjsgeolocationexifng-file-upload

Is it possible to read the geolocation of images using ng-file-upload?


I am wondering, if it is possible to read the Exif metadata that is attached to image files to read the geolocation using the ng-file-upload library.

There are options (e.g. ngf-fix-orientation) that make use of the meta data of the Exif object. But, after selecting the file, it doesn't contain any exif information anymore.

I tried:

ngf-before-model-change="beforeChange($files)"

With:

$scope.beforeChange = function(files){ console.log('BeforeChangefiles', files); };

The result is as follows:

0: File name: "IMG_5277.JPG" lastModified: 1559123113000 lastModifiedDate: Wed May 29 2019 11:45:13 GMT+0200 (Mitteleuropäische Sommerzeit) {} webkitRelativePath: "" size: 3741545 type: "image/jpeg" $ngfBlobUrl: "blob:http://localhost/630d0c34-07a1-4f41-81fd-e2cf021cbf65" $ngfWidth: 4032 $ngfHeight: 3024

The Exif information seems to be lost at this point already.

Is it somehow possible to access the exif information, before it is lost?

If not, which workarounds are recommended?


Solution

  • JPEGs may contain embedded EXIF segment which may contain GPS coords. They are easy to extract. Though I wouldn't recommend exif-js because it has been unmaintained for years now, with bugs and piling issues that noone responds to.

    I would recommend exifr which also nicely converts the GPS to simple values (in raw form it's stored in 4 separate tags)

    // fancy async syntax
    let {latitude, longitude} = await exifr.gps('./myimage.jpg')
    
    // older promise syntax
    exifr.gps(arrayBuffer).then(gps => {
      console.log(gps.latitude, gps.longitude)
    })
    

    Input can be anything. URL, ArrayBuffer, Blob, etc...