title: Assigning File Input FileReader base64 result to IMG SRC dynamically
body: <p>Hoping someone can teach me something new, I'll try to keep it short since I'm betting it's just some inane detail I'm hopefully missing...</p>
  
  <p>I start with an image like so, where <code>currentImage</code> is an existing image path to act as a default at first;</p>
  
  <pre><code>&lt;img src="{{currentImage}}"&gt;
  &lt;input type="file" (click)="onUpload($event)"&gt;
  </code></pre>
  
  <p>Which then fires off a basic method to grab the event.files etc like so;</p>
  
  <pre><code>onUpload(event) {
  
        const file: File = event.files[0],
            reader: FileReader = new FileReader(),
             that = this; // *** WORTH NOTING...
  
        reader.addEventListener('loadend', function () {
          console.log('the resulting base64 string = ', reader.result);
          that.currentImage = reader.result;
        }, false);
  
        if (file) {
          reader.readAsDataURL(file);
        }
  
        console.log('does the blob get updated to currentimage?',
                     this.currentImage); // THIS RETURNS THE OLD IMAGE PATH***
  
    }
  </code></pre>
  
  <p>This sort of works, I see the base64 string I want in the console, I see the <code>currentImage</code> var string update to the base64 string in the html binding <code>{{currentImage}}</code>, and I see the <code>img</code> element flash the newly updated image...but then it immediately reverts right back to the default image originally assigned to <code>currentImage</code> even though <code>currentImage</code> still has the new base64 string.... Also the last <code>console.log</code> for <code>this.currentImage</code> shows the original file path.</p>
  
  <p>I can not for the life of me figure out yet why but am new to the web side with FileReader, Angular etc. So hopefully somebody can serve me a quick slice of humble pie?? :)</p>
  
  <p>PS - If it matters, it's angular 5</p>