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

05 January 2018 เขียนเมื่อ 7 ปีก่อน โดย Ninenik Narkdee

progress event httpclient angular

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ progress event httpclient angular

ดูแล้ว 7,886 ครั้ง

เนื้อหาในตอนที่ 6 นี้เราจะมาดูในเรื่องการใช้งาน Advance HttpClient ใน Anuglar ส่วนของ

การใช้งาน progress event กรณีที่ใช้งานร่วมกับการอัพโหลดไฟล์ที่มีขนาดใหญ่ และเราต้องการ

ที่จะแสดงสถานะหรือความคืบหน้าของการอัพโหลด เช่นว่า ขณะนี้อัพโหลดไปแล้วคิดเป็นกี่เปอร์เซ็น

เป็นต้น

ในตัวอย่างการประยุกต์และการใช้งานที่จะนำเสนอต่อไปนี้ จะมีด้วยกัน 2 รูปแบบ แบบแรกคือการเลือก

เฉพาะไฟล์สำหรับอัพโหลด โดยไม่มีการส่งข้อมูลใดๆ นอกจากไฟล์ที่ต้องการอัพโหลด และมีการใช้งาน

progress event หรือการใช้งาน event ที่แสดงถึงความคืบหน้าของอัพโหลดไฟล์ ส่วนแบบที่สองเราจะเป็น

การใช้งานกรณีส่งข้อมูลรูปภาพไปพร้อมกับข้อมูลของ element form อื่นเพิ่มเติมไปด้วย โดยในที่นี้เราจะ

ส่งข้อมูลจาก input text และก็ไฟล์อัพโหลดไปใช้งานพร้อมกัน โดยวิธีที่สองนี้จะไม่มีการใช้งาน progress event

สำหรับในตัวอย่าง เราจะใช้รูปแบบของ input file ของ bootstrap 4 โดยจะยกตัวอย่างเป็นการอัพโหลด

เป็นไฟล์รูปแบบ มีการแสดง preview รูปภาพที่กำลังจะอัพโหลดด้วย

การอัพโหลดไฟล์ร่วมกับ การใช้งาน Progress Event

เริ่มต้นกันที่ไฟล์ register.component.css กำหนด css class สำหรับใช้งานดังนี้

ไฟล์ register.component.css

#place_previewImg{
    margin-bottom: 10px;
}

ไฟล์ register.component.html

<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 type file สำหรับอัพโหลไฟล์รุปภาพ

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

มีการกำหนด onChange event เข้าไปสำหรับทำการแสดงรูปภาพ preview ผ่านฟังก์ชั่น onChangePic($event)

โดยส่งค่า Event Object เข้าไปในฟังก์ชั่นด้วย เมื่อมีการเลือกไฟล์รูปภาพ ก็จะให้แสดงชื่อไฟล์รูปภาพผ่านตัวแปร

chooseFile

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

และแสดงรูป prview ในส่วนของแท็ก img

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

หน้าตาของส่วนของฟอร์มอัพโหลดไฟล์ จะได้เป็นดังนี้

ตัวอย่างเมื่อเลือกไฟล์ (กรณีเพิ่มโค้ด javascript แล้ว)

ต่อไปดูในส่วนของไฟล์การทำงานเพื่อทำการอัพโหลดไฟล์ให้เราปรับไฟล์ register.component.ts เป็นดังนี้

ไฟล์ register.component.ts

100

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

คำอธิบายแสดงในโค้ด เรามีการกำหนด option ให้มีการใช้งาน progress event ผ่านการกำหนดค่า reportProgress: true

ผลลัพธ์ของการทำงานของโค้ดข้างต้นดังแสดงในรุปตัวด้านล่าง

ต่อไปส่วนของฝั่ง server หรือ backend service ที่เราทำการรับค่าและบันทึกไฟล์ที่ได้ทำการอัพโหลด

ในตัวอย่างเราส่งไปที่ไฟล์ show_data.php ให้เราปรับในส่วนของไฟล์นี้เป็นดังนี้

ไฟล์ show_data.php ไฟล์รับค่าฝั่ง server

<?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"
    ));
}
?>

ทดสอบการทำงาน สังเกตจากรูปด้านล่าง เมื่อมีการอัพโหลดไฟล์เรียบร้อยแล้ว เราทำการล้างค่าข้อมูลเก่า

ในฟอร์มจะไม่มีการแสดงรุปภาพ preview แล้ว พร้อมสำหรับการอัพโหลดไฟล์ใหม่แล้ว ส่วนของ console

เราจะเห็นว่ามีการแสดง progress event ค่าเป็นเปอร์เซ็นต์การทำงานในตัวอย่างจะเห็นมี 72% แลถก็ 100%

เมื่อมีการอัพโหลดไฟล์สำเร็จ

ตัวอย่างไฟล์รุปภาพที่อัพโหลดสำเร็จแล้ว

เป็นอันเสร็จเรียบร้อยสำหรับแนวทางแรกที่มีการใช้งาน progress event

การอัพโหลดไฟล์พร้อมกับข้อมูลอื่นๆในฟอร์มด้วย FormData Object

ไปต่อที่รูปแบบที่สอง ที่มีการส่งรูปภาพไปพร้อมกับข้อมูลฟอร์มไปบันทึกพร้อมกัน ให้เราปรับไฟล์

ไฟล์ register.component.html

<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>

จากนั้นปรับโค้ดในส่วนของไฟล์ register.component.ts เป็นดังนี้

ไฟล์ register.component.ts

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

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

สำหรับการใช้งาน formData นั้นค่าที่ส่งไป จะเหมือนกับการส่งค่าปกติ ในตัวอย่างเราส่งข้อมูลแบบ POST เวลารับค่า

ในไฟล์ฝั่ง server เราก็รับค่าด้วยตัวแปร $_POST กรณีส่งค่าแบบ GET ก็รับค่าผ่านตัวแปร $_GET ส่วนถ้าเป็นไฟล์ส่งไป

ก็รับค่าผ่านตัวแปร $_FILSES เป็นรูปแบบการใช้งานปกติ ในที่นี้จะไม่ขอยกตัวอย่างโค้ดการอัพโหลดไฟล์ สามารถค้นหา

เพิ่มเดิมในเว็บไซต์ได้ จะแสดงแค่ค่าที่ถูกส่งไปดังนี้

ไฟล์ show_data.php

<?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"
    ));
}
?>

ทดสอบการทำงาน กรอกข้อมูล เลือกรูปภาพ จากนั้นกด submit

จะได้ค่าของข้อมูลที่ถูกส่งไปดังนี้

สามารถนำไปประยุกต์เพิ่มเติมได้ตามต้องการ

ตอนนี้เราได้ทำความเข้าใจในการรับส่งข้อมูลระหว่าง front-end และ backend ไปมากพอสมควรแล้ว เนื้อหาต่อไป

จะเป็นอะไร รอติดตาม

กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ

อ่านต่อที่บทความ

09 Jan
2018

ทำความรู้จักกับ และใช้งาน Lifecycle Hook ใน Angular อ่าน 17,888
ในการใช้งาน Component ใน Angular จะมีระบบจัดการที่เรียกว่า Lifecycle ที่สามาร

เนื้อหาที่เกี่ยวข้อง

16 Dec
2017

การใช้งาน HttpClient ติดต่อกับ backend service ใน Angular ตอนที่ 1 อ่าน 26,457
เนื้อหาต่อไปนี้ เราจะมาดูในส่วนของการติดต่อรับส่งข้อมูลระหว่าง front-end และ
17 Dec
2017

ดึงข้อมูล แสดงรายการพร้อมแบ่งหน้า ด้วย HttpClient ใน Angular ตอนที่ 2 อ่าน 16,939
จากที่ได้เกริ่นไปแล้วในตอนท้ายของเนื้อหาแรกเกี่ยวกับ การใช้งาน HttpClient ว่า
21 Dec
2017

การส่งข้อมูลไปยัง backend service ด้วย HttpClient ใน Angular ตอนที่ 3 อ่าน 13,436
สำหรับเนื้อหาในตอนที่ 3 ในการใช้งาน HttpClient นี้ เราจะมาดูในเรื่องการส่งข้อ
22 Dec
2017

แทรกการทำงานของ HttpClient ขณะที่ Request และ Response ตอนที่ 4 อ่าน 12,561
ก่อนเข้าสู่รายละเอียดเนื้อหาในตอนที่ 4 นี้ ขอย้อนไปเพิ่มเติมในส่วนของการกำหนด
25 Dec
2017

การ cache GET Request และการใช้งาน HttpClient ขั้นสูง ตอนที่ 5 อ่าน 7,115
ในเนื้อหาตอนที่ 5 นี้ เราจะมาดู การใช้งาน HttpClient ขั้นสูง กันต่อ โดยจะเริ่
กำลังอ่านเนื้อหานี้อยู่

05 Jan
2018

การใช้งาน Progress Event กับการอัพโหลดไฟล์ ใน HttpClient ตอนที่ 6 อ่าน 7,886
เนื้อหาในตอนที่ 6 นี้เราจะมาดูในเรื่องการใช้งาน Advance HttpClient ใน Anuglar

URL สำหรับอ้างอิง

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน