如何在prime-p-fileUpload中從fileupload中刪除無效或特定文件？

Question

我使用文件上傳來上傳文件，我想在選擇其中一個文件時驗證文件，如果不是有效文件則刪除它。

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: '' });
      }

驗證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++;
      }
    }
  }

Answer 1

我已經使用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

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++;
          }
        }
      }

Answer 2

onSelect Event - 選擇文件時調用的回調。

官方文件

例：

    <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.
    }

希望這可以幫助。，