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

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();
}

Answer 2

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