csv file upload database using php, file uploaded but httperroresponse

Jan 19 2021 10:11 AM
  1. <h1>Angular File Upload</h1>  
  2. <div>  
  3. <form [formGroup] = "uploadForm" (ngSubmit)="onSubmit()">  
  4. <div>  
  5. <input type="file" name="profile" (change)="onFileSelect($event)" />  
  6. </div>  
  7. <div>  
  8. <button type="submit">Upload</button>  
  9. </div>  
  10. </form>  
  11. </div>  
  12. import { Component, OnInit } from '@angular/core';  
  13. import { FormBuilder, FormGroup } from '@angular/forms';  
  14. import { HttpClient } from '@angular/common/http';  
  15. import {UploadService} from './upload.service';  
  16.   
  17. @Component({  
  18. selector: 'app-root',  
  19. templateUrl: './app.component.html',  
  20. styleUrls: ['./app.component.css']  
  21. })  
  22. export class AppComponent implements OnInit {  
  23.   
  24. uploadForm: FormGroup;  
  25.   
  26. form: FormGroup;  
  27. uploadResponse;  
  28. SERVER_URL= "http://localhost/web_api/employee2.php";  
  29.   
  30. constructor(private formBuilder: FormBuilder, private httpClient: HttpClient, private UploadService: UploadService) { }  
  31.   
  32. ngOnInit() {  
  33. this.uploadForm = this.formBuilder.group({  
  34. profile: ['']  
  35. });  
  36. }  
  37. onFileSelect(event) {  
  38. if (event.target.files.length > 0) {  
  39. const file = event.target.files[0];  
  40. this.uploadForm.get('profile').setValue(file);  
  41. }  
  42.   
  43.   
  44. }  
  45. onSubmit() {  
  46. const formData = new FormData();  
  47. formData.append('file', this.uploadForm.get('profile').value);  
  48.   
  49.   
  50. // this.httpClient.post<any>(this.SERVER_URL, formData).subscribe(((response) => response.json())  
  51. this.UploadService.uploadFile(formData).subscribe(  
  52. (policy) => console.log(policy),  
  53. (err) => console.log(err)  
  54. );  
  55. }  
  56. }  
  57.   
  58.   
  59. import { Injectable } from '@angular/core';  
  60. import { HttpClient, HttpEvent, HttpErrorResponse, HttpEventType } from '@angular/common/http';  
  61. import { Observable, throwError } from 'rxjs';  
  62. import { catchError, retry } from 'rxjs/operators';  
  63. import { map } from 'rxjs/operators';  
  64.   
  65.   
  66.   
  67. @Injectable({  
  68. providedIn: 'root'  
  69. })  
  70. export class UploadService {  
  71.   
  72.   
  73. SERVER_URL: string = "http://localhost/web_api";  
  74. constructor(private httpClient: HttpClient) { }  
  75.   
  76. public uploadFile(formData) {  
  77. console.log(formData);  
  78. let uploadURL = `${this.SERVER_URL}/employee2.php`;  
  79.   
  80. return this.httpClient.post<any>(uploadURL, formData)  
  81. .pipe(  
  82. retry(1),  
  83. catchError(this.handleError)  
  84. );  
  85. }  
  86.   
  87. handleError(error) {  
  88. let errorMessage = '';  
  89. if (error.error instanceof ErrorEvent) {  
  90. // client-side error  
  91. errorMessage = `Error: ${error.error.message}`;  
  92. else {  
  93. // server-side error  
  94. errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`;  
  95. }  
  96. window.alert(errorMessage);  
  97. return throwError(errorMessage);  
  98. }  
  99. }