การใช้งาน Progress Event กับการอัพโหลดไฟล์ ใน HttpClient ตอนที่ 6

#place_previewImg{
    margin-bottom: 10px;
}

<p>  register works!</p>
<pre>{{ responseValue | json }}</pre>
<pre>{{ registForm.value | json }}</pre>
<form (ngSubmit)="onSubmit(registForm)" #registForm="ngForm" novalidate>
  <div class="form-group row">
    <label for="file2" class="col-3 col-form-label text-right">
        อัพโหลดไฟล์
    </label>
    <div class="col-6">
      <label class="custom-file">
        <input (change)="onChangePic($event)" type="file" name="file2" id="file2" class="custom-file-input" accept="image/*">
        <span class="custom-file-control">{{ chooseFile }}</span>
      </label>          
    </div>
    <div class="offset-3"></div>
  </div>  
  <div class="form-row">
    <div class="col-9 offset-3">
      <img id="place_previewImg" *ngIf="previewLoaded" [src]="previewImg" style="height:150px;">
    </div>
  </div>     
  <div class="form-row">
    <div class="col-9 offset-3">
      <button type="submit" [disabled]="!registForm.valid" class="btn btn-primary">สมัครสมาชิก</button>
    </div>
  </div>    
</form>
<br>

<input (change)="onChangePic($event)" type="file" name="file2" id="file2" class="custom-file-input" accept="image/*">

<span class="custom-file-control">{{ chooseFile }}</span>

<img id="place_previewImg" *ngIf="previewLoaded" [src]="previewImg" style="height:150px;">

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, ParamMap } from '@angular/router';
import { HttpClient, HttpHeaders, 
        HttpErrorResponse, 
        HttpRequest,
        HttpEventType,
        HttpResponse,
        HttpParams } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Component({
  // selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css']
})
export class RegisterComponent implements OnInit {
  public provinces:string[] = ['กรุงเทพฯ','นนทบุรี'];
  public hobbies:string[] = ['ออกกำลังกาย','อ่านหนังสือ'];
  public urlApi:string = "http://localhost/demo/";
  public responseValue:any;  
  public chooseFile:string = '';
  public previewImg:any;
  public previewLoaded:boolean = false;
  public fileList:any[];
  public fileupload:any;

  constructor(
    private http:HttpClient,
    private route: ActivatedRoute,
    private router:Router
  ) { }  

  onSubmit(f:any){
    let data = f.value; // ในที่นี้ค่านี้ยังไม่ใช้ เพราะเราจะส่งแค่ไฟล์ไปอย่างเดียว

    let file:any = this.fileupload; // กำหนด file Object mี่จะทำการอัพโหลด
    const req = new HttpRequest('POST',this.urlApi+'show_data.php', file, {
      reportProgress: true, // กำหนด reportProgress เพื่อใ้ช้งาน prgress event
    });    

    this.http.request(req).subscribe(event => {
      // โดยรูปแบบการอัพโหลดด้วยวิธีนี้จะเป็นการส่งข้อมูลแบบ event stream 
      // ที่เราสามารถดูความคืบหน้าการอัพโหลดได้ 
      if (event.type === HttpEventType.UploadProgress) { // ขณะกำลังอัพโหลด
        // ทดสอบแสดงสถานะการอัพโหลดผ่่านทาง console
        const percentDone = Math.round(100 * event.loaded / event.total);
        console.log(`File is ${percentDone}% uploaded.`);
      } else if (event instanceof HttpResponse) {
        // แสดงสถานะอัพโหลดสำเร็จแล้วทาง console
        console.log('File is completely uploaded!');
        this.fileupload = null;
        this.chooseFile = '';
        this.previewLoaded = false;		
      }
    });    

  // การตรวจสอบการเลือกไฟล์และแสดงชื่อไฟล์
  onChangePic(e:any){
    console.log(e);
    let file = e.dataTransfer ? e.dataTransfer.files[0] : e.target.files[0];
    this.fileupload = file;
    this.fileList = e.target.files;
    console.log(file);
    console.log(typeof file);
    if(typeof(file)=='undefined'){
      console.log("Please choose file");
      this.chooseFile = '';
      this.previewImg = '';
      this.previewLoaded = false;
    }else{
      this.chooseFile = file.name;  
      this.previewThumbnail(file);
    }
  }
 
  // ส่วนของการแสดงรูป preview 
  previewThumbnail(file:any){
      let imageType = /image.*/
      if(!file.type.match(imageType)){
        alert('invalid format');
        return;
      }
      let reader = new FileReader();
      reader.onload = this._handleReaderLoaded.bind(this);
      reader.readAsDataURL(file);
  }

  // ส่วนของการส่ง dataUti ของรุปไปแสดงเป็น preview
  _handleReaderLoaded(e) {
    this.previewImg = e.target.result;
    this.previewLoaded = true;
  }


  ngOnInit() {

  }

}

<?php
header('Access-Control-Allow-Origin: *'); 
header('Access-Control-Allow-Headers: Content-Type,X-Custom-Header'); 
header('Content-type: application/json');
$jsonData = array();	
if($_SERVER['REQUEST_METHOD'] == "GET") {
	echo json_encode($jsonData);
}elseif($_SERVER['REQUEST_METHOD'] == "OPTIONS"){
	echo json_encode($jsonData);
}elseif($_SERVER['REQUEST_METHOD'] == "POST"){
	$uploadData = file_get_contents('php://input');
	//$vars=parse_str($res,$post_vars);
	$headers = getallheaders();	
	// https://www.freeformatter.com/mime-types-list.html
	$mime_types = array(
		'png' => 'image/png',
		'jpg' => 'image/jpeg',
		'jpeg' => 'image/jpeg',
		'jpg' => 'image/jpeg',
		'gif' => 'image/gif',
		'bmp' => 'image/bmp',
		'ico' => 'image/vnd.microsoft.icon',
		'tiff' => 'image/tiff',
		'tif' => 'image/tiff',
		'svg' => 'image/svg+xml',
		'svgz' => 'image/svg+xml',
	);
	$ext = array_search($headers['Content-Type'], $mime_types); 
	$filename = time().".".$ext;
	file_put_contents("upload/".$filename,$uploadData);
	echo json_encode(array(
		"statusCode"=>"200 OK",
		"statusMessage"=>"Successful"
	));	
}else{
    header("HTTP/1.1 403 Access Forbidden");
	echo json_encode(array(
		"statusCode"=>"403 Access Forbidden",
		"statusMessage"=>"Fail"
	));
}
?>

<p>  register works!</p>
<pre>{{ responseValue | json }}</pre>
<pre>{{ registForm.value | json }}</pre>
<form (ngSubmit)="onSubmit(registForm)" #registForm="ngForm" novalidate>
  <div class="form-group row">
    <label for="fullname" class="col-3 col-form-label text-right">
        ชื่อ นามสกุล
    </label>
    <div class="col-6">
      <input type="text" class="form-control is-invalid" ngModel #fullname="ngModel" name="fullname" id="fullname" 
      [class.is-valid]="fullname.valid" [class.is-invalid]="!fullname.valid" 
      placeholder="Fullname" required>
      <div class="invalid-feedback">
        Please provide a valid Fullname.
      </div>      
    </div>
    <div class="offset-3"></div>
  </div>  

  <div class="form-group row">
    <label for="file2" class="col-3 col-form-label text-right">
        อัพโหลดไฟล์
    </label>
    <div class="col-6">
      <label class="custom-file">
        <input (change)="onChangePic($event)" type="file" name="file2" id="file2" class="custom-file-input" accept="image/*">
        <span class="custom-file-control">{{ chooseFile }}</span>
      </label>          
    </div>
    <div class="offset-3"></div>
  </div>  
  <div class="form-row">
    <div class="col-9 offset-3">
      <img id="place_previewImg" *ngIf="previewLoaded" [src]="previewImg" style="height:150px;">
    </div>
  </div>     
  <div class="form-row">
    <div class="col-9 offset-3">
      <button type="submit" [disabled]="!registForm.valid" class="btn btn-primary">สมัครสมาชิก</button>
    </div>
  </div>    
</form>
<br>

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, ParamMap } from '@angular/router';
import { HttpClient, HttpHeaders, 
        HttpErrorResponse, 
        HttpRequest,
        HttpEventType,
        HttpResponse,
        HttpParams } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Component({
  // selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css']
})
export class RegisterComponent implements OnInit {
  public provinces:string[] = ['กรุงเทพฯ','นนทบุรี'];
  public hobbies:string[] = ['ออกกำลังกาย','อ่านหนังสือ'];
  public urlApi:string = "http://localhost/demo/";
  public responseValue:any;  
  public chooseFile:string = '';
  public previewImg:any;
  public previewLoaded:boolean = false;
  public fileList:any[];
  public fileupload:any;

  constructor(
    private http:HttpClient,
    private route: ActivatedRoute,
    private router:Router
  ) { }  

  onSubmit(f:any){
    let data = f.value; 
    let file:any = this.fileupload;
    let formData:FormData = new FormData();
    
    // กรณีมีการเลือกไฟล์ ส่งไฟล์ไปใช้งานกับ formData
    if(file && file!='undefined'){
      console.log(file);
      formData.append('uploadFile', file, file.name);
    }
    // วนลูปค่าจาก form ที่ส่งเข้ามา ไปใช้งานใน formData
    for(let key in data ) {
      formData.append(key, data[key]);
    }    

    this.http.post(this.urlApi+'show_data.php',formData,{
      headers: new HttpHeaders().set('X-Custom-Header', 'my-header'),
      params: new HttpParams().set('id', '3')
    })    
    .subscribe(result =>{
      this.responseValue = result;
      console.log(result);
      f.reset(); // reset form
      this.fileupload = null;
      this.chooseFile = '';
      this.previewLoaded = false;      
    },
    ( err:HttpErrorResponse ) => {
      // กรณี error
      if (err.error instanceof Error) {
        // กรณี error ฝั่งผู้ใช้งาน หรือ การเชื่อมต่อเกิด error ขึ้น
        console.log('An error occurred:', err.error.message);
      }else{ // กรณี error ฝั่ง server ไม่พบไฟล์ ,server error 
        console.log(`Backend returned code ${err.status}, body was: ${err.error}`);
      }       
    });
  }

  // การตรวจสอบการเลือกไฟล์และแสดงชื่อไฟล์
  onChangePic(e:any){
    console.log(e);
    let file = e.dataTransfer ? e.dataTransfer.files[0] : e.target.files[0];
    this.fileupload = file;
    this.fileList = e.target.files;
    console.log(file);
    console.log(typeof file);
    if(typeof(file)=='undefined'){
      console.log("Please choose file");
      this.chooseFile = '';
      this.previewImg = '';
      this.previewLoaded = false;
    }else{
      this.chooseFile = file.name;  
      this.previewThumbnail(file);
    }
  }
 
  // ส่วนของการแสดงรูป preview 
  previewThumbnail(file:any){
      let imageType = /image.*/
      if(!file.type.match(imageType)){
        alert('invalid format');
        return;
      }
      let reader = new FileReader();
      reader.onload = this._handleReaderLoaded.bind(this);
      reader.readAsDataURL(file);
  }

  // ส่วนของการส่ง dataUti ของรุปไปแสดงเป็น preview
  _handleReaderLoaded(e) {
    this.previewImg = e.target.result;
    this.previewLoaded = true;
  }


  ngOnInit() {

  }

}

<?php
header('Access-Control-Allow-Origin: *'); 
header('Access-Control-Allow-Headers: Content-Type,X-Custom-Header'); 
header('Content-type: application/json');
$jsonData = array();	
if($_SERVER['REQUEST_METHOD'] == "GET") {
	echo json_encode($jsonData);
}elseif($_SERVER['REQUEST_METHOD'] == "OPTIONS"){
	echo json_encode($jsonData);
}elseif($_SERVER['REQUEST_METHOD'] == "POST"){
	echo json_encode(array(
		"statusCode"=>"200 OK",
		"statusMessage"=>"Successful",
		"getData"=>$_GET,
		"fileUpload"=>$_FILES,
		"postData"=>$_POST
	));
}else{
    header("HTTP/1.1 403 Access Forbidden");
	echo json_encode(array(
		"statusCode"=>"403 Access Forbidden",
		"statusMessage"=>"Fail"
	));
}
?>