Progress Bar shows only in first time of consecutive file uploads in angular 6

Question

In my Angular application, I have a separate form to upload profile picture. When I upload a new picture, confirmation modal will appear and after confirming, progress bar will visible in page and it will disappear after 100% completion. Without moving to another routing (still in same page) if I try to upload another picture, process will happen as same as previous except the progress bar. in second time progress bar will not visible. I need to show the progress bar in each file uploading. My codes are given bellow.

.html file

 <div class="col-md-5 col-12 profile-content">
  <form #imageForm enctype="multipart/form-data" novalidate>
    <div class="img-content">
      <div class="avatar-upload">
        <div class="avatar-edit">
          <input (change)="imagesChange($event.target.files)" type='file' id="fileName" name="fileName"
                 accept=".png, .jpg, .jpeg"/>
          <label for="fileName"></label>
        </div>
        <div class="avatar-preview">
          <div id="imagePreview" *ngIf="model.profilePic == null"
               [style.background-image]="defaultBgImageVariable"></div>
          <div *ngIf="model.profilePic" id="imagePreview"
               [ngStyle]="{'background-image':'url(' + model.profilePic + ')'}"></div>
        </div>
      </div>
      <div id="avatar" class="img-upload-progress" *ngIf="isAvatarUploading">
        <div class="progress">
          <div class="progress-bar" id="progressBar"></div>
        </div>
        <p id="uploadText">uploading...</p>
      </div>
    </div>
  </form>
</div>

modal in same .html file

<div class="favorite-noti">
<div id="avatarUploadConfirm" class="modal fade" tabindex="-1" role="dialog" 
 aria-labelledby="favoriteNotification"
   aria-hidden="true">
<div class="modal-dialog modal-confirm">
  <div class="modal-content">
    <div class="modal-body">
      <h4>Do you want to upload profile picture ?.</h4>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn  btn-confirm" (click)="updateAvatar()">Upload</button>
      <button type="button" class="btn btn-info" (click)="cancelModal()">Cancel</button>
    </div>
  </div>
</div>

.ts file

 imagesChange(files) {
 (<any>$('#avatarUploadConfirm')).modal('show');
 this.myAvatar = files;
 }

updateAvatar() {
(<any>$('#avatarUploadConfirm')).modal('hide');
this.handleFileInput(this.myAvatar);
}

cancelModal() {
(<any>$('#avatarUploadConfirm')).modal('hide');
}

handleFileInput(files) {
this.isAvatarUploading = true;
this.fileToUpload = files.item(0);
const formData = new FormData();
console.log('image-height', files.item.naturalHeight);
formData.append('fileName', this.fileToUpload, this.fileToUpload.name);

const user = this.authService.getUserFromLocalStorage();
if (user !== null) {
  const url = `customers/profile-pic/${user.id}`;
  this.restClientService.fileUpload(url, formData).subscribe(
    response => {
      console.log(response);

      const imagePreview: HTMLElement = document.getElementById('imagePreview');
      imagePreview.style.backgroundImage = 'url(\'' + response.message.profilePic + '\')';
      this.model.profilePic = response.message.profilePic;

      const elem = document.getElementById('progressBar');
      const txt = document.getElementById('uploadText');
      var width = 1;
      const id = setInterval(frame, 10);

      function timeoutToMissbar() {
        document.getElementById('avatar').style.display = 'none';
      }

      function frame() {
        if (width >= 100) {
          clearInterval(id);
          txt.innerHTML = 'Done 100%';
          setTimeout(timeoutToMissbar, 2500);
        } else {
          width++;
          elem.style.width = width + '%';
          // elem.innerHTML = width * 1 + '%';
        }
      }

    }
  );
 }
}

I need help to show the progress bar in every file upload.

Bharat Bharat · Accepted Answer · 2019-02-14T10:55:42

You are setting display to none and not setting it to display again. Adding the below code at the start of handleFileInput should fix it.

setTimeout(() => {
  document.getElementById('avatar').style.display = 'initial';
  document.getElementById('uploadText').innerText = 'uploading...';
}, 0);

Better way - You can achieve the hiding and display part using the same variable isAvatarUploading instead of additionally using styles. You need to use Subject for that

public isAvatarUploading$ = new Subject();

handleFileInput() {
   this.isAvatarUploading = true;

   let timeoutToMissbar = () => {
       // document.getElementById('avatar').style.display = 'none';
        this.isAvatarUploading$.next(false);
   }

And in html

*ngIf="isAvatarUploading$ | async"

Progress Bar shows only in first time of consecutive file uploads in angular 6

1 Answers