How to reset and alow to upload a the files using ng2-file-upload

Question

I am using ng2-file-upload to upload files. It's working fine for me. I need to handle the error on the server side and reset the file uploader. How can I achieve this? Following are the codes I am using

HTML

        <div class="progress progressbar" style="height:10px;">
          <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': uploader.progress + '%' }"></div>
        </div>
        <button type="button" class="btn btn-warning btn-s button_gray" (click)="uploader.cancelAll()" [disabled]="!uploader.isUploading">
        <span class="glyphicon glyphicon-ban-circle"></span> Cancel
      </button>
        <button type="button" class="btn btn-danger btn-s button_gray" (click)="uploader.clearQueue()" [disabled]="!uploader.queue.length">
        <span class="glyphicon glyphicon-trash"></span> Remove
      </button>
        <button type="button" class="btn btn-primary btn-s" (click)="uploader.authToken=authToken ;uploader.uploadAll()" [disabled]="!uploader.getNotUploadedItems().length">
        <span class="glyphicon glyphicon-upload"></span> Upload
      </button>

Typescript

    ngOnInit() {
        this.uploader.onAfterAddingFile = (file) => {
          file.withCredentials = false;
          if (this.target) this.target.value = '';
        };
        this.uploader.onErrorItem = (item, response, status, headers) => this.onErrorItem(item, response, status, headers);
        this.uploader.onSuccessItem = (item, response, status, headers) => this.onSuccessItem(item, response, status, headers);
      }

  let data = JSON.parse(response); //success server response
    console.log(data)
    this.showSnackBar('Successfully Uploaded file.');
    this.router.navigate(['/result'])
  }

  onErrorItem(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders): any {
    let error;
    if (response != undefined && response.length > 0)
      JSON.parse(response); //error server response
    else
      error = response;

    console.log(error)
    this.showSnackBar('Error on Upload the file.');
  }

Now, if there any failure then I am not able to upload a file again.

Could you please provide the solution? We wouldd be very grateful to you for that. P.S. it's completely okay to answer your own question in stackoverflow. — Just Shadow, Sep 13 '18 at 11:48
@Just Shadow "this.btnFileUpload.nativeElement.value = ' ' " this way i just rest the file uploader. — Libin C Jacob, Sep 17 '18 at 06:37
I solved It By this Code: ```javascript this.uploader.queue.pop(); ``` — Ahmad Khoja, Apr 25 '19 at 22:41

score 2 · Answer 1 · answered Oct 17 '19 at 03:23

i think you solved the problem but still i want to share whole solution for community

1- add this to the component

import { ViewChild, ElementRef } from "@angular/core";

2- Add this declaration to component

@ViewChild("dummyID", { static: false }) 
myInputVariable: ElementRef;

3- in HTML file, give an ID to the particular element(i used #dummyID)

<input #dummyID type="file" ng2FileSelect [uploader]="uploader" />

4- and then, you able to reach the element where you want in component, it's best practice to use it in onWhenAddingFileFailed method of ng2-file-upload

this.uploader.onWhenAddingFileFailed = item => {
//some code
//some code

 this.myInputVariable.nativeElement.value = "";
};

score 0 · Answer 2 · answered Jul 01 '22 at 08:42

0

Just reset/empty the queue.

this.uploader.queue = [];

answered Jul 01 '22 at 08:42

info2ankit

283
3
8

How to reset and alow to upload a the files using ng2-file-upload

2 Answers2