primeng 19.1.2 → 20.0.0-beta.1

package/fesm2022/primeng-fileupload.mjs

@@ -1,106 +1,20 @@
 import * as i1 from '@angular/common';
-import { isPlatformBrowser, CommonModule } from '@angular/common';
+import { CommonModule, isPlatformBrowser } from '@angular/common';
 import { HttpClient, HttpEventType } from '@angular/common/http';
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, inject, NgZone, numberAttribute, booleanAttribute, ContentChildren, Input, ViewChild, ContentChild, Output, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { Injectable, inject, output, input, ChangeDetectionStrategy, Component, EventEmitter, NgZone, numberAttribute, booleanAttribute, ContentChildren, Input, ViewChild, ContentChild, Output, ViewEncapsulation, NgModule } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { addClass, removeClass } from '@primeuix/utils';
 import { TranslationKeys, SharedModule, PrimeTemplate } from 'primeng/api';
+import { Badge } from 'primeng/badge';
 import { BaseComponent } from 'primeng/basecomponent';
 import { Button } from 'primeng/button';
-import { PlusIcon, UploadIcon, TimesIcon } from 'primeng/icons';
+import { TimesIcon, PlusIcon, UploadIcon } from 'primeng/icons';
 import { Message } from 'primeng/message';
 import { ProgressBar } from 'primeng/progressbar';
+import { style } from '@primeuix/styles/fileupload';
 import { BaseStyle } from 'primeng/base';
 
-const theme = ({ dt }) => `
-.p-fileupload input[type="file"] {
-    display: none;
-}
-
-.p-fileupload-advanced {
-    border: 1px solid ${dt('fileupload.border.color')};
-    border-radius: ${dt('fileupload.border.radius')};
-    background: ${dt('fileupload.background')};
-    color: ${dt('fileupload.color')};
-}
-
-.p-fileupload-header {
-    display: flex;
-    align-items: center;
-    padding: ${dt('fileupload.header.padding')};
-    background: ${dt('fileupload.header.background')};
-    color: ${dt('fileupload.header.color')};
-    border-style: solid;
-    border-width: ${dt('fileupload.header.border.width')};
-    border-color: ${dt('fileupload.header.border.color')};
-    border-radius: ${dt('fileupload.header.border.radius')};
-    gap: ${dt('fileupload.header.gap')};
-}
-
-.p-fileupload-content {
-    border: 1px solid transparent;
-    display: flex;
-    flex-direction: column;
-    gap: ${dt('fileupload.content.gap')};
-    transition: border-color ${dt('fileupload.transition.duration')};
-    padding: ${dt('fileupload.content.padding')};
-}
-
-.p-fileupload-content .p-progressbar {
-    width: 100%;
-    height: ${dt('fileupload.progressbar.height')};
-}
-
-.p-fileupload-file-list {
-    display: flex;
-    flex-direction: column;
-    gap: ${dt('fileupload.filelist.gap')};
-}
-
-.p-fileupload-file {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    padding: ${dt('fileupload.file.padding')};
-    border-bottom: 1px solid ${dt('fileupload.file.border.color')};
-    gap: ${dt('fileupload.file.gap')};
-}
-
-.p-fileupload-file:last-child {
-    border-bottom: 0;
-}
-
-.p-fileupload-file-info {
-    display: flex;
-    flex-direction: column;
-    gap: ${dt('fileupload.file.info.gap')};
-}
-
-.p-fileupload-file-thumbnail {
-    flex-shrink: 0;
-}
-
-.p-fileupload-file-actions {
-    margin-left: auto;
-}
-
-.p-fileupload-highlight {
-    border: 1px dashed ${dt('fileupload.content.highlight.border.color')};
-}
-
-.p-fileupload-advanced .p-message {
-    margin-top: 0;
-}
-
-.p-fileupload-basic {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: center;
-    gap: ${dt('fileupload.basic.gap')};
-}
-`;
 const classes = {
     root: ({ instance }) => `p-fileupload p-fileupload-${instance.mode} p-component`,
     header: 'p-fileupload-header',
@@ -116,16 +30,17 @@ const classes = {
     fileSize: 'p-fileupload-file-size',
     pcFileBadge: 'p-fileupload-file-badge',
     fileActions: 'p-fileupload-file-actions',
-    pcFileRemoveButton: 'p-fileupload-file-remove-button'
+    pcFileRemoveButton: 'p-fileupload-file-remove-button',
+    basicContent: 'p-fileupload-basic-content'
 };
 class FileUploadStyle extends BaseStyle {
     name = 'fileupload';
-    theme = theme;
+    theme = style;
     classes = classes;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: FileUploadStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: FileUploadStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: FileUploadStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: FileUploadStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: FileUploadStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: FileUploadStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -199,8 +114,88 @@ var FileUploadClasses;
      * Class name of the file remove button element
      */
     FileUploadClasses["pcFileRemoveButton"] = "p-fileupload-file-remove-button";
+    /**
+     * Class name of the content in basic mode
+     */
+    FileUploadClasses["basicContent"] = "p-fileupload-basic-content";
 })(FileUploadClasses || (FileUploadClasses = {}));
 
+class FileContent extends BaseComponent {
+    _componentStyle = inject(FileUploadStyle);
+    onRemove = output();
+    files = input();
+    badgeSeverity = input('warn');
+    badgeValue = input();
+    previewWidth = input(50);
+    fileRemoveIconTemplate = input();
+    onRemoveClick(event, index) {
+        this.onRemove.emit({ event, index });
+    }
+    formatSize(bytes) {
+        const k = 1024;
+        const dm = 3;
+        const sizes = this.config.getTranslation(TranslationKeys.FILE_SIZE_TYPES);
+        if (bytes === 0) {
+            return `0 ${sizes[0]}`;
+        }
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        const formattedSize = (bytes / Math.pow(k, i)).toFixed(dm);
+        return `${formattedSize} ${sizes[i]}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: FileContent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: FileContent, isStandalone: true, selector: "[pFileContent]", inputs: { files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: false, transformFunction: null }, badgeSeverity: { classPropertyName: "badgeSeverity", publicName: "badgeSeverity", isSignal: true, isRequired: false, transformFunction: null }, badgeValue: { classPropertyName: "badgeValue", publicName: "badgeValue", isSignal: true, isRequired: false, transformFunction: null }, previewWidth: { classPropertyName: "previewWidth", publicName: "previewWidth", isSignal: true, isRequired: false, transformFunction: null }, fileRemoveIconTemplate: { classPropertyName: "fileRemoveIconTemplate", publicName: "fileRemoveIconTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onRemove: "onRemove" }, providers: [FileUploadStyle], usesInheritance: true, ngImport: i0, template: `@for (file of files(); track file?.name; let index = $index) {
+        <div [class]="cx('file')">
+            <img role="presentation" [class]="cx('fileThumbnail')" [attr.alt]="file.name" [src]="file.objectURL" [width]="previewWidth()" />
+            <div [class]="cx('fileInfo')">
+                <div [class]="cx('fileName')">{{ file.name }}</div>
+                <span [class]="cx('fileSize')">{{ formatSize(file.size) }}</span>
+            </div>
+            <p-badge [value]="badgeValue()" [severity]="badgeSeverity()" [class]="cx('pcFileBadge')" />
+            <div [class]="cx('fileActions')">
+                <p-button (onClick)="onRemoveClick($event, index)" [styleClass]="cx('pcFileRemoveButton')" text rounded severity="danger">
+                    <ng-template #icon let-iconClass="class">
+                        @if (fileRemoveIconTemplate()) {
+                            <ng-template *ngTemplateOutlet="fileRemoveIconTemplate(); context: { class: iconClass, file: file, index: index }"></ng-template>
+                        } @else {
+                            <TimesIcon [styleClass]="iconClass" [attr.aria-hidden]="true" />
+                        }
+                    </ng-template>
+                </p-button>
+            </div>
+        </div>
+    }`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Badge, selector: "p-badge", inputs: ["styleClass", "badgeSize", "size", "severity", "value", "badgeDisabled"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: TimesIcon, selector: "TimesIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: FileContent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[pFileContent]',
+                    standalone: true,
+                    template: `@for (file of files(); track file?.name; let index = $index) {
+        <div [class]="cx('file')">
+            <img role="presentation" [class]="cx('fileThumbnail')" [attr.alt]="file.name" [src]="file.objectURL" [width]="previewWidth()" />
+            <div [class]="cx('fileInfo')">
+                <div [class]="cx('fileName')">{{ file.name }}</div>
+                <span [class]="cx('fileSize')">{{ formatSize(file.size) }}</span>
+            </div>
+            <p-badge [value]="badgeValue()" [severity]="badgeSeverity()" [class]="cx('pcFileBadge')" />
+            <div [class]="cx('fileActions')">
+                <p-button (onClick)="onRemoveClick($event, index)" [styleClass]="cx('pcFileRemoveButton')" text rounded severity="danger">
+                    <ng-template #icon let-iconClass="class">
+                        @if (fileRemoveIconTemplate()) {
+                            <ng-template *ngTemplateOutlet="fileRemoveIconTemplate(); context: { class: iconClass, file: file, index: index }"></ng-template>
+                        } @else {
+                            <TimesIcon [styleClass]="iconClass" [attr.aria-hidden]="true" />
+                        }
+                    </ng-template>
+                </p-button>
+            </div>
+        </div>
+    }`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [FileUploadStyle],
+                    imports: [CommonModule, Badge, Button, TimesIcon]
+                }]
+        }] });
 /**
  * FileUpload is an advanced uploader with dragdrop support, multi file uploads, auto uploading, progress tracking and validations.
  * @group Components
@@ -615,6 +610,9 @@ class FileUpload extends BaseComponent {
         }
         return this.config.getTranslation('noFileChosenMessage') || '';
     }
+    completedLabel() {
+        return this.config.getTranslation('completed') || '';
+    }
     getTranslation(option) {
         return this.config.getTranslation(option);
     }
@@ -783,6 +781,18 @@ class FileUpload extends BaseComponent {
             });
         }
     }
+    onRemoveClick(e) {
+        const { event, index } = e;
+        if (this.hasFiles()) {
+            this.remove(event, index);
+        }
+    }
+    onRemoveUploadedFileClick(e) {
+        const { event, index } = e;
+        if (this.hasUploadedFiles()) {
+            this.removeUploadedFile(index);
+        }
+    }
     /**
      * Clears the files list.
      * @group Method
@@ -964,9 +974,9 @@ class FileUpload extends BaseComponent {
         }
         super.ngOnDestroy();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: FileUpload, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: FileUpload, isStandalone: true, selector: "p-fileupload, p-fileUpload", inputs: { name: "name", url: "url", method: "method", multiple: ["multiple", "multiple", booleanAttribute], accept: "accept", disabled: ["disabled", "disabled", booleanAttribute], auto: ["auto", "auto", booleanAttribute], withCredentials: ["withCredentials", "withCredentials", booleanAttribute], maxFileSize: ["maxFileSize", "maxFileSize", numberAttribute], invalidFileSizeMessageSummary: "invalidFileSizeMessageSummary", invalidFileSizeMessageDetail: "invalidFileSizeMessageDetail", invalidFileTypeMessageSummary: "invalidFileTypeMessageSummary", invalidFileTypeMessageDetail: "invalidFileTypeMessageDetail", invalidFileLimitMessageDetail: "invalidFileLimitMessageDetail", invalidFileLimitMessageSummary: "invalidFileLimitMessageSummary", style: "style", styleClass: "styleClass", previewWidth: ["previewWidth", "previewWidth", numberAttribute], chooseLabel: "chooseLabel", uploadLabel: "uploadLabel", cancelLabel: "cancelLabel", chooseIcon: "chooseIcon", uploadIcon: "uploadIcon", cancelIcon: "cancelIcon", showUploadButton: ["showUploadButton", "showUploadButton", booleanAttribute], showCancelButton: ["showCancelButton", "showCancelButton", booleanAttribute], mode: "mode", headers: "headers", customUpload: ["customUpload", "customUpload", booleanAttribute], fileLimit: ["fileLimit", "fileLimit", (value) => numberAttribute(value, null)], uploadStyleClass: "uploadStyleClass", cancelStyleClass: "cancelStyleClass", removeStyleClass: "removeStyleClass", chooseStyleClass: "chooseStyleClass", chooseButtonProps: "chooseButtonProps", uploadButtonProps: "uploadButtonProps", cancelButtonProps: "cancelButtonProps", files: "files" }, outputs: { onBeforeUpload: "onBeforeUpload", onSend: "onSend", onUpload: "onUpload", onError: "onError", onClear: "onClear", onRemove: "onRemove", onSelect: "onSelect", onProgress: "onProgress", uploadHandler: "uploadHandler", onImageError: "onImageError", onRemoveUploadedFile: "onRemoveUploadedFile" }, providers: [FileUploadStyle], queries: [{ propertyName: "fileTemplate", first: true, predicate: ["file"] }, { propertyName: "headerTemplate", first: true, predicate: ["header"] }, { propertyName: "contentTemplate", first: true, predicate: ["content"] }, { propertyName: "toolbarTemplate", first: true, predicate: ["toolbar"] }, { propertyName: "chooseIconTemplate", first: true, predicate: ["chooseicon"] }, { propertyName: "fileLabelTemplate", first: true, predicate: ["filelabel"] }, { propertyName: "uploadIconTemplate", first: true, predicate: ["uploadicon"] }, { propertyName: "cancelIconTemplate", first: true, predicate: ["cancelicon"] }, { propertyName: "emptyTemplate", first: true, predicate: ["empty"] }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "advancedFileInput", first: true, predicate: ["advancedfileinput"], descendants: true }, { propertyName: "basicFileInput", first: true, predicate: ["basicfileinput"], descendants: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
-        <div [ngClass]="'p-fileupload p-fileupload-advanced p-component'" [ngStyle]="style" [class]="styleClass" *ngIf="mode === 'advanced'" [attr.data-pc-name]="'fileupload'" [attr.data-pc-section]="'root'">
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: FileUpload, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: FileUpload, isStandalone: true, selector: "p-fileupload, p-fileUpload", inputs: { name: "name", url: "url", method: "method", multiple: ["multiple", "multiple", booleanAttribute], accept: "accept", disabled: ["disabled", "disabled", booleanAttribute], auto: ["auto", "auto", booleanAttribute], withCredentials: ["withCredentials", "withCredentials", booleanAttribute], maxFileSize: ["maxFileSize", "maxFileSize", numberAttribute], invalidFileSizeMessageSummary: "invalidFileSizeMessageSummary", invalidFileSizeMessageDetail: "invalidFileSizeMessageDetail", invalidFileTypeMessageSummary: "invalidFileTypeMessageSummary", invalidFileTypeMessageDetail: "invalidFileTypeMessageDetail", invalidFileLimitMessageDetail: "invalidFileLimitMessageDetail", invalidFileLimitMessageSummary: "invalidFileLimitMessageSummary", style: "style", styleClass: "styleClass", previewWidth: ["previewWidth", "previewWidth", numberAttribute], chooseLabel: "chooseLabel", uploadLabel: "uploadLabel", cancelLabel: "cancelLabel", chooseIcon: "chooseIcon", uploadIcon: "uploadIcon", cancelIcon: "cancelIcon", showUploadButton: ["showUploadButton", "showUploadButton", booleanAttribute], showCancelButton: ["showCancelButton", "showCancelButton", booleanAttribute], mode: "mode", headers: "headers", customUpload: ["customUpload", "customUpload", booleanAttribute], fileLimit: ["fileLimit", "fileLimit", (value) => numberAttribute(value, null)], uploadStyleClass: "uploadStyleClass", cancelStyleClass: "cancelStyleClass", removeStyleClass: "removeStyleClass", chooseStyleClass: "chooseStyleClass", chooseButtonProps: "chooseButtonProps", uploadButtonProps: "uploadButtonProps", cancelButtonProps: "cancelButtonProps", files: "files" }, outputs: { onBeforeUpload: "onBeforeUpload", onSend: "onSend", onUpload: "onUpload", onError: "onError", onClear: "onClear", onRemove: "onRemove", onSelect: "onSelect", onProgress: "onProgress", uploadHandler: "uploadHandler", onImageError: "onImageError", onRemoveUploadedFile: "onRemoveUploadedFile" }, providers: [FileUploadStyle], queries: [{ propertyName: "fileTemplate", first: true, predicate: ["file"] }, { propertyName: "headerTemplate", first: true, predicate: ["header"] }, { propertyName: "contentTemplate", first: true, predicate: ["content"] }, { propertyName: "toolbarTemplate", first: true, predicate: ["toolbar"] }, { propertyName: "chooseIconTemplate", first: true, predicate: ["chooseicon"] }, { propertyName: "fileLabelTemplate", first: true, predicate: ["filelabel"] }, { propertyName: "uploadIconTemplate", first: true, predicate: ["uploadicon"] }, { propertyName: "cancelIconTemplate", first: true, predicate: ["cancelicon"] }, { propertyName: "emptyTemplate", first: true, predicate: ["empty"] }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "advancedFileInput", first: true, predicate: ["advancedfileinput"], descendants: true }, { propertyName: "basicFileInput", first: true, predicate: ["basicfileinput"], descendants: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
+        <div [class]="cn(cx('root'), styleClass)" [ngStyle]="style" *ngIf="mode === 'advanced'" [attr.data-pc-name]="'fileupload'" [attr.data-pc-section]="'root'">
             <input
                 [attr.aria-label]="browseFilesLabel"
                 #advancedfileinput
@@ -979,10 +989,10 @@ class FileUpload extends BaseComponent {
                 [attr.data-pc-section]="'input'"
                 [style.display]="'none'"
             />
-            <div class="p-fileupload-header">
+            <div [class]="cx('header')">
                 <ng-container *ngIf="!headerTemplate && !_headerTemplate">
                     <p-button
-                        [styleClass]="'p-fileupload-choose-button ' + chooseStyleClass"
+                        [styleClass]="cn(cx('pcChooseButton'), chooseStyleClass)"
                         [disabled]="disabled || isChooseDisabled()"
                         (focus)="onFocus()"
                         [label]="chooseButtonLabel"
@@ -1017,7 +1027,7 @@ class FileUpload extends BaseComponent {
                         [label]="uploadButtonLabel"
                         (onClick)="upload()"
                         [disabled]="!hasFiles() || isFileLimitExceeded()"
-                        [styleClass]="'p-fileupload-upload-button ' + uploadStyleClass"
+                        [styleClass]="cn(cx('pcUploadButton'), uploadStyleClass)"
                         [buttonProps]="uploadButtonProps"
                     >
                         <span *ngIf="uploadIcon" [ngClass]="uploadIcon" [attr.aria-hidden]="true"></span>
@@ -1028,7 +1038,7 @@ class FileUpload extends BaseComponent {
                             </span>
                         </ng-container>
                     </p-button>
-                    <p-button *ngIf="!auto && showCancelButton" [label]="cancelButtonLabel" (onClick)="clear()" [disabled]="!hasFiles() || uploading" [styleClass]="'p-fileupload-cancel-button ' + cancelStyleClass" [buttonProps]="cancelButtonProps">
+                    <p-button *ngIf="!auto && showCancelButton" [label]="cancelButtonLabel" (onClick)="clear()" [disabled]="!hasFiles() || uploading" [styleClass]="cn(cx('pcCancelButton'), cancelStyleClass)" [buttonProps]="cancelButtonProps">
                         <span *ngIf="cancelIcon" [ngClass]="cancelIcon"></span>
                         <ng-container *ngIf="!cancelIcon">
                             <TimesIcon *ngIf="!cancelIconTemplate && !_cancelIconTemplate" [attr.aria-hidden]="true" />
@@ -1052,118 +1062,125 @@ class FileUpload extends BaseComponent {
                 ></ng-container>
                 <ng-container *ngTemplateOutlet="toolbarTemplate || _toolbarTemplate"></ng-container>
             </div>
-            <div #content class="p-fileupload-content" (dragenter)="onDragEnter($event)" (dragleave)="onDragLeave($event)" (drop)="onDrop($event)" [attr.data-pc-section]="'content'">
-                <p-progressbar [value]="progress" [showValue]="false" *ngIf="hasFiles()"></p-progressbar>
-                @for (message of msgs; track message) {
-                    <p-message [severity]="message.severity" [text]="message.text"></p-message>
-                }
+            <div #content [class]="cx('content')" (dragenter)="onDragEnter($event)" (dragleave)="onDragLeave($event)" (drop)="onDrop($event)" [attr.data-pc-section]="'content'">
+                @if (contentTemplate || _contentTemplate) {
+                    <ng-container
+                        *ngTemplateOutlet="
+                            contentTemplate || _contentTemplate;
+                            context: {
+                                $implicit: files,
+                                uploadedFiles: uploadedFiles,
+                                chooseCallback: choose.bind(this),
+                                clearCallback: clear.bind(this),
+                                removeUploadedFileCallback: removeUploadedFile.bind(this),
+                                removeFileCallback: remove.bind(this),
+                                progress: progress,
+                                messages: msgs
+                            }
+                        "
+                    ></ng-container>
+                } @else {
+                    <p-progressbar [value]="progress" [showValue]="false" *ngIf="hasFiles()"></p-progressbar>
+                    @for (message of msgs; track message) {
+                        <p-message [severity]="message.severity" [text]="message.text"></p-message>
+                    }
 
-                <div class="p-fileupload-file-list" *ngIf="hasFiles()">
-                    @if (!fileTemplate && !_fileTemplate) {
-                        <div class="p-fileupload-file" *ngFor="let file of files; let i = index">
-                            <img [src]="file.objectURL" *ngIf="isImage(file)" [width]="previewWidth" (error)="imageError($event)" class="p-fileupload-file-thumbnail" />
-                            <div class="p-fileupload-file-info">
-                                <div class="p-fileupload-file-name">{{ file.name }}</div>
-                                <span class="p-fileupload-file-size">{{ formatSize(file.size) }}</span>
-                            </div>
-                            <div class="p-fileupload-file-actions">
-                                <p-button (onClick)="remove($event, i)" [disabled]="uploading" text rounded severity="danger" [styleClass]="'p-fileupload-file-remove-button ' + removeStyleClass">
-                                    <ng-template #icon>
-                                        <TimesIcon *ngIf="!cancelIconTemplate && !_cancelIconTemplate" />
-                                        <ng-template *ngTemplateOutlet="cancelIconTemplate || _cancelIconTemplate"></ng-template>
-                                    </ng-template>
-                                </p-button>
-                            </div>
+                    @if (hasFiles()) {
+                        <div [class]="cx('fileList')">
+                            <ng-template ngFor [ngForOf]="files" [ngForTemplate]="fileTemplate || _fileTemplate"></ng-template>
+                            @if (!fileTemplate && !_fileTemplate) {
+                                <div pFileContent [files]="files" (onRemove)="onRemoveClick($event)" [badgeValue]="pendingLabel" [previewWidth]="previewWidth" [fileRemoveIconTemplate]="cancelIconTemplate || _cancelIconTemplate"></div>
+                            }
                         </div>
                     }
-                    @if (fileTemplate || _fileTemplate) {
-                        <ng-template ngFor [ngForOf]="files" [ngForTemplate]="fileTemplate || _fileTemplate"></ng-template>
+                    @if (hasUploadedFiles()) {
+                        <div [class]="cx('fileList')">
+                            <ng-template ngFor [ngForOf]="uploadedFiles" [ngForTemplate]="fileTemplate || _fileTemplate"></ng-template>
+                            @if (!fileTemplate && !_fileTemplate) {
+                                <div
+                                    pFileContent
+                                    [files]="uploadedFiles"
+                                    (onRemove)="onRemoveUploadedFileClick($event)"
+                                    [badgeValue]="completedLabel()"
+                                    badgeSeverity="success"
+                                    [previewWidth]="previewWidth"
+                                    [fileRemoveIconTemplate]="cancelIconTemplate || _cancelIconTemplate"
+                                ></div>
+                            }
+                        </div>
                     }
-                </div>
-                <ng-container
-                    *ngTemplateOutlet="
-                        contentTemplate || _contentTemplate;
-                        context: {
-                            $implicit: files,
-                            uploadedFiles: uploadedFiles,
-                            chooseCallback: choose.bind(this),
-                            clearCallback: clear.bind(this),
-                            removeUploadedFileCallback: removeUploadedFile.bind(this),
-                            removeFileCallback: remove.bind(this),
-                            progress: progress,
-                            messages: msgs
-                        }
-                    "
-                ></ng-container>
+                }
                 @if ((emptyTemplate || _emptyTemplate) && !hasFiles() && !hasUploadedFiles()) {
                     <ng-container *ngTemplateOutlet="emptyTemplate || _emptyTemplate"></ng-container>
                 }
             </div>
         </div>
-        <div [ngClass]="'p-fileupload p-fileupload-basic p-component'" [class]="styleClass" *ngIf="mode === 'basic'" [attr.data-pc-name]="'fileupload'">
+        <div [class]="cn(cx('root'), styleClass)" *ngIf="mode === 'basic'" [attr.data-pc-name]="'fileupload'">
             @for (message of msgs; track message) {
                 <p-message [severity]="message.severity" [text]="message.text"></p-message>
             }
 
-            <p-button
-                [styleClass]="'p-fileupload-choose-button ' + chooseStyleClass"
-                [disabled]="disabled"
-                [label]="chooseButtonLabel"
-                [style]="style"
-                (onClick)="onBasicUploaderClick()"
-                (keydown)="onBasicKeydown($event)"
-                [buttonProps]="chooseButtonProps"
-            >
-                <ng-template #icon>
-                    @if (hasFiles() && !auto) {
-                        <span *ngIf="uploadIcon" class="p-button-icon p-button-icon-left" [ngClass]="uploadIcon"></span>
-                        <ng-container *ngIf="!uploadIcon">
-                            <UploadIcon *ngIf="!uploadIconTemplate && !_uploadIconTemplate" [styleClass]="'p-button-icon p-button-icon-left'" />
-                            <span *ngIf="_uploadIconTemplate || uploadIconTemplate" class="p-button-icon p-button-icon-left">
-                                <ng-template *ngTemplateOutlet="_uploadIconTemplate || uploadIconTemplate"></ng-template>
-                            </span>
-                        </ng-container>
+            <div [class]="cx('basicContent')">
+                <p-button
+                    [styleClass]="cn(cx('pcChooseButton'), chooseStyleClass)"
+                    [disabled]="disabled"
+                    [label]="chooseButtonLabel"
+                    [style]="style"
+                    (onClick)="onBasicUploaderClick()"
+                    (keydown)="onBasicKeydown($event)"
+                    [buttonProps]="chooseButtonProps"
+                >
+                    <ng-template #icon>
+                        @if (hasFiles() && !auto) {
+                            <span *ngIf="uploadIcon" class="p-button-icon p-button-icon-left" [ngClass]="uploadIcon"></span>
+                            <ng-container *ngIf="!uploadIcon">
+                                <UploadIcon *ngIf="!uploadIconTemplate && !_uploadIconTemplate" [styleClass]="'p-button-icon p-button-icon-left'" />
+                                <span *ngIf="_uploadIconTemplate || uploadIconTemplate" class="p-button-icon p-button-icon-left">
+                                    <ng-template *ngTemplateOutlet="_uploadIconTemplate || uploadIconTemplate"></ng-template>
+                                </span>
+                            </ng-container>
+                        } @else {
+                            <span *ngIf="chooseIcon" class="p-button-icon p-button-icon-left pi" [ngClass]="chooseIcon"></span>
+                            <ng-container *ngIf="!chooseIcon">
+                                <PlusIcon *ngIf="!chooseIconTemplate && !_chooseIconTemplate" [attr.data-pc-section]="'uploadicon'" />
+                                <ng-template *ngTemplateOutlet="chooseIconTemplate || _chooseIconTemplate"></ng-template>
+                            </ng-container>
+                        }
+                    </ng-template>
+                    <input
+                        [attr.aria-label]="browseFilesLabel"
+                        #basicfileinput
+                        type="file"
+                        [accept]="accept"
+                        [multiple]="multiple"
+                        [disabled]="disabled"
+                        (change)="onFileSelect($event)"
+                        (focus)="onFocus()"
+                        (blur)="onBlur()"
+                        [attr.data-pc-section]="'input'"
+                    />
+                </p-button>
+                @if (!auto) {
+                    @if (!fileLabelTemplate && !_fileLabelTemplate) {
+                        <span>
+                            {{ basicFileChosenLabel() }}
+                        </span>
                     } @else {
-                        <span *ngIf="chooseIcon" class="p-button-icon p-button-icon-left pi" [ngClass]="chooseIcon"></span>
-                        <ng-container *ngIf="!chooseIcon">
-                            <PlusIcon *ngIf="!chooseIconTemplate && !_chooseIconTemplate" [attr.data-pc-section]="'uploadicon'" />
-                            <ng-template *ngTemplateOutlet="chooseIconTemplate || _chooseIconTemplate"></ng-template>
-                        </ng-container>
+                        <ng-container *ngTemplateOutlet="fileLabelTemplate || _fileLabelTemplate; context: { $implicit: files }"></ng-container>
                     }
-                </ng-template>
-                <input
-                    [attr.aria-label]="browseFilesLabel"
-                    #basicfileinput
-                    type="file"
-                    [accept]="accept"
-                    [multiple]="multiple"
-                    [disabled]="disabled"
-                    (change)="onFileSelect($event)"
-                    (focus)="onFocus()"
-                    (blur)="onBlur()"
-                    [attr.data-pc-section]="'input'"
-                />
-            </p-button>
-            @if (!auto) {
-                @if (!fileLabelTemplate && !_fileLabelTemplate) {
-                    <span [class]="cx('filelabel')">
-                        {{ basicFileChosenLabel() }}
-                    </span>
-                } @else {
-                    <ng-container *ngTemplateOutlet="fileLabelTemplate || _fileLabelTemplate; context: { $implicit: files }"></ng-container>
                 }
-            }
+            </div>
         </div>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: ProgressBar, selector: "p-progressBar, p-progressbar, p-progress-bar", inputs: ["value", "showValue", "styleClass", "valueStyleClass", "style", "unit", "mode", "color"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "component", type: PlusIcon, selector: "PlusIcon" }, { kind: "component", type: UploadIcon, selector: "UploadIcon" }, { kind: "component", type: TimesIcon, selector: "TimesIcon" }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: ProgressBar, selector: "p-progressBar, p-progressbar, p-progress-bar", inputs: ["value", "showValue", "styleClass", "valueStyleClass", "unit", "mode", "color"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "component", type: PlusIcon, selector: "PlusIcon" }, { kind: "component", type: UploadIcon, selector: "UploadIcon" }, { kind: "component", type: TimesIcon, selector: "TimesIcon" }, { kind: "ngmodule", type: SharedModule }, { kind: "component", type: FileContent, selector: "[pFileContent]", inputs: ["files", "badgeSeverity", "badgeValue", "previewWidth", "fileRemoveIconTemplate"], outputs: ["onRemove"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: FileUpload, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: FileUpload, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-fileupload, p-fileUpload',
                     standalone: true,
-                    imports: [CommonModule, Button, ProgressBar, Message, PlusIcon, UploadIcon, TimesIcon, SharedModule],
+                    imports: [CommonModule, Button, ProgressBar, Message, PlusIcon, UploadIcon, TimesIcon, SharedModule, FileContent],
                     template: `
-        <div [ngClass]="'p-fileupload p-fileupload-advanced p-component'" [ngStyle]="style" [class]="styleClass" *ngIf="mode === 'advanced'" [attr.data-pc-name]="'fileupload'" [attr.data-pc-section]="'root'">
+        <div [class]="cn(cx('root'), styleClass)" [ngStyle]="style" *ngIf="mode === 'advanced'" [attr.data-pc-name]="'fileupload'" [attr.data-pc-section]="'root'">
             <input
                 [attr.aria-label]="browseFilesLabel"
                 #advancedfileinput
@@ -1176,10 +1193,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                 [attr.data-pc-section]="'input'"
                 [style.display]="'none'"
             />
-            <div class="p-fileupload-header">
+            <div [class]="cx('header')">
                 <ng-container *ngIf="!headerTemplate && !_headerTemplate">
                     <p-button
-                        [styleClass]="'p-fileupload-choose-button ' + chooseStyleClass"
+                        [styleClass]="cn(cx('pcChooseButton'), chooseStyleClass)"
                         [disabled]="disabled || isChooseDisabled()"
                         (focus)="onFocus()"
                         [label]="chooseButtonLabel"
@@ -1214,7 +1231,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                         [label]="uploadButtonLabel"
                         (onClick)="upload()"
                         [disabled]="!hasFiles() || isFileLimitExceeded()"
-                        [styleClass]="'p-fileupload-upload-button ' + uploadStyleClass"
+                        [styleClass]="cn(cx('pcUploadButton'), uploadStyleClass)"
                         [buttonProps]="uploadButtonProps"
                     >
                         <span *ngIf="uploadIcon" [ngClass]="uploadIcon" [attr.aria-hidden]="true"></span>
@@ -1225,7 +1242,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                             </span>
                         </ng-container>
                     </p-button>
-                    <p-button *ngIf="!auto && showCancelButton" [label]="cancelButtonLabel" (onClick)="clear()" [disabled]="!hasFiles() || uploading" [styleClass]="'p-fileupload-cancel-button ' + cancelStyleClass" [buttonProps]="cancelButtonProps">
+                    <p-button *ngIf="!auto && showCancelButton" [label]="cancelButtonLabel" (onClick)="clear()" [disabled]="!hasFiles() || uploading" [styleClass]="cn(cx('pcCancelButton'), cancelStyleClass)" [buttonProps]="cancelButtonProps">
                         <span *ngIf="cancelIcon" [ngClass]="cancelIcon"></span>
                         <ng-container *ngIf="!cancelIcon">
                             <TimesIcon *ngIf="!cancelIconTemplate && !_cancelIconTemplate" [attr.aria-hidden]="true" />
@@ -1249,107 +1266,114 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                 ></ng-container>
                 <ng-container *ngTemplateOutlet="toolbarTemplate || _toolbarTemplate"></ng-container>
             </div>
-            <div #content class="p-fileupload-content" (dragenter)="onDragEnter($event)" (dragleave)="onDragLeave($event)" (drop)="onDrop($event)" [attr.data-pc-section]="'content'">
-                <p-progressbar [value]="progress" [showValue]="false" *ngIf="hasFiles()"></p-progressbar>
-                @for (message of msgs; track message) {
-                    <p-message [severity]="message.severity" [text]="message.text"></p-message>
-                }
+            <div #content [class]="cx('content')" (dragenter)="onDragEnter($event)" (dragleave)="onDragLeave($event)" (drop)="onDrop($event)" [attr.data-pc-section]="'content'">
+                @if (contentTemplate || _contentTemplate) {
+                    <ng-container
+                        *ngTemplateOutlet="
+                            contentTemplate || _contentTemplate;
+                            context: {
+                                $implicit: files,
+                                uploadedFiles: uploadedFiles,
+                                chooseCallback: choose.bind(this),
+                                clearCallback: clear.bind(this),
+                                removeUploadedFileCallback: removeUploadedFile.bind(this),
+                                removeFileCallback: remove.bind(this),
+                                progress: progress,
+                                messages: msgs
+                            }
+                        "
+                    ></ng-container>
+                } @else {
+                    <p-progressbar [value]="progress" [showValue]="false" *ngIf="hasFiles()"></p-progressbar>
+                    @for (message of msgs; track message) {
+                        <p-message [severity]="message.severity" [text]="message.text"></p-message>
+                    }
 
-                <div class="p-fileupload-file-list" *ngIf="hasFiles()">
-                    @if (!fileTemplate && !_fileTemplate) {
-                        <div class="p-fileupload-file" *ngFor="let file of files; let i = index">
-                            <img [src]="file.objectURL" *ngIf="isImage(file)" [width]="previewWidth" (error)="imageError($event)" class="p-fileupload-file-thumbnail" />
-                            <div class="p-fileupload-file-info">
-                                <div class="p-fileupload-file-name">{{ file.name }}</div>
-                                <span class="p-fileupload-file-size">{{ formatSize(file.size) }}</span>
-                            </div>
-                            <div class="p-fileupload-file-actions">
-                                <p-button (onClick)="remove($event, i)" [disabled]="uploading" text rounded severity="danger" [styleClass]="'p-fileupload-file-remove-button ' + removeStyleClass">
-                                    <ng-template #icon>
-                                        <TimesIcon *ngIf="!cancelIconTemplate && !_cancelIconTemplate" />
-                                        <ng-template *ngTemplateOutlet="cancelIconTemplate || _cancelIconTemplate"></ng-template>
-                                    </ng-template>
-                                </p-button>
-                            </div>
+                    @if (hasFiles()) {
+                        <div [class]="cx('fileList')">
+                            <ng-template ngFor [ngForOf]="files" [ngForTemplate]="fileTemplate || _fileTemplate"></ng-template>
+                            @if (!fileTemplate && !_fileTemplate) {
+                                <div pFileContent [files]="files" (onRemove)="onRemoveClick($event)" [badgeValue]="pendingLabel" [previewWidth]="previewWidth" [fileRemoveIconTemplate]="cancelIconTemplate || _cancelIconTemplate"></div>
+                            }
                         </div>
                     }
-                    @if (fileTemplate || _fileTemplate) {
-                        <ng-template ngFor [ngForOf]="files" [ngForTemplate]="fileTemplate || _fileTemplate"></ng-template>
+                    @if (hasUploadedFiles()) {
+                        <div [class]="cx('fileList')">
+                            <ng-template ngFor [ngForOf]="uploadedFiles" [ngForTemplate]="fileTemplate || _fileTemplate"></ng-template>
+                            @if (!fileTemplate && !_fileTemplate) {
+                                <div
+                                    pFileContent
+                                    [files]="uploadedFiles"
+                                    (onRemove)="onRemoveUploadedFileClick($event)"
+                                    [badgeValue]="completedLabel()"
+                                    badgeSeverity="success"
+                                    [previewWidth]="previewWidth"
+                                    [fileRemoveIconTemplate]="cancelIconTemplate || _cancelIconTemplate"
+                                ></div>
+                            }
+                        </div>
                     }
-                </div>
-                <ng-container
-                    *ngTemplateOutlet="
-                        contentTemplate || _contentTemplate;
-                        context: {
-                            $implicit: files,
-                            uploadedFiles: uploadedFiles,
-                            chooseCallback: choose.bind(this),
-                            clearCallback: clear.bind(this),
-                            removeUploadedFileCallback: removeUploadedFile.bind(this),
-                            removeFileCallback: remove.bind(this),
-                            progress: progress,
-                            messages: msgs
-                        }
-                    "
-                ></ng-container>
+                }
                 @if ((emptyTemplate || _emptyTemplate) && !hasFiles() && !hasUploadedFiles()) {
                     <ng-container *ngTemplateOutlet="emptyTemplate || _emptyTemplate"></ng-container>
                 }
             </div>
         </div>
-        <div [ngClass]="'p-fileupload p-fileupload-basic p-component'" [class]="styleClass" *ngIf="mode === 'basic'" [attr.data-pc-name]="'fileupload'">
+        <div [class]="cn(cx('root'), styleClass)" *ngIf="mode === 'basic'" [attr.data-pc-name]="'fileupload'">
             @for (message of msgs; track message) {
                 <p-message [severity]="message.severity" [text]="message.text"></p-message>
             }
 
-            <p-button
-                [styleClass]="'p-fileupload-choose-button ' + chooseStyleClass"
-                [disabled]="disabled"
-                [label]="chooseButtonLabel"
-                [style]="style"
-                (onClick)="onBasicUploaderClick()"
-                (keydown)="onBasicKeydown($event)"
-                [buttonProps]="chooseButtonProps"
-            >
-                <ng-template #icon>
-                    @if (hasFiles() && !auto) {
-                        <span *ngIf="uploadIcon" class="p-button-icon p-button-icon-left" [ngClass]="uploadIcon"></span>
-                        <ng-container *ngIf="!uploadIcon">
-                            <UploadIcon *ngIf="!uploadIconTemplate && !_uploadIconTemplate" [styleClass]="'p-button-icon p-button-icon-left'" />
-                            <span *ngIf="_uploadIconTemplate || uploadIconTemplate" class="p-button-icon p-button-icon-left">
-                                <ng-template *ngTemplateOutlet="_uploadIconTemplate || uploadIconTemplate"></ng-template>
-                            </span>
-                        </ng-container>
+            <div [class]="cx('basicContent')">
+                <p-button
+                    [styleClass]="cn(cx('pcChooseButton'), chooseStyleClass)"
+                    [disabled]="disabled"
+                    [label]="chooseButtonLabel"
+                    [style]="style"
+                    (onClick)="onBasicUploaderClick()"
+                    (keydown)="onBasicKeydown($event)"
+                    [buttonProps]="chooseButtonProps"
+                >
+                    <ng-template #icon>
+                        @if (hasFiles() && !auto) {
+                            <span *ngIf="uploadIcon" class="p-button-icon p-button-icon-left" [ngClass]="uploadIcon"></span>
+                            <ng-container *ngIf="!uploadIcon">
+                                <UploadIcon *ngIf="!uploadIconTemplate && !_uploadIconTemplate" [styleClass]="'p-button-icon p-button-icon-left'" />
+                                <span *ngIf="_uploadIconTemplate || uploadIconTemplate" class="p-button-icon p-button-icon-left">
+                                    <ng-template *ngTemplateOutlet="_uploadIconTemplate || uploadIconTemplate"></ng-template>
+                                </span>
+                            </ng-container>
+                        } @else {
+                            <span *ngIf="chooseIcon" class="p-button-icon p-button-icon-left pi" [ngClass]="chooseIcon"></span>
+                            <ng-container *ngIf="!chooseIcon">
+                                <PlusIcon *ngIf="!chooseIconTemplate && !_chooseIconTemplate" [attr.data-pc-section]="'uploadicon'" />
+                                <ng-template *ngTemplateOutlet="chooseIconTemplate || _chooseIconTemplate"></ng-template>
+                            </ng-container>
+                        }
+                    </ng-template>
+                    <input
+                        [attr.aria-label]="browseFilesLabel"
+                        #basicfileinput
+                        type="file"
+                        [accept]="accept"
+                        [multiple]="multiple"
+                        [disabled]="disabled"
+                        (change)="onFileSelect($event)"
+                        (focus)="onFocus()"
+                        (blur)="onBlur()"
+                        [attr.data-pc-section]="'input'"
+                    />
+                </p-button>
+                @if (!auto) {
+                    @if (!fileLabelTemplate && !_fileLabelTemplate) {
+                        <span>
+                            {{ basicFileChosenLabel() }}
+                        </span>
                     } @else {
-                        <span *ngIf="chooseIcon" class="p-button-icon p-button-icon-left pi" [ngClass]="chooseIcon"></span>
-                        <ng-container *ngIf="!chooseIcon">
-                            <PlusIcon *ngIf="!chooseIconTemplate && !_chooseIconTemplate" [attr.data-pc-section]="'uploadicon'" />
-                            <ng-template *ngTemplateOutlet="chooseIconTemplate || _chooseIconTemplate"></ng-template>
-                        </ng-container>
+                        <ng-container *ngTemplateOutlet="fileLabelTemplate || _fileLabelTemplate; context: { $implicit: files }"></ng-container>
                     }
-                </ng-template>
-                <input
-                    [attr.aria-label]="browseFilesLabel"
-                    #basicfileinput
-                    type="file"
-                    [accept]="accept"
-                    [multiple]="multiple"
-                    [disabled]="disabled"
-                    (change)="onFileSelect($event)"
-                    (focus)="onFocus()"
-                    (blur)="onBlur()"
-                    [attr.data-pc-section]="'input'"
-                />
-            </p-button>
-            @if (!auto) {
-                @if (!fileLabelTemplate && !_fileLabelTemplate) {
-                    <span [class]="cx('filelabel')">
-                        {{ basicFileChosenLabel() }}
-                    </span>
-                } @else {
-                    <ng-container *ngTemplateOutlet="fileLabelTemplate || _fileLabelTemplate; context: { $implicit: files }"></ng-container>
                 }
-            }
+            </div>
         </div>
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -1505,11 +1529,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                 args: [PrimeTemplate]
             }] } });
 class FileUploadModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: FileUploadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.8", ngImport: i0, type: FileUploadModule, imports: [FileUpload, SharedModule], exports: [FileUpload, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: FileUploadModule, imports: [FileUpload, SharedModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: FileUploadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.6", ngImport: i0, type: FileUploadModule, imports: [FileUpload, SharedModule], exports: [FileUpload, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: FileUploadModule, imports: [FileUpload, SharedModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: FileUploadModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: FileUploadModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [FileUpload, SharedModule],
@@ -1521,5 +1545,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { FileUpload, FileUploadClasses, FileUploadModule, FileUploadStyle };
+export { FileContent, FileUpload, FileUploadClasses, FileUploadModule, FileUploadStyle };
 //# sourceMappingURL=primeng-fileupload.mjs.map