How to limit the maximum number of files in the primeng FileUpload component?

Discussão em 'Angular' iniciado por joan0627, Setembro 26, 2024.

  1. joan0627

    joan0627 Guest

    I have a PrimeNg FileUpload component and what I want is to limit the maximum amount of files that can be uploaded.

    I tried to do it with the attribute fileLimit but it doesn't work.

    <p-fileUpload id="fileUploader" maxFileSize="{{ pesoMaximoArchivoDocumentacion }}"
    invalidFileSizeMessageDetail="{{ mensajeSuperaPeso }}" fileLimit="4"
    invalidFileTypeMessageDetail="{{ mensajeFormatoNoValido }}" *ngIf="isAttach(element.valor)"
    #fileUploader name="Files{{ i }}" id="{{ element.parametro }}" accept=".pdf" [auto]="true"
    [multiple]="isMultipleDoc(element.valor)" customUpload="true" (onSelect)="onSelect(fileUploader)"
    (uploadHandler)="
    onUploadConst($event, 1, fileUploader, element.valor)
    " chooseLabel="Adjuntar">
    <ng-template let-file pTemplate="file">
    <div class="d-flex p-2 rounded align-items-center text-center flex-column flex-xl-row mb-3" [ngClass]="{
    'btn-background-white': i % 2 == 0,
    'btn-background-gray': i % 2 != 0
    }">
    <div class="ccb-cae-imagen-img-delete mr-xl-1"
    style="background-size: 30px; background-position: center">
    images
    </div>
    <span class="txt-name-file p-xl-2 text-wrap text-break mb-2 mb-xl-0 text-xl-left">{{ file.name
    }}</span>
    <button class="btn-delete w-auto h-auto" (click)="
    removeFileConst(file, fileUploader, 1, element.valor)
    ">
    <em class="fa fa-trash-o icon-btn-delete"></em>
    </button>
    </div>
    </ng-template>
    <ng-container *ngIf="element.valor == documentoReformas">
    <ng-template pTemplate="content">
    <div class="text-center" id="btn-add-container" hidden>
    <button mat-icon-button type="button" (click)="add()" *ngIf="this.listDocsAux[2].archivos < 4">
    <mat-icon class="btn-add-doc">add_circle</mat-icon>
    </button>
    </div>
    </ng-template>
    </ng-container>
    </p-fileUpload>

    Continue reading...

Compartilhe esta Página