[英]How remove invalid or specific files from fileupload in prime ng p-fileUpload?
I have used file upload for uploading files and I want to validate the files when I select one of them and remove it if that is not a valid file. 我使用文件上传来上传文件,我想在选择其中一个文件时验证文件,如果不是有效文件则删除它。
.html html的
<p-fileUpload #fileUpload name="datafiles"
[accept]=FileExtentionValue
[url]="FileUploadUrl"
[showUploadButton]="isUploadEnable"
[disabled]="diableFileupload"
(onUpload)="onUpload($event)"
(onSelect)="validateFile($event)"
multiple="multiple">
</p-fileUpload>
.ts .TS
onUpload(event) {
for (let file of event.files) {
this.uploadedFiles.push(file);
}
this.messageService.add({ severity: 'info', summary: 'File Uploaded', detail: '' });
}
validate filles name 验证filles名称
validateFile(event) {
let tempFiles: any = [];
var FileNmaeMust: any;
for (let file of event.files) {
tempFiles.push(file.name);
}
for (let i = 0; i < tempFiles.length; i++) {
let count = 1;
for (let j = 0; j < this.ClientDataFileTypeValue.length; j++) {
FileNmaeMust = "";
if (this.ClientDataFileTypeValue[j] == "Order") {
FileNmaeMust = this.MPID + "_ORDER_";
}
/*** Validate File */
var templen = FileNmaeMust + "YYYYMMDD.psv";
if (tempFiles[i].includes((FileNmaeMust).toLocaleUpperCase()) && tempFiles[i].length == templen.length) {
this.isUploadEnable = true;
break;
}
if (count == this.ClientDataFileTypeValue.length) {
this.isUploadEnable = false;
this.messageService.add({ severity: 'error', summary: 'Files', detail: 'Please select correct file ' + tempFiles[i] });
}
count++;
}
}
}
I haved soved it using id .I have defined #fileUpload and pass it to (onSelect)="validateFile($event,fileUpload)" function to validate and remove this file from array. 我已经使用id来推断它。我定义了#fileUpload并将其传递给(onSelect)=“validateFile($ event,fileUpload)”函数以验证并从数组中删除此文件。
<p-fileUpload #fileUpload name="datafiles"
[accept]=FileExtentionValu
[url]="FileUploadUrl"
[disabled]="isDiableFileupload"
[showUploadButton]="isUploadEnable"
(onSelect)="validateFile($event,fileUpload)" (onBeforeUpload)="onBeforeSend($event)"
(onUpload)="onUpload($event)"
multiple="multiple">
</p-fileUpload>
.ts .TS
import {FileUpload } from 'primeng/primeng';
validateFile(event, uploader: FileUpload) {
let tempFiles: any = [];
var FileNmaeMust: any;
for (let file of event.files) {
tempFiles.push(file.name);
}
for (let i = 0; i < tempFiles.length; i++) {
let count = 1;
for (let j = 0; j < this.ClientDataFileTypeValue.length; j++) {
FileNmaeMust = "";
if (this.ClientDataFileTypeValue[j] == "Order") {
FileNmaeMust = this.MPID + "_ORDER_";
}
/*** Validate File */
var templen = FileNmaeMust + "YYYYMMDD.psv";
if (tempFiles[i].includes((FileNmaeMust).toLocaleUpperCase()) && tempFiles[i].length == templen.length) {
this.isUploadEnable = true;
break;
}
if (count == this.ClientDataFileTypeValue.length) {
this.isUploadEnable = false;
uploader.remove(event, i);
this.isUploadEnable = true;
this.messageService.add({ severity: 'error', summary: 'Files', detail: 'Please select correct file ' + tempFiles[i] });
}
count++;
}
}
}
onSelect
Event - Callback to invoke when files are selected. onSelect
Event - 选择文件时调用的回调。
Example: 例:
<p-fileUpload #fileUpload name="datafiles"
[accept]=FileExtentionValue
[url]="FileUploadUrl"
[showUploadButton]="isUploadEnable"
(onUpload)="onUpload($event)" multiple="multiple"
(onSelect)="onSelect($event)">
</p-fileUpload>
onUpload(event) {
for (let file of event.files) {
this.uploadedFiles.push(file);
}
this.messageService.add({ severity: 'info', summary: 'File Uploaded', detail: '' });
}
onSelect(event) {
// event.originalEvent: Original browser event.
// event.files: List of selected files.
// Your validation code against list of selected files / selected file.
}
Hope this helps., 希望这可以帮助。,
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.