daniel woolston

In my AngularJS side project, I needed to upload an image and if it has location information embedded within (EXIF), extract and use it for mapping. I tried a few options but landed on the exif.js.  You can find it here:

https://github.com/exif-js/exif-js

you can install it with bower:

bower install exif-js

Add the js file to your project (I use GULP) and you should be all set to pull out EXIF data if it exists.  

this code below was proof of concept code. be sure to add your defensive coding on the lon/lat objects before interrogating them.

function uploadFiles (files){    if (!files) return;    angular.forEach(files, function(file){        if (file && !file.$error) {            //scrape exif            EXIF.getData(file, function(){                //uncomment the alert to get a feel for what data is being pulled.                //alert(EXIF.pretty(this));                var lon = EXIF.getTag(this, 'GPSLongitude');                var lat = EXIF.getTag(this, 'GPSLatitude');                var latRef = EXIF.getTag(this, 'GPSLatitudeRef') || "N";                var lonRef = EXIF.getTag(this, 'GPSLongitudeRef') || "W";                lat = (lat[0] + lat[1]/60 + lat[2]/3600) * (latRef == "N" ? 1 : -1);                lon = (lon[0] + lon[1]/60 + lon[2]/3600) * (lonRef == "W" ? -1 : 1);                addToMap(lat,lon);            });        }    }); }

maybe this was in the documentation and I just skimmed over it, but this seemed harder than it needed to be.

Inside a .map iteration I had an <li> that I was looking to handle the click event on for an internal process. Original, I was adding an ID to the element properties and grabbing that in the event:

function handleMyClick (element){

    if(element.target.attributes['data-scale-id']){  // do stuff }

}

the function would be called with something like:

identifierItem = <li data-scale-id={ scale.scaleID } key={scale.scaleID}  onClick={thisComponent.handleMyClick} className="scale-item"></li>;

I would take the ID and do a .props lookup to find the object I needed. It works but it doesn’t feel intuitive for someone that is accustomed to passing parameters to event handlers.

but then I came across this on the internets:

function handleMyClick (scale){

 if(scale){  // do stuff with the object -- no lookup needed }

}

identifierItem = <li key={scale.scaleID}  onClick={ () => thisComponent.handleMyClick(scale) } className="scale-item"></li>;

Now I can use the object from the .map - no lookup needed and its more inline with what I’m used to seeing. 

It’s time to resurrect the blog! Lots of things to cover this summer: Angular 2, React.JS, Loopback.IO with a few other front end technologies thrown into the mix just for good measure. I’ve missed tech writing and would like to work my way back into it. No shortage of evolving tech to cover...