[英]How to reset and alow to upload a the files using ng2-file-upload
I am using ng2-file-upload to upload files.我正在使用 ng2-file-upload 上传文件。 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 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 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.现在,如果出现任何故障,我将无法再次上传文件。
i think you solved the problem but still i want to share whole solution for community我认为您解决了问题,但我仍然想为社区分享整个解决方案
1- add this to the component 1-将此添加到组件中
import { ViewChild, ElementRef } from "@angular/core";
2- Add this declaration to component 2-将此声明添加到组件
@ViewChild("dummyID", { static: false })
myInputVariable: ElementRef;
3- in HTML file, give an ID to the particular element(i used #dummyID) 3- 在 HTML 文件中,为特定元素提供一个 ID(我使用了#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 4-然后,您可以在组件中到达您想要的元素,最好在 ng2-file-upload 的onWhenAddingFileFailed方法中使用它
this.uploader.onWhenAddingFileFailed = item => {
//some code
//some code
this.myInputVariable.nativeElement.value = "";
};
Just reset/empty the queue.只需重置/清空队列。
this.uploader.queue = [];
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.