File upload using angular 4

Question

I am trying to upload a file using angular 4, however it doesn't seem to work despite following keenly on tuitorial. Can someone help to spot what I might be doing wrong and I will really appreciate. Below is my code:

import { Component, OnInit } from '@angular/core';
import { ConnectionManagerComponent } from 'src/app/connection-manager/connection-manager.component';
import { ViewChild } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { FormBuilder } from '@angular/forms';
import { Router } from '@angular/router';
import { Validators } from '@angular/forms';

@Component({
  selector: 'app-new-contact-list.component',
  templateUrl: './new-contact-list.component.html',
  styleUrls: ['./new-contact-list.component.css']
})
export class NewContactListComponent implements OnInit {
  @ViewChild(ConnectionManagerComponent) connectionManager:ConnectionManagerComponent;
  form:FormGroup;
  selectedFile: File;

  onFileChanged(event) {
    this.selectedFile = event.target.files[0]
  }

  constructor(private fb: FormBuilder,public router:Router) {
    this.form = this.fb.group({
      name: ['', Validators.required],
      fileName: ['', Validators.required],


  });
  }

  ngOnInit() {
  }
  addContactList()
  {
    const val = this.form.value;
    let contactListName = val.name;
    const fd = new FormData();
    fd.append("name" ,contactListName);
    fd.append('file', this.selectedFile,this.selectedFile.name);
    console.log(fd);
    this.connectionManager.post('/contactGroups', res => {
      console.log(res);
           this.router.navigateByUrl('/newContactList');
       },fd);
  }

}

 <div class="input-group">
   <input style="display: none" id="fileName" 
          formControlName="fileName"
          type="file"
          (change)="onFileChanged($event)"
          #fileInput>
   <button (click)="fileInput.click()">Select File</button>
 </div>

Answer 1

File Process Upload In angular:

app.component.html

<input #fileUpload type="file" id="fileUpload" style="" (change)="detectFiles($event)" (click)="fileUpload.value = null">

app.component.ts

import { Component } from '@angular/core';
import { HttpEvent, HttpEventType } from '@angular/common/http';
import { FileUploadService } from './fileUpload.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  constructor(private fileUploadService: FileUploadService) {

  }
  detectFiles(event) {
    if (event.target.files.length == 0) {
      console.log("No file selected!");
      return
    }
    let file: File = event.target.files[0];
    console.log("FILE DATA:",file);

    let uploadPath = "/home/upload/";

  this.fileUploadService.uploadFile(uploadPath, file).subscribe((event: HttpEvent<any>) => {
      switch (event.type) {
        case HttpEventType.Response:
          console.log(event.body);
      }
    });

  }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

import { HttpClientModule } from '@angular/common/http';
import { FileUploadService } from './fileUpload.service';

@NgModule({
  imports:      [ BrowserModule, FormsModule, HttpClientModule],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ],
  providers: [ FileUploadService ]
})
export class AppModule { }

fileUpload.service.ts

import { Inject, Injectable } from '@angular/core';
import { HttpClient, HttpParams, HttpHeaders, HttpRequest } from '@angular/common/http';
import { map } from 'rxjs/operators';

@Injectable()
export class FileUploadService {
  constructor(private http: HttpClient) {

  }

  uploadFile(uploadPath, fileToUpload: File) {
    const _formData = new FormData();
    _formData.append('file', fileToUpload, fileToUpload.name);
    _formData.append('uploadPath', uploadPath);

    const url = `api/v1/uploadFile`;

    const request = new HttpRequest('POST', url, _formData, {reportProgress: true });
    return this.http.request(request);
  }

}

Refer: https://stackblitz.com/edit/angular-rmpdhr?file=src%2Fapp%2FfileUpload.service.ts

Answer 2

Only file selection is happening there. The execution stops at onFileChanged() function. Try the snippet below for the onFileChanged() function. If it doesn't work. Please mention the reference.

onFileChanged(event) {
this.selectedFile = event.target.files[0];
addContactList();
}