TypeError - Function undefined - Angular 2

This is a rather simple problem but I can't spot what the problem is - I think it's to do with not mapping the function correctly on transpilation.

I'm refactoring a function to make it cleaner - here is the original function here:

handleFileSelect(e) {
    e.stopPropagation();
    e.preventDefault();

    var files = e.dataTransfer.files, output = [];

    for (var i = 0, f; f = files[i]; i++) {
      output.push('<li><strong>'+f.name+'</strong> (', f.type || 'n/a', ') - ',
                  f.size, ' bytes, last modified: ',
                  f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
                  '</li>');
    }
    document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';

    if(this.reader == undefined)
      this.reader = new FileReader();
    this.reader.onload = (e) => {
      document.getElementById('image-chosen')['src'] = e.target['result']; 
    };
    this.reader.readAsDataURL(files[0]);

  }

which works fine. When I do a simple refactor of moving the for loop into its own function it doesn't work and throws this error (after the aforementioned function of course):

buildImageDetails(files, output) {
    for (var i = 0, f; f = files[i]; i++) {
      output.push('<li><strong>'+f.name+'</strong> (', f.type || 'n/a', ') - ',
                  f.size, ' bytes, last modified: ',
                  f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
                  '</li>');
    }
    document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';

    if(this.reader == undefined)
      this.reader = new FileReader();
    this.reader.onload = (e) => {
      document.getElementById('image-chosen')['src'] = e.target['result']; 
    };
    this.reader.readAsDataURL(files[0]);
  }

Error:

EXCEPTION: TypeError: this.buildImageDetails is not a function
VM124847:84 EXCEPTION: TypeError: this.buildImageDetails is not a function

I'm confused on this because I did the same refactor-esque stuff in the ngOInit but it didn't complain about trying to find the new function.

EDIT Here is where I'm attempting to make use of the function:

handleFileSelect(e) {
  e.stopPropagation();
  e.preventDefault();

  var files = e.dataTransfer.files, output = [];
  this.buildImageDetails(files, output);
}

And this function in itself is called when I drag an image into the dropzone in order to upload it and display it's properties.

EDIT 2

I've been examining this some more have have concluded that the problem is to do with binding. For my events to work correctly I have bound them to the UploadCompnent (the name of the class we are working in) like so:

attachDragListeners() {
    this.cols = document.querySelectorAll('#columns .column');

    [].forEach.call(this.cols, (col) => {
      col.addEventListener('dragstart', this.handleDragStart.bind(UploadComponent), false);
      col.addEventListener('dragenter', this.handleDragEnter.bind(UploadComponent), false);
      col.addEventListener('dragover', this.handleDragOver.bind(UploadComponent), false);
      col.addEventListener('dragleave', this.handleDragLeave.bind(UploadComponent), false);
      col.addEventListener('drop', this.handleDrop.bind(UploadComponent), false);
      col.addEventListener('dragend', this.handleDragEnd.bind(UploadComponent), false);
    });
  }

This function is called in the ngOnInit() to bind the functions to their corresponding events. So essentially the target function that I'm trying to call doesn't exist on the context of the object I'm calling it on.

I'll post back a solution when I find one.