title: unwanted autoreload page in angular
body: <p>after implementing the file upload progress management in upoadImage(), my page automatically reloads, there is a refresh after the upload has been completed but I have not inserted any piece of code for this to happen. How to solve this unwanted feature? Thanks</p>
  
  <p><strong>sell-new-car.component.ts</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import * as _ from 'lodash';
  import { FormGroup, FormBuilder, Validators } from '@angular/forms';
  import { CarUploadService } from '../services/car-upload.service';
  import { AuthenticationService } from '../services/authentication.service';
  import { Observable, forkJoin } from 'rxjs';
  import { HttpEventType, HttpEvent } from '@angular/common/http';
  
  @Component({
    selector: 'app-sell-new-car',
    templateUrl: './sell-new-car.component.html',
    styleUrls: ['./sell-new-car.component.css']
  })
  export class SellNewCarComponent implements OnInit {
  
    observable: Observable&lt;any&gt;;
  
    imageError: string[] = [null, null, null];
    isImageSaved: boolean[] = [false, false, false];
    cardImageBase64: string[] = [null, null, null];
    fileToUpload = [null, null, null];
    imageUrl: string[] = [null, null, null];
  
    step:boolean[] = [true, false, false, false, false];
    uploading:boolean = false;
  
    // Size Filter Bytes
    max_size = 1048576; // 1MB
    allowed_types = ['image/png', 'image/jpeg'];
    height = 300;
    width = 300;
  
    detailsForm: FormGroup;
    carId: number;
    brand: any;
    model: any;
    userId: number;
  
    constructor(private formBuilder: FormBuilder, private carUploadService: CarUploadService, private authenticationService:AuthenticationService) { }
  
    ngOnInit() {
  
      this.detailsForm = this.formBuilder.group({
        brand: ['', Validators.required],
        model: ['', Validators.required],
      });
  
    }
  
    // convenience getter for easy access to form fields
    get f() { return this.detailsForm.controls; }
  
    fileChangeEvent(fileInput: any, formN:number) {
  
      this.imageError[formN] = null;
      this.cardImageBase64[formN] = null;
      this.isImageSaved[formN] = false;
  
      this.fileToUpload[formN] = fileInput.target.files[0];
  
      if (fileInput) {
  /*
        if (fileInput.target.files[0].size &gt; this.max_size) {
          //this.imageError = 'Maximum size allowed is ' + max_size / 1000000 + 'MB';
          this.imageError[formN] = 'Maximum size allowed is 1 MB';
  
          return false;
        }
  
        if (!_.includes(this.allowed_types, fileInput.target.files[0].type)) {
          this.imageError[formN] = 'Only Images are allowed ( JPG | PNG )';
  
          return false;
        }
     */
        const reader = new FileReader();
        reader.onload = (e: any) =&gt; {
          const image = new Image();
          image.src = e.target.result;
          image.onload = rs =&gt; {
            const img_height = rs.currentTarget['height'];
            const img_width = rs.currentTarget['width'];
  /*
              if (img_height != this.height || img_width != this.width) {
  
                this.imageError[formN] = 'Dimentions allowed ' + this.height + '*' + this.width + 'px';
  
                return false;
              } else {
  
                this.cardImageBase64[formN] = e.target.result;
                this.isImageSaved[formN] = true;
                this.imageUrl[formN] = fileInput.target.files[0].name;
  
              }
              */
  
             this.cardImageBase64[formN] = e.target.result;
             this.isImageSaved[formN] = true;
             this.imageUrl[formN] = fileInput.target.files[0].name;
            };
        };
  
        reader.readAsDataURL(fileInput.target.files[0]);
  
      }
    }
  
    removeImage(formN) {
      this.cardImageBase64[formN] = null;
      this.isImageSaved[formN] = false;
    }
  
    saveDetails(){
      this.brand = this.detailsForm.controls['brand'].value;
      this.model = this.detailsForm.controls['model'].value;
  
      this.step[0] = false;
      this.step[1] = true;
  
    }
  
    uploadDetails(){
  
      this.uploading=true;
      this.userId = this.authenticationService.currentUserValue.id;
  
      this.carUploadService.uploadDetails(this.userId, this.model, this.brand).subscribe( data =&gt; {
  
        this.carId=data['carId'];
  
        this.uploadImages();
  
      }, error =&gt; {
        console.error(error);
      });
  
    }
  
    uploadImages(){
  
      const imagePath = 'CarsImages/';
  
      for(let i=0;i&lt;this.imageUrl.length;i++){
        this.carUploadService.uploadImage(this.fileToUpload[i], i, imagePath+this.imageUrl[i], this.carId).subscribe((event:HttpEvent&lt;any&gt;) =&gt; {
  
          if (event.type === HttpEventType.UploadProgress) {
            const percentDone = Math.round(100 * event.loaded / event.total);
            console.log("progress=" + percentDone);
          }
  
          if (event.type === HttpEventType.Response) {
            if(event.status!=409){
              this.step[4] = false;
              this.step[5] = true;
              console.log('upload successful');
            }
          }
  
        });
  
        //INSERIRE LA GESTIONE DEGLI ERRORI
  
      }
  
    }
  
    nextStep(formN:number){
  
      if(formN == 0){
        this.step[1] = false;
        this.step[2] = true;
      }else if(formN == 1){
        this.step[2] = false;
        this.step[3] = true;
      }if(formN == 2){
        this.step[3] = false;
        this.step[4] = true;
        this.uploadDetails();
      }
  
    }
  }
  </code></pre>
  
  <p><strong>car-upload.service.ts</strong></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { HttpClient, HttpHeaders, HttpParams, HttpResponse, HttpEventType, HttpRequest, HttpEvent } from '@angular/common/http';
  import { Observable, Subject } from 'rxjs';
  
  @Injectable({
    providedIn: 'root'
  })
  export class CarUploadService {
  
    constructor(private http:HttpClient) { }
  
    headers = {
      headers: new HttpHeaders({
        'Content-Type' : 'application/json',
        'Accept': 'application/json'
      })
    };
  
    headersImageBase64 = {
      headers: new HttpHeaders({
        'Content-Type': 'multipart/form-data'
      })
    }
  
    headersNo = {
      headers: new HttpHeaders({
  
      })
    }
  
    uploadDetails(userId, model, brand){
  
      return this.http.post('http://localhost:8080/uploadCarDetails?userId=' + userId +'&amp;model=' + model +'&amp;brand=' + brand, this.headers);
  
    }
  
    uploadImage(image:File, imageN, imageUrl, carId) {
  
      const progress = new Subject&lt;number&gt;();
      // this will be the our resulting map
      const status: { [key: string]: { progress: Observable&lt;number&gt; } } = {};
  
      const formData: FormData = new FormData();
      formData.append('image', image, image.name);
  
      //const req = new HttpRequest('POST', 'http://localhost:8080/uploadCarImage?' + 'imageN=' + imageN + '&amp;imageUrl=' + imageUrl + '&amp;carId=' + carId, formData, {reportProgress: true});
      //return this.http.request(req);
      return this.http.post&lt;HttpEvent&lt;any&gt;&gt;('http://localhost:8080/uploadCarImage?' + 'imageN=' + imageN + '&amp;imageUrl=' + imageUrl + '&amp;carId=' + carId, formData, { observe: 'events', reportProgress: true});
    }
  
  }
  </code></pre>
  
  <p>stackoverflow saying me that the post is mostly coded so i'm adding something to bypass this stupid automatic feature</p>