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
<p-fileUpload #fileUpload name="datafiles"
[accept]=FileExtentionValue
[url]="FileUploadUrl"
[showUploadButton]="isUploadEnable"
[disabled]="diableFileupload"
(onUpload)="onUpload($event)"
(onSelect)="validateFile($event)"
multiple="multiple">
</p-fileUpload>
.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
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.
<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
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.
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.,
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.