I am struggling with this for a while now. I am trying to upload an image using ng-upload in angular, the file is saved in the database, however I am receiving 'Cannot read properties of undefined' when the upload queue is over. Code used for receiving the file:

Upload.html

 <div class="container text-center" *ngIf="memeUploadMode">
        <div class="row mt-3">
 
            <div class="col-md-3">
        
                <h3>Dodaj mema</h3>
        
                <div ng2FileDrop
                     [ngClass]="{'nv-file-over': hasBaseDropzoneOver}"
                     (fileOver)="fileOverBase($event)"
                     [uploader]="uploader"
                     class="card bg-faded p-3 text-center mb-3 my-drop-zone">
                     <i class="fa fa-upload fa-3x"></i>
                    Przeciągnij mema tutaj
                </div>
        
                <input type="file" ng2FileSelect [uploader]="uploader" />
            </div>
        
            <div class="col-md-9" style="margin-bottom: 40px" *ngIf="uploader?.queue?.length">
        
                <h3>Kolejka</h3>
                <p>Długość kolejki: {{ uploader?.queue?.length }}</p>
        
                <table class="table">
                    <thead>
                    <tr>
                        <th width="50%">Nazwa</th>
                        <th>Rozmiar</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>
                    <div>
                        Queue progress:
                        <div class="progress">
                            <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': uploader.progress   '%' }"></div>
                        </div>
                    </div>
                    <button type="button" class="btn btn-success btn-s"
                            (click)="uploader.uploadAll()" [disabled]="!uploader.getNotUploadedItems().length">
                        <span class="fa fa-upload"></span> Upload all
                    </button>
                </div>
        
            </div>
    </div>

And here's the code where I'm trying to add the image to the member object:

Upload.ts

constructor(public accountService: AccountService, private memberService: MembersService,
    private router: Router, private toastr: ToastrService) { 
      this.accountService.currentUser$.pipe(take(1)).subscribe(user => this.user = user);
  }

  ngOnInit(): void {
    this.initializeUploader();
  }

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

  deletePhoto(photoId: number) {
    this.memberService.deletePhoto(photoId).subscribe(() => {
      this.member.photos = this.member.photos.filter(x => x.id !== photoId);
    })
  }

  initializeUploader() {
    this.uploader = new FileUploader({
      url: this.baseUrl   'users/add-meme',
      authToken: 'Bearer '   this.user.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 meme: Meme = JSON.parse(response);
        this.member.memes.push(meme);
           this.user.memeUrl = meme.url;
           this.member.memeUrl = meme.url;
           this.accountService.setCurrentUser(this.user);
      }
    }
  }

    memeToggle() {
        this.memeUploadMode = !this.memeUploadMode;
    }

The error occurs at this line:

   this.member.memes.push(meme);

I've already looked at similar questions, however none of the answers helped me. I must add that I already have a similar feature for adding user's photos, which is set up identically and it works. Any help would be much appreaciated.

Cheers, Filip

CodePudding user response：

You should define member in your component

member = {
  memes: [],
  memeUrl: ''
};

CodePudding user response：

Ah, right. I see. I had those in my Upload.ts file when the error occured:

@Input() member: Member;
  members: Member[];
  memes: Meme[] = [];
  model: any = {}
  uploader: FileUploader;

After defining the member as you suggested, the compiler asked me to define every other attribute as well. Now it works, you are my savior, my good Sir :)