FileUpload is an advanced uploader with drag and drop support, multi file uploads, auto uploading, progress tracking and validations.

import { FileUploadModule } from 'primeng/fileupload';

FileUpload basic mode provides a simpler UI as an alternative to default advanced mode.


<p-fileUpload mode="basic" chooseLabel="Choose" name="demo[]" url="" accept="image/*" maxFileSize="1000000" (onUpload)="onUpload($event)"></p-fileUpload>

When auto property is enabled, a file gets uploaded instantly after selection.


<p-fileUpload mode="basic" name="demo[]" url="" accept="image/*" maxFileSize="1000000" (onUpload)="onBasicUploadAuto($event)" [auto]="true" chooseLabel="Browse"></p-fileUpload>

Uploader UI is customizable using a ng-template called file that gets the File instance as the implicit variable. Second ng-template named content can be used to place custom content inside the content section which would be useful to implement a user interface to manage the uploaded files such as removing them. This template gets the selected files as the implicit variable. Third and final ng-template option is toolbar to display custom content at toolbar.

Upload 3 Files
Additional content.

<p-fileUpload name="myfile[]" url="" [multiple]="true" accept="image/*" maxFileSize="1000000">
    <ng-template pTemplate="toolbar">
        <div class="py-3">Upload 3 Files</div>
    <ng-template let-file pTemplate="file">
        <div>Custom UI to display a file</div>
    <ng-template pTemplate="content" let-files>
        <div>Additional content.</div>

Drag and drop files

<p-fileUpload name="demo[]" url="" (onUpload)="onUpload($event)" [multiple]="true" accept="image/*" maxFileSize="1000000">
    <ng-template pTemplate="content">
        <ul *ngIf="uploadedFiles.length">
            <li *ngFor="let file of uploadedFiles">{{ }} - {{ file.size }} bytes</li>

Following is the list of structural style classes, for theming classes visit theming page.

p-fileuploadContainer element
p-fileupload-buttonbarHeader containing the buttons
p-fileupload-contentContent section

Screen Reader

FileUpload uses a hidden native input element with type="file" for screen readers.

Keyboard Support

Interactive elements of the uploader are buttons, visit the Button accessibility section for more information.