upload-excel-details.component.html

<div>
  <div class="uploadMain">
    <div class="uploadHeaderBox" >
      <span>{{data.module}} File Upload</span>
      <span style="z-index: 100;">
        <span (click)="minimiseDialogue()"><i class="c-white-500 ti-minus px-2 py-2"></i></span>
        <span (click)="closeUploadDialogue(confirmConfig)"><i class="c-white-500 ti-close px-2 py-2"></i></span>
      </span>
    </div>
    <div class="uploadBody" [ngClass]="minimiseClass" >
        <div *ngIf="!apiCalled.status">
          <div class="excelDiv bgc-green-100 c-green-500">
            <span><i class="fa fa-file-excel-o" aria-hidden="true"></i> <span style="font-size: 1vw">Excel</span></span>
            <span><span class="fileNameDots">{{data?.excelname}}</span> <i class="fa ti-check tickMark bgc-green-200" aria-hidden="true"></i></span>
          </div>
          <div class="" *ngIf="!fileSize">
            <div class="uploadFileSection">
              <div class="templateIcon">
                <i class="ti-zip"></i>
              </div>
                <span style="font-size: 1vw">Drop your zip file here. </span>
                <span style="font-size: 1.2vw">Or <span class="c-blue-300">Browse</span></span>
              <input #uploadFile type="file" accept=".zip" (click)="uploadFile.value = ''" (change)="uploadZipWithExcelFile($event.target.files)" name="uploadExcel" placeholder="Upload XL"/>
            </div>

          </div>
          <div *ngIf="fileSize">
            <div class="excelDiv bgc-orange-100 c-orange-500">
              <span><i class="fa ti-zip" aria-hidden="true"></i> <span style="font-size: 1vw">Zip</span></span>
              <span><span class="fileNameDots">{{uploadDetails[0]?.name}}</span> <i class="fa ti-check tickMark bgc-orange-200" aria-hidden="true"></i></span>
            </div>
          </div>
          <div class="submitBtnDiv"><button class="btn btn-primary" (click)="uploadToServer()" [disabled]="!fileSize">Submit</button></div>
        </div>
        <div class="uploadingInProgress" [ngClass]="apiCalled.text == 'Failed!'?'bgc-red-50':apiCalled.text == 'Uploaded'?'bgc-green-50 uploadedSuccess':''" *ngIf="apiCalled.status">
          <span [ngClass]="apiCalled.text == 'Failed!'?'c-red-500':apiCalled.text == 'Uploaded'?'c-green-500':''">{{apiCalled.text}}</span>
          <div class="progressDiv">
            <span class="statusDiv"><span>{{fileSize}}</span> <span >{{progress}}%</span></span>
            <div class="progress">
              <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" [ngClass]="apiCalled.text == 'Failed!'?'bg-danger':'bg-success'" role="progressbar" [ngStyle]="{width: progress+'%'}" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
          </div>
        </div>
        
      </div>


  </div>
</div>
<ng-template #confirmConfig let-modal class="confirmBox">
  <!-- HEADER -->
  <div class="modal-header boxHeader">
      <h5 class="modal-title c-red-300">Confirmation</h5>
      <h6 class="modal-title" style="font-size: 1vw;">Do you want to cancel the process?</h6>
  </div>
  <!-- BODY FOR ADD AND EDIT -->
  <div class="modal-body boxBody">
      <button class="btn btn-light" (click)="modal.dismiss()">Cancel</button>
      <button class="btn btn-danger" (click)="cancelUpload()">Confirm</button>
  </div>
</ng-template>

upload-excel-details.component.scss

@mixin displayDivCenter {
  display: flex;
  align-items: center;
  justify-content: center;
}
.uploadMain{
  position: relative;
  .uploadHeaderBox{
    background: #404040;
    width: 100%;
    height: 38px;
    border-radius: 8px 8px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #c4c6c8;
    span{
      margin: 0px 6px;
      font-size: 1vw;
    }
  }
  .uploadBody{
    height: 55vh;
    width: 28vw;
    padding: 10px;

    .excelDiv{
      height: 4.5vw;
      font-size: 2.5vw;
      border-radius: 5px;
      display: flex;
      align-items: center;
      padding: 0px 14px;
      justify-content: space-between;
      margin-bottom: 10px;
      .tickMark{
        background: #9fd1a1;
        border-radius: 50%;
        padding: 6px;
        font-size: 1vw;
      }
    }
  }
}

.minimiseTheDIv{
  animation: minimiseBox 0.5s ease-in forwards;
}
@keyframes minimiseBox {
  from {
    height: 52vh;
    opacity: 1;
  }

  to {
    height: 0vh;
    opacity: 0;
  }
}
.maximiseTheDIv{
  animation: maxiseBox 0.5s ease-in forwards;
}
@keyframes maxiseBox {
  from {
    height: 0vh;
    opacity: 0;
  }

  to {
    height: 52vh;
    opacity: 1;
  }
}

.boxHeader{
  flex-direction: column;
}
.boxBody{
  display: flex;
  justify-content: space-between;
}

.uploadFileSection{
  width: 100%;
  height: 15vw;
  background: #e5e7ea;
  // margin-top: 13px;
  border-radius: 5px;
  border: 1px dashed;
  @include displayDivCenter;
  flex-direction: column;
  position: relative;
  cursor: pointer;
  .templateIcon{
    font-size: 4vw;
  }
  input{
    cursor: pointer;
    opacity: 0.0; position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height:100%;
  }
  &:hover{
    background: #eef4fa;
    border-color: #b2b7bd;
  }
}
.progressDiv{
  margin-top: 10px;
  .statusDiv{
    display: flex;
    justify-content: space-between;
  }
}
.uploadingInProgress{
  height: 30vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 15px;
  background: #f5f6f5;
}
.submitBtnDiv{
  position: absolute;
  bottom: 28px;
  right: 10px;
  text-align: right;margin-top: 10px;
}
.fileNameDots{
  font-size: 1vw;
    display: inline-block;
    width: 85px;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
}
.uploadedSuccess{
  animation: uploaded 0.5s ease-in forwards;

}
.uploadedResult{
  // display: flex;
  font-size: 0.7vw;
  .count{
    width: 50%;
    display: inline-block;
    text-align: center;
    color: #393c3a;
  }
  .rejected{
    .title{
      color: white;
      padding: 3px 10px;
    }
  }
}
@keyframes uploaded {
  from {
    height: 30vh;
  }

  to {
    height: 15vh;
  }
}
.maximiseTheDIv{
  animation: maxiseBox 0.5s ease-in forwards;
}

upload-excel-details.component.ts

import { HttpEventType, HttpResponse } from '@angular/common/http';
import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { FileService } from 'src/app/services/file/file.service';
import { ApiConfiguration } from 'src/app/services/http/api-configuration';
import { ApiService } from 'src/app/services/http/api.service';
import { ToastClientService } from 'src/app/services/toast/toast-client.service';
import { UploadZipService } from 'src/app/services/upload-zip/upload-zip.service';

@Component({
  selector: 'app-upload-excel-details',
  templateUrl: './upload-excel-details.component.html',
  styleUrls: ['./upload-excel-details.component.scss']
})
export class UploadExcelDetailsComponent implements OnInit {
  /**
   * @author kailash_dev
   * @param FileUploadWithProgress
   * This this common module for all the components upload big file and while processing(uploading) user can go other componets.
   * For this module api loader disabled in interceptor by setting header skip=true.
   * < Write less & code more />
   */
  minimiseClass:string = '';
  isminimise:boolean = false;
  progress:number = 0;
  @Input() data: any;
  fileSize:string;
  uploadFileSubscribe;
  apiCalled:any = {status:false,text:'Uploading...'};
  uploadDetails:FileList;
  modalRef;
  uploadedStatus:any;
  constructor(private uploadFile:UploadZipService,private modalService: NgbModal,
    private config: ApiConfiguration,private toast: ToastClientService,
    private apiService: ApiService,public fileService:FileService,) { }
  ngOnInit() {
    console.log(this.data);
  }
  minimiseDialogue(){
    if(this.isminimise){
      this.minimiseClass = 'maximiseTheDIv'
    }else{
      this.minimiseClass = 'minimiseTheDIv'
    }
    this.isminimise = !this.isminimise;
    console.log("clling...");
  }
  uploadZipWithExcelFile(files: FileList){
      this.uploadDetails = files;
      this.fileSize = (files[0].size/1024/1024).toFixed(2)+ ' MB';
      console.log((files[0].size/1024/1024).toFixed(2)+ ' MB');
  }
  uploadToServer(files: FileList){
    this.apiCalled.status = true;
    this.uploadFileSubscribe = this.apiService.upload(this.data.url,this.uploadDetails,this.data.data).subscribe(event => {
      if (event.type === HttpEventType.UploadProgress) {
        this.progress = this.fileService.calcProgressPercent(event);
        console.log(this.progress);
      } else if (event instanceof HttpResponse) {
        if(event.body.data){
          this.uploadedStatus = event.body.data;
          this.toast.Success("Record Inserted Successfully !!");
        }
        this.apiCalled.text = "Uploaded";
      }
    },err=>{
      console.log('err', err);
      this.apiCalled.text = "Failed!";
      this.toast.Error("Record Inserted Failed !!");
    });
  }
  public cancelUpload(){
    this.uploadFileSubscribe.unsubscribe();
    this.apiCalled.status = false;
    this.uploadDetails = null;
    this.fileSize = null;
    this.modalRef.dismiss();
    this.uploadFile.changeMessage({status:'close'});
  }
  closePanel(target){
    this.modalRef =this.modalService.open(target, {
      centered: true,
      size: 'sm',
      scrollable: true,
    });
  }
  closeUploadDialogue(target){
    if(this.fileSize&&this.apiCalled.status){
      if(this.apiCalled.text == "Uploaded"){
        this.uploadFile.changeMessage({status:'close'});
      }else{
        this.closePanel(target);
      }
    }else{
      this.uploadFile.changeMessage({status:'close'});
    }
  }
}

upload-zip.service.ts

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject';

@Injectable({
  providedIn: 'root'
})
export class UploadZipService {
  /**
   * @author kailash_dev
   * @param intermediator
   * intermediator to enable event emitor between components for upload zipFile
   * < Write less & code more />
   */
  private messageSource = new BehaviorSubject({status:'Initialized'});
  currentMessage = this.messageSource.asObservable();
  constructor() { }
  changeMessage(message) {
    this.messageSource.next(message)
  }

}