IONIC Upload File With Progress Bar – Part 2

Halo semuanya…! sebelumnya kita sudah membahas mengenai cara upload file ke server. Nah! sekarang kita akan menambahkan progress bar ketika melakukan upload file. Bagi yang belum tau cara upload file ke server kalian bisa buka tutorial sebelumnya here.

Buka uploadfile.page.ts dan tambahkan script berikut;

import { Component, OnInit, NgZone } from '@angular/core';
import { HttpClient, HttpEventType, HttpResponse } from '@angular/common/http';

@Component({
  selector: 'app-uploadfile',
  templateUrl: './uploadfile.page.html',
  styleUrls: ['./uploadfile.page.scss'],
})
export class UploadfilePage implements OnInit {

  // declare
  fileName: string;

  // variable tampil progress 
  // tambahkan ini
  showProgress = false;
  progress = 0;

  constructor(
    private http: HttpClient,
    private zone: NgZone
  ) { }

  ngOnInit() {
  }

  // on Change function
  upload(files: File[]) {
    this.fileName = files[0].name;
    this.uploadFiles(files);
  }

  // upload function
  uploadFiles(files: File[]) {
    const formData = new FormData();
    Array.from(files).forEach(f => {
      formData.append('file', f);
    });

    this.http.post('https://services.ptkcg.co.id/hrd/upload/uploadvideo', formData, {
      reportProgress: true,
      observe: 'events'
    })
      .subscribe(async event => {
       // tambahkan juga script ini
        this.showProgress = true;
        if (event.type === HttpEventType.UploadProgress) {
          this.zone.run(() => {
            this.progress = Math.round(100 * event.loaded / event.total);
          });
        }
        if (event instanceof HttpResponse) {
          alert('Successfully!');
        }
      });
  }

}

kemudian pada file uploadfile.page.html tambahkan beberapa code:

<ion-header>
  <ion-toolbar>
    <ion-title>Uploadfile</ion-title>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <div class="uploadvid">
    <!-- tambahkan code ini -->
    <div class="progress-wrapper" *ngIf="showProgress">
      <img src="assets/images/cloud-upload.gif" alt="" width="200">
      <div class="progress-outer">
        Uploading...please wait! {{progress}}%<br>
        <ion-progress-bar type="indeterminate" color="success"></ion-progress-bar>
      </div>
    </div>
    <!-- end code -->
    <ion-button (click)="fileInput.click()" expand="block" size="medium" shape="round"
      color="success">
      <ion-icon slot="start" name="cloud-upload-outline"></ion-icon>
      Choose file
      <input #fileInput type="file" (change)="upload($event.target.files)" style="display: none;" />
    </ion-button>
  </div>
</ion-content>

Tambakan CSS pada file SCSS uploadfile.page.scss.

.uploadvid {
        width: 100%;
        height: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        position: static;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center; 
      }
      
      .uploadvid ion-button {
          margin: auto;
      }
      
      .progress-wrapper {
          position: relative;
          margin: 20px auto;
          font-size: 40px;
          img {
              display: block;
              margin: 0 auto;
          }
      }
      
      
      .progress-outer {
          width: 200px;
          margin: 10px 2%;
          padding: 3px;
          font-size: 15px;
          text-align: center;
          color: grey;
          border-radius: 20px;
      }
      
      .progress-inner {
          min-width: 15%;
          white-space: nowrap;
          overflow: hidden;
          padding: 5px;
          border-radius: 20px;
          background-color: #087f23;
      }

Oke selesai! sekarang coba run project IONIC kalian ionic serve. kemudian buka browser dan masukan http://localhost:8100/uploadfile. Dan uji coba upload filenya.

Dan ketika kita upload file tampilannya akan seperti ini;

Sampai disini dulu tutorialnya. kalau ada yang belum paham bisa komeng!. 🙂

Happy Coding!!