progress

https://deonggi.tistory.com/57

droppedFiles(allFiles: File[]): void {
this.allFiles = [];
const filesAmount = allFiles.length;

if (filesAmount !== 1) {
  swal('정보', '1개의 파일만 업로드할 수 있습니다.', 'info');
  return;
} else {
  for (let i = 0; i < filesAmount; i++) {
    const file = allFiles[i];
    if (file.name.lastIndexOf('.jar') !== -1) {
      this.allFiles.push(file);
    }
  }
}

if (this.allFiles.length === 1) {
  swal({
    title: '업그레이드 확인',
    text: this.allFiles[0].name + ' 파일로 패치를 진행합니다.',
    icon: 'info',
    buttons: {
      confirm: {
        text: '패치',
        value: true,
        visible: true,
      },
      cancel: {
        text: '취소',
        value: false,
        visible: true,
      },
    },
    dangerMode: false,
  }).then((btnEvt) => {
    if (btnEvt) {
      // progress selector
      const bar = $('.bar');
      const percent = $('.percent');
      const status = $('#status');

      const formData: FormData = new FormData();
      formData.append('file', this.allFiles[0]);

      $.ajax({
        xhr: function () {
          const xhr = new window.XMLHttpRequest();
          xhr.upload.addEventListener("progress", function (evt) {
            if (evt.lengthComputable) {
              // progress width 조절
              let percentComplete = Math.floor((evt.loaded / evt.total) * 100);
              let percentVal = percentComplete + '%';
              bar.width(percentVal);
              percent.html(percentVal);
            }
          }, false);
          return xhr;
        },
        type: 'POST',
        url: this.API_URL + "system/update",
        dataType: 'text',
        data: formData,
        processData: false,
        contentType: false,
        beforeSend: function () {
          // progress 열기
          $("#pleaseWaitDialog").css("opacity", 1);
          $("#pleaseWaitDialog").css("display", "flex");

          status.empty();
          var percentVal = '0%';
          bar.width(percentVal);
          percent.html(percentVal);
        },
        complete: function () {
          // progress 닫기
          $("#pleaseWaitDialog").css("opacity", 0);
          $("#pleaseWaitDialog").css("display", "none");

        },
        error: function (request, status, error) {
          console.log("code:" + request.status + "\n" + "message:" + request.responseText + "\n" + "error:" + error);
        },
        success: function (result, status) {
          // 업로드에 성공 후 패치 진행
          swal(
            '정보',
            '패치파일 업로드가 완료 되어 서버를 재시작 합니다.',
            'info'
          ).then(() => {
            this.router.navigate(['/auth/signin']);
            this.systemService.patchProcessStart().subscribe((result) => { });
          });
        }
      });
    }
  });
} else {
  swal('정보', '파일 형식이 올바르지 않습니다.', 'info');
}

}