title: unsubscribe to upload observable in angular 6 stop upload progress but not actual upload
body: <p>when trying to cancel upload by unsubscribing what actually happen that i unsubscribe to upload progress but that actual upload is not cancelled and keep uploading to the server.
  upload.components.ts</p>
  
  <pre><code>import { Component, OnInit, Input, Output, EventEmitter, OnDestroy } from '@angular/core';
  import { Subject, Subscription, Observable } from 'rxjs';
  import { HttpEventType } from '@angular/common/http';
  import { UploadService } from '../../../services';
  import { takeUntil } from 'rxjs/operators';
  
   @Component({
   selector: 'app-image-upload-item',
    templateUrl: './image-upload-item.component.html',
    styleUrls: ['./image-upload-item.component.scss']
    })
   export class ImageUploadItemComponent implements OnInit, OnDestroy {
    @Input() index: any;
    @Output() uploadSuccess: EventEmitter&lt;any&gt;;
    @Output() uploadCanceled: EventEmitter&lt;any&gt;;
    public localimageURL: string;
    public uploadProgress: number;
    public isUploadCompleted: boolean;
    public uploadImageObservable: Subscription;
    public isReadyForUpload: boolean;
     public isUploading: boolean;
     public progressMode: string;
    public readonly unique: string = Math.floor((Math.random() * 
     100)).toString();
     public readonly imagePreviewID = 'imagePreview' + this.unique;
  
  
        _file: any;
       @Input() public set file(value: any) {
       const reader = new FileReader();
       reader.onload = (e: any) =&gt; {
        this.localimageURL = e.target.result;
      };
       this._file = value;
      reader.readAsDataURL(this._file);
      console.log(this._file);
  
  
       }
      constructor(private uploadService: UploadService) {
       this.uploadProgress = 0;
       this.isUploading = false;
       this.localimageURL = '';
        this.isUploadCompleted = false;
        this.uploadSuccess = new EventEmitter&lt;any&gt;();
        this.uploadCanceled = new EventEmitter&lt;any&gt;();
        this.progressMode = 'indeterminate';
         }
  
       ngOnInit() {
         this.uploadImageToServer(this._file);
  
        // setTimeout(() =&gt; {
        //   console.log('im in set time out unsubscripting', 
          this.uploadImageObservable);
        //    this.uploadImageObservable.forEach(subscription =&gt; {
       //     subscription.unsubscribe();
        //   });
     // }, 100);
     }
  
    ngOnDestroy() {
      console.log('component destroyed');
      this.uploadImageObservable.unsubscribe();
      }
      public clearUploadButtonClicked() {
      // if (this.uploadImageObservable !== undefined) {
     //   console.log('image observable is defined');
     //   this.uploadImageObservable.unsubscribe();
     //   console.log(this.uploadImageObservable.closed);
    // }
      // this.uploadImageObservable.unsubscribe();
     this._file = '';
      this.uploadCanceled.emit({ index: this.index, uploaded: false });
    }
  
     public get showUploadProgress(): boolean {
      return this.uploadProgress !== 0;
     }
  
  
     public uploadImageToServer(file) {
       this.isUploading = true;
      const progress = new Subject&lt;number&gt;();
       progress.subscribe(value =&gt; {
         this.uploadProgress = value;
       });
  
     this.uploadImageObservable = this.uploadService.uploadImage(file)
      .subscribe(result =&gt; {
        const type = result.type;
        const data = result.data;
        console.log(result);
  
         if (type === HttpEventType.UploadProgress) {
          const percentDone = Math.round(100 * data.loaded / data.total);
          progress.next(percentDone);
          if (percentDone === 100) {
            this.progressMode = 'indeterminate';
           }
          } else if (type === HttpEventType.Response) {
            if (data) {
              progress.complete();
             this.progressMode = 'determinate';
             this.isReadyForUpload = false;
             this.isUploadCompleted = true;
             this.isUploading = false;
              this.uploadSuccess.emit({ index: this.index, mediaItem: data });
            }
  
         }
       }, errorEvent =&gt; {
       });
    }
  
     }
  </code></pre>
  
  <p>upload.service.ts</p>
  
  <pre><code>  public uploadImage(imageFile: File): Observable&lt;any&gt; {
      const formData: FormData = new FormData();
       if (imageFile !== undefined) {
         formData.append('image', imageFile, imageFile.name);
  
        const req = new HttpRequest('POST', environment.uploadImageEndPoint, 
        formData, {
        reportProgress: true,
      });
  
     return new Observable&lt;any&gt;(observer =&gt; {
       this.httpClient.request&lt;any&gt;(req).subscribe(event =&gt; {
      if (event.type === HttpEventType.Response) {
        const responseBody = event.body;
        if (responseBody) {
          this.alertService.success(responseBody.message);
          observer.next({ type: event.type, data: new 
        MediaItem(responseBody.mediaItem) });
        }
      } else if (event.type === HttpEventType.UploadProgress) {
        observer.next({ type: event.type, data: { loaded: event.loaded, total: 
     event.total } });
  
      } else {
        observer.next(event);
      }
    }, errorEvent =&gt; {
      if (errorEvent.status === 400) {
        this.alertService.error(errorEvent.error['image']);
      } else {
        this.alertService.error('Server Error, Please try again later!');
      }
      observer.next(null);
      });
     });
    }
   }
  </code></pre>
  
  <p>how can i cancel upload request properly with observable unsubscribe
  note i already tried pipe takeuntil() and nothing changed </p>