Angular 6 ng2-file upload can't read property of queue as undefined

Question

Using Angular 6 to upload pictures to the server with Valor Software's ng2 file uploader and consistently getting errors. The thing is, I've used ng2 file uploader before with Visual Studio Code and it worked fine. This project was started with Visual Studio 2017 with the .NET Core & Angular bundle and I'm wondering if that has something to do with why this doesn't operate the same (or nearly as easily).

I'm using "ng2-file-upload": "^1.3.0" in package.json.

I've imported and declared import { FileUploadModule } from 'ng2-file-upload'; in my imports array of my module.

my html:

<div class="row">
  <div class="col-12">
    <h3>Upload queue</h3>
    <p>Queue length: {{ uploader?.queue?.length }}</p>
    <table class="table">
      <thead>
        <tr>
          <th width="50%">Name</th>
          <th>Size</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let item of uploader.queue">
          <td><strong>{{ item?.file?.name }}</strong></td>
          <td *ngIf="uploader.options.isHTML5" nowrap>{{ item?.file?.size/1024/1024 | number:'.2' }} MB</td>
        </tr>
      </tbody>
    </table>
    <div class="progress mb-4">
      <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': uploader.progress + '%' }"></div>
    </div>
  </div>
  <div class="col-12">
    <div ng2FileDrop
         [ngClass]="{'nv-file-over': hasBaseDropZoneOver}"
         (fileOver)="fileOverBase($event)"
         [uploader]="uploader"
         class="well my-drop-zone">
      Base drop zone
    </div>
  </div>
</div>

My component.ts:

export class PhotoEditorComponent implements OnInit {
  @Input() photos: Photo[];
  baseUrl = environment.levanaBaseUrl;
  uploader: FileUploader;
  hasBaseDropZoneOver = false;

  constructor(private auth: AuthService,
    private userService: UserService) { }

  ngOnInit() {
  }

  fileOverBase(e: any): void {
    this.hasBaseDropZoneOver = e;
  }

  initializeUploader() {
    this.uploader = new FileUploader({
      url: this.baseUrl + 'users/' + this.auth.currentUser.id + '/photos',
      authToken: 'Bearer ' + localStorage.getItem('token'),
      isHTML5: true,
      allowedFileType: ['image'],
      removeAfterUpload: true,
      autoUpload: false,
      maxFileSize: 10 * 1024 * 1024
    });

    this.uploader.onAfterAddingFile = (file) => { file.withCredentials = false; };

    this.uploader.onSuccessItem = (item, response, status, headers) => {
      if (response) {
        const res: Photo = JSON.parse(response);
        const photo = {
          id: res.id,
          url: res.url,
          dateAdded: res.dateAdded,
          description: res.description,
          isMain: res.isMain
        };
        this.photos.push(photo);
        if (photo.isMain) {
          localStorage.setItem('user', JSON.stringify(this.auth.currentUser));
        }
      }
    };
  }

}

And I consistently get these errors when the html is rendering messing everything up.

Answer 1

You have a function called initializeUploader that you are never calling anywhere. I suspect calling that from ngOnInit will fix your problem.

Answer 2

Add the following import lines in the .module.ts file

import { FileUploadModule } from 'ng2-file-upload';
import { CommonModule } from '@angular/common';

@NgModule({
....
  imports: [FileUploadModule,CommonModule],
....  
})