File Upload with ngForm in angular 6

upload.component.html

<form name="createForm" role="form" novalidate (ngSubmit)="upload()" #createForm="ngForm">
    <div class="container">
        <h3 class="mt-3">Upload File</h3>
        <hr>
        <div class="row">
            <div class="col-md-4">
                <input type="file" #fileUpload class="form-control" name="fileUpload" [(ngModel)]="inputFile"
                    (change)="handleFileInput(fileUpload.files)" placeholder="Select File">
            </div>
        </div>
        <br>

        <div class="row mt-3">
            <div class="col-md-2 col-lg-2 col-xs-6">
                <div class="button-group">
                    <button type="submit" class="btn btn-primary" [disabled]="!createForm.form.valid" (click)="upload()">
                        <span>Upload</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</form>

upload.component.ts

import { Component, OnInit } from '@angular/core';
import { UploadService } from './upload.service';

@Component({
  selector: 'upload-file',
  templateUrl: './upload.component.html',
  styleUrls: ['./upload.component.css']
})

export class UploadComponent implements OnInit {

  inputFile: File;
  file: File;

  constructor( private uploadService: UploadService ) {}

  ngOnInit() {}

  upload() {
    console.log('inputFile: ', this.inputFile)
    console.log('file: ', this.file)
    this.uploadService.uploadFile(this.file).subscribe((response) => this.onSaveSuccess(response), () => this.onSaveError());
  }

  handleFileInput(files: any) ;
    this.otherFile = files[0];
  }

  onSaveSuccess(res) {
    console.log('File upload Success: ', res)
  }

  onSaveError() {
    console.warn('Error file upload')
  }

}

upload.service.ts

import { HttpClient, HttpHeaders, HttpResponse } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable()
export class UploadService {

  private url: string = 'www.example.com';

  constructor(private http: HttpClient) { }

  uploadFile(file: File): Observable<HttpResponse<any>> {
    const API_ENDPOINT: string = `${this.url}/upload`;
    let formData: FormData = new FormData();
    formData.set('file', file);

    const headers = new HttpHeaders({
      'Authorization': 'Bearer xxxxxxxxxx'
    });

    const options = { headers: headers };

    return this.http
      .post(`${API_ENDPOINT}`, formData, options)
      .pipe(map((response: any) => {
        console.log(response)
        return response;
      }));

  }


}