Angular EXIFjs

Get exif data from image upload

by wholypantalones

HTML

<script src="https://rawgit.com/exif-js/exif-js/master/exif.js"></script>
<div ng-app="ctrl" ng-controller="mindCtrl">
  <div id="upload">
    <input id="file" type="file" accept="image/*" multiple="multiple" onchange="angular.element(this).scope().inputChange(this)" />
    <label for="file">Select Files</label>
  </div>
  <pre>Image: {{file | json}}</pre>
  <br/>
  <pre>Exif: {{exifData | json}}</pre>
</div>

CSS

body {
  padding: 10px;
  background: white;
}

pre {
  background: #f9f9f9
}

#upload {
  display: inline-block;
  padding: 5px;
}

#upload input {
  display: none;
}

#upload input + label {
  display: inline-block;
  padding: 10px;
  border: 1px solid black;
}

#upload input + label:hover {
  background: rgba(255, 255, 255, 0.3);
}

JavaScript

angular.module("ctrl", []).controller("mindCtrl", function($scope) {

  $scope.inputChange = function(e) {
  $scope.exifData = '';
    var file = e.files[0];

    EXIF.getData(file, function() {
    
    delete file.exifdata.undefined;
    
      var allData = EXIF.getAllTags(this);
 
      $scope.file = file;
      
      $scope.exifData = allData;
      
      $scope.$apply();
    });
  };
});