ng2-file-uploader requires browser refresh Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of ng2-file-uploader requires browser refresh without wasting too much if your time.

The question is published on by Tutorial Guruji team.

I’m using ng2-file-upload in my Angular 10 project for uploading user photo. The uploading process just goes well. The only problem is that I have to refresh the browser to display the newly uploaded photo. However, I would expect any newly uploaded photo immediately showing up in the photo list other than the user having to take extra step by refreshing the browser in order to have the newly added photo displayed.

Here is my component.ts

ngOnInit(): void {
    this.initializeUploader();
    this.loadStoreUserPhotos();
  }

  fileOverBase(e: any) {
    this.hasBaseDropzoneOver = e;  // here e for event
  }      

  uploadFile(file: File) {
    this.memberService.uploadImage(file).subscribe((event: HttpEvent<any>) => {
      switch (event.type) {
        case HttpEventType.UploadProgress:
          this.progress = Math.round(event.loaded / event.total * 100);
          break;
        case HttpEventType.Response:          
          setTimeout(() => {
            this.progress = 0;
            this.addPhotoMode = false;
          }, 1500);
      }
    });        
  }
  
  loadStoreUserPhotos() {
    this.accountService.getStoreUserPhotos(this.member.userId).subscribe((response: IPhoto[]) => {     
      this.photos = response;
    })
  }      

  initializeUploader() {
    this.uploader = new FileUploader({
      url: this.baseUrl + 'users/add-photo',
      authToken: 'Bearer ' + this.user.token,
      isHTML5: true,
      allowedFileType: ['image'],
      removeAfterUpload: true,
      autoUpload: false,
      maxFileSize: 10 * 1024 * 1024
    });
    
    this.uploader.onAfterAddingFile = (file) => {
      file.withCredentials = false;
    }    

    this.uploader.onSuccessItem = (item, response, status, headers) => {      
      if (response) {
        const photo: IPhoto = JSON.parse(response);        
        this.photos.push(photo);
        this.user.photoUrl = photo.photoUrl;            
      }
      *this.loadStoreUserPhotos();*
    }
  }

in the initializeUpload method, I supposed to add this.loadStoreUserPhotos() to the end to reload all photos after uploading, including whatever newly successfully uploaded. However, this line does no help at all. User still needs do the extra step – refreshing browser.

My html is sth simplified as below

<div class="col-2"  *ngFor="let photo of photos">
        <img src="{{photo.photoUrl}}" alt="{{user.username}}" class="img-thumbnail" 
</div>

Can any one please help me out! Thanks a lot in advance!

Answer

As Aluan pointed out that loadStoreUserPhotos() was actually not executed. My solution is to add setTimeout(() => window.location.reload(), 2000) to the end of uploadFile(). As a matter of fact, the solution is just simply to refresh the current page. Setting delay time is to allow user to catch whatever screen warning or notification message.

We are here to answer your question about ng2-file-uploader requires browser refresh - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji