How to upload photo (ng2-file-upload) Angular cannot read property 'push' of undefined

Question

I'm trying to upload new photo for Recipe, and this is kind of working. Photo is uploading but i have an error in console and to see new photo i have to refresh browser. I'm using asp.net core as model and controller and angular as a view How to solve this problem?

Component

import { Component, OnInit, ViewChild, Input } from '@angular/core';
import { Recipe } from 'src/app/_models/recipe';
import { ActivatedRoute } from '@angular/router';
import { RecipeService } from 'src/app/_services/recipe/recipe.service';
import { AuthService } from 'src/app/_services/auth.service';
import { AlertifyService } from 'src/app/_services/alertify.service';
import { NgForm } from '@angular/forms';
import { RecipePhoto } from 'src/app/_models/recipePhoto';
import { FileUploader } from 'ng2-file-upload';
import { environment } from 'src/environments/environment';

@Component({
  selector: 'app-recipe-edit',
  templateUrl: './recipe-edit.component.html',
  styleUrls: ['./recipe-edit.component.css']
})
export class RecipeEditComponent implements OnInit {
  @ViewChild('editForm', {static: true}) editForm: NgForm;
  recipe: Recipe;
  photos: RecipePhoto[];
  uploader: FileUploader;
  hasBaseDropZoneOver = false;
  baseUrl = environment.apiUrl;
  currentMain: RecipePhoto;

  constructor(private route: ActivatedRoute, private recipeService: RecipeService, private authService: AuthService,
              private alertify: AlertifyService) { }

  ngOnInit() {
    this.route.data.subscribe(data => {
      this.recipe = data.recipe;
    });
    this.initializeUploader();
  }

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

  initializeUploader() {
    this.uploader = new FileUploader({
      url: this.baseUrl + 'users/' + this.authService.decodedToken.nameid + '/recipes/' + this.recipe.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: RecipePhoto = 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) {
          this.recipeService.changeRecipePhoto(photo.url);
          this.recipeService.currentRecipe.photoUrl = photo.url;
          this.recipe = this.recipeService.currentRecipe;
        }
      }
    };
  }
}

Html

<div class="container">
  <div class="row">
    <div class="col-sm-2" *ngFor="let photo of recipe.recipePhotos">
      <img src="{{photo.url}}" class="img-thumbnail p-1" alt="">
      <div class="text-center">
        <button type="button" class="btn btn-sm btn-danger" 
        (click)="deletePhoto(photo.id)" >
        <i class="fa fa-trash-o"></i></button>
      </div>
    </div>
</div>
  <form #editForm="ngForm" id="editForm" (ngSubmit)="updateRecipe(recipe.id)" >
    <h5 class=" text-center mt-4">Description</h5>
    <textarea name="description"  cols=100% rows="6" class="form-contorl mt-2" 
      [(ngModel)]="recipe.description"></textarea>
      <h5 class=" text-center mt-2">Location Details:</h5>
      <div class="form-group mt-3">
        <label for="city">Name</label>
        <input class="form-control" type="text" name="name" [(ngModel)]="recipe.name">
      </div>
      <div class="form-group">
        <label for="country">Ingredients</label>
        <input class="form-control" type="text" name="country" [(ngModel)]="recipe.ingredients">
      </div>
  </form>  

  <button [disabled]="!editForm.dirty" form="editForm" class="btn btn-success btn-block">Save changes</button>



</div>
<div class="containter">
  <div class="row mt-3">

    <div class="col-md-3 mt-3">

        <h3>Add Photos</h3>

        <div ng2FileDrop
             [ngClass]="{'nv-file-over': hasBaseDropZoneOver}"
             (fileOver)="fileOverBase($event)"
             [uploader]="uploader"
             class="card  bg-faded p-3 text-center mt-3 mb-3 my-drop-zone">
             <i class="fa fa-upload fa-3x"></i>
            Drop Photos Here
        </div>



        Multiple
        <input type="file" ng2FileSelect [uploader]="uploader" multiple  /><br/>

        Single
        <input type="file" ng2FileSelect [uploader]="uploader" />
    </div>

    <div class="col-md-6 ml-5" style="margin-bottom: 40px" *ngIf="uploader?.queue?.length">

        <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>
                <td *ngIf="uploader.options.isHTML5">      
            </tr>
            </tbody>
        </table>

        <div>
            <div>
                Queue progress:
                <div class="progress mb-4" >
                    <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 
            </button>
            <button type="button" class="btn btn-warning btn-s"
                    (click)="uploader.cancelAll()" [disabled]="!uploader.isUploading">
                <span class="fa fa-ban"></span> Cancel 
            </button>
            <button type="button" class="btn btn-danger btn-s"
                    (click)="uploader.clearQueue()" [disabled]="!uploader.queue.length">
                <span class="fa fa-trash"></span> Remove 
            </button>
        </div>

    </div>

  </div> 
</div>

Why i got this error if uploading is working

Answer 1

In order to show your photos after uploading a new photo, you have to add your photos variable into the recipe variable because you only initialize your recipe variable on ngOnInit method.

  ngOnInit() {
    this.route.data.subscribe(data => {
     // you're initializing your recipe variable here
     // that's the reason why you can see your photos only on refreshing
      this.recipe = data.recipe;
    });
    this.initializeUploader();
  }

Because you're looping in your HTML code the recipe.recipePhotos.

<div class="col-sm-2" *ngFor="let photo of recipe.recipePhotos"> <!--<- here -->

You have to add your new photo to the recipe.recipePhotos variable instead of push into photos only.

    this.uploader.onSuccessItem = (item, response, status, headers) => {
      if (response) {
        const res: RecipePhoto = JSON.parse(response);
        const photo = {
          id: res.id,
          url: res.url,
          dateAdded: res.dateAdded,
          description: res.description,
          isMain: res.isMain
        };
        // here you have your photos array after uploading a photo
        // whit the new photo uploaded
        this.photos.push(photo);

        // but actually you're looping in your HTML the recipe.recipePhotos
        // so you need to push the new photo into recipePhotos this way
        this.recipe.recipePhotos.push(photo);

        if (photo.isMain) {
          this.recipeService.changeRecipePhoto(photo.url);
          this.recipeService.currentRecipe.photoUrl = photo.url;
          this.recipe = this.recipeService.currentRecipe;
        }
      }

Answer 2

Initialize photos variable:

photos: RecipePhoto[] = [];