Возникли проблемы с $ngfDataUrl с угловой загрузкой ng-file-upload

Question

Я пытаюсь выяснить, как загружать изображения на сервер, сервер ожидает, чтобы кандидат.details.avatar представлял собой строку, которая выглядит следующим образом:

"Данные: изображение / JPEG;base64,/9J /4AAQSkZ........."

который предположительно является свойством $ngfDataUrl в загруженном файле и все же:

controller.js (с использованием кандидата ctrlAs)

const avatar = require('../../static/img/avatar.png');

require('ng-tags-input');

module.exports = [
  'regexProvider',
  '$location',
  '$routeParams',
  'DataModel',
  function(regexProvider, $location, $routeParams, DataModel) {
    let routeData = {
      collection: 'candidates'
    };
    let promise;

    this.defaultAvatar = avatar;
    this.regex = regexProvider;
    this.details = {};

    if($routeParams.id !== 'new') {
      this.heading = 'Update Candidate';
      routeData.id = $routeParams.id;
      this.details = DataModel.get(routeData);
    } else {
      this.heading = 'Add Candidate';
    }

    this.save = () => {
      console.log('aldfja');
      if($routeParams.id !== 'new') {
        promise = DataModel.update(routeData, this.details).$promise;
        console.log(this.details);
      } else {
        promise = DataModel.save(routeData, this.details).$promise;
      }

      promise.then((data) => {
        $location.path('/details/' + data.id);
      }, () => {
        $location.path('/not-found');
      });
      return promise;
    };

    this.uploadImage = (files) => {
      if(files && files.length) {
        this.details.avatarImage = files[0];
        console.log('49', files[0]);
        this.details.avatar = files[0].$ngfDataUrl;
        console.log('51', this.details.avatar);
      }
    };

  }];

Прямо сейчас, когда я загружаю изображение, в миниатюре загружается несрезанное изображение. Я выхожу из файла [0] в строке 49, и у него есть свойство $ngfDataUrl, и все же, когда я делаю это.details.avatar = files[0].$ NgfDataUrl, это не работает, так как файлы [0]. $ NgfDataUrl не определены? Как это происходит

HTML

<h1>{{ ::candidate.heading }}</h1>

<form name="candidateForm" ng-submit="candidateForm.$valid && candidate.save()" novalidate>
  <div class="candidate-form">
    <div class="left">
      <div 
        class="avatar avatar-upload"
        ngf-select="candidate.uploadImage($files)" 
        multiple="multiple">
        <img 
          ngf-thumbnail="candidate.details.avatarImage || candidate.defaultAvatar"
          ngf-drop="uploadFiles($files)"
          ngf-drag-over-class="'dragover'"
          ngf-multiple="true" 
          ngf-pattern="'image'"
          ngf-no-object-url="true" />
        <span>Click to {{(candidate.details.avatar ? 'change' : 'upload')}}</span>
      </div>
    </div>

    <div class="right">
      <div layout layout-sm="column">

        <md-input-container flex>
          <label>First name *</label>
          <input name="firstName" ng-required="true" ng-model="candidate.details.firstName">

          <div ng-messages="candidateForm.firstName.$error" ng-if="candidateForm.$submitted || candidateForm.firstName.$touched">
            <div ng-message="required">First name is required.</div>
          </div>

        </md-input-container>

        <md-input-container flex>
          <label>Last name *</label>
          <input name="lastName" ng-required="true" ng-model="candidate.details.lastName">

          <div ng-messages="candidateForm.lastName.$error" ng-if="candidateForm.$submitted || candidateForm.lastName.$touched">
            <div ng-message="required">Last name is required.</div>
          </div>

        </md-input-container>

      </div>

      <div layout layout-sm="column">

        <md-input-container flex md-is-error="candidateForm.email.$invalid && (candidateForm.$submitted || candidateForm.email.$dirty)">

          <label>Email *</label>
          <input name="email" ng-required="true" ng-model="candidate.details.email" ng-pattern="candidate.regex.EMAILREGEX">

          <div ng-messages="candidateForm.email.$error" ng-if="candidateForm.$submitted || candidateForm.email.$touched">
            <div ng-message="required">Email is required.</div>
          </div>

        </md-input-container>


        <md-input-container flex md-is-error="candidateForm.phone.$invalid && (candidateForm.$submitted || candidateForm.phone.$dirty)">

          <label>Phone number *</label>
          <input name="phone" ng-required="true" ng-model="candidate.details.phone" ng-pattern="candidate.regex.PHONEREGEX">

          <div ng-messages="candidateForm.phone.$error" ng-if="candidateForm.$submitted || candidateForm.phone.$touched">
            <div ng-message="required">Phone number is required.</div>
          </div>

        </md-input-container>

        <div flex>
          <skills name="skills" tags="candidate.details.skills"></skills>
        </div>
      </div>

      <md-input-container class="md-block">

        <label>Summary About Candidate *</label>
        <textarea name="summary" ng-required="true" ng-model="candidate.details.summary" columns="1" md-maxlength="100" rows="3"></textarea>

        <div ng-messages="candidateForm.summary.$error" ng-if="candidateForm.$submitted || candidateForm.summary.$touched">
          <div ng-message="required">Summary is required.</div>
        </div>
      </md-input-container>

      <div class="text-right">

        <md-button type="submit" ng-disabled="candidateForm.$invalid" class="md-raised md-primary" aria-label="Add candidate">
          {{ ::candidate.heading }}
        </md-button>

      </div>

    </div>
  </div>

</form>