2

I'm new to coding and have the opportunity to do some small stories on a project to whet my teeth. Right now I'm working on getting profile picture selection and cropping into a webapp with AngularJS. I've selected ngImgCropper to handle the cropping. Here's a JSFiddle with boilerplate code: http://jsfiddle.net/a2ew3yhf/50/

And here's JavaScript from that link:

var handleFileSelect=function(evt) {
  var file=evt.currentTarget.files[0];
  var reader = new FileReader();
  reader.onload = function (evt) {
    $scope.$apply(function($scope){
        $scope.myImage = evt.currentTarget.result;
    });
  };
    reader.readAsDataURL(file);
};

Here's my problem. My project uses Typescript, which doesn't support evt.currentTarget.result, so I get the following error: 

Property 'result' does not exist on type 'EventTarget'

Is there any way to get around this?

Nick
  • 95
  • 8
  • So, I'm curious, too. I see that you can modify typescript.d.ts, but as typescript is a dependency installed from NPM, there's no sense in altering it. should pull requests be submitted to the TSD repository ? Here's a related post on adding definitions to built-ins. http://stackoverflow.com/questions/23636093/add-method-to-array-in-typescript-1-0 – FlavorScape Sep 25 '15 at 23:58
  • Maybe could make your own TSD file for ngImgCrop and define the object on event.target... load it in from tsd.d.ts. If you wanted to go further, you could create a tsd repository on github for ngImgCrop so that it worked through official TSD repository, but not necessary. – FlavorScape Sep 26 '15 at 00:06

1 Answers1

2

Simple solution

If you sure that this property exist just make something like below

 var handleFileSelect=function(evt) {
      var file=evt.currentTarget.files[0];
      var reader = new FileReader();
      reader.onload = function (evt) {
             $scope.$apply(function($scope){
                  $scope.myImage = (<any>evt.currentTarget).result;
              });
      };
      reader.readAsDataURL(file);
 };

Also you can create own interface that would be describe your target

  interface MyTarget {
        result:any;   //or type of image
  } 
  //skip some code
 $scope.myImage = (evt.currentTarget as MyTarget).result;

Complicated solution

You can provide own declaration of ngImageCroper or provide description for current event

   var handleFileSelect=function(evt: ImageCropEvent){
        //your    stuff
   }

Resource

  1. Write your d.ts file
Oleh Dokuka
  • 11,613
  • 5
  • 40
  • 65
  • Nick, the `` here casts the evt.currentTarget as a "generic" with no type. This is how you'd get around the compiler error. – FlavorScape Sep 28 '15 at 23:19