FileUpload

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

Import #


import { FileUploadModule } from 'primeng/fileupload';

Basic #

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

Choose


<p-fileUpload 
    mode="basic" 
    chooseLabel="Choose" 
    chooseIcon="pi pi-upload"
    name="demo[]" 
    url="https://www.primefaces.org/cdn/api/upload.php" 
    accept="image/*" 
    maxFileSize="1000000" 
    (onUpload)="onUpload($event)" />

Auto #

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

Browse


<p-fileUpload 
    mode="basic" 
    name="demo[]" 
    chooseIcon="pi pi-upload" 
    url="https://www.primefaces.org/cdn/api/upload.php" 
    accept="image/*" maxFileSize="1000000" 
    (onUpload)="onBasicUploadAuto($event)" 
    [auto]="true" 
    chooseLabel="Browse" />

Template #

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.

Drag and drop files here to upload.


<p-toast />
<p-fileUpload name="myfile[]" url="https://www.primefaces.org/cdn/api/upload.php" [multiple]="true" accept="image/*" maxFileSize="1000000" (onUpload)="onTemplatedUpload()" (onSelect)="onSelectedFiles($event)">
    <ng-template pTemplate="header" let-files let-chooseCallback="chooseCallback" let-clearCallback="clearCallback" let-uploadCallback="uploadCallback">
        <div class="flex flex-wrap justify-content-between align-items-center flex-1 gap-2">
            <div class="flex gap-2">
                <p-button (onClick)="choose($event, chooseCallback)" icon="pi pi-images" [rounded]="true" [outlined]="true" />
                <p-button (onClick)="uploadEvent(uploadCallback)" icon="pi pi-cloud-upload" [rounded]="true" [outlined]="true" severity="success" [disabled]="!files || files.length === 0" />
                <p-button (onClick)="clearCallback()" icon="pi pi-times" [rounded]="true" [outlined]="true" severity="danger" [disabled]="!files || files.length === 0" />
            </div>
            <p-progressBar [value]="totalSizePercent" [showValue]="false" styleClass="md:w-20rem h-1rem w-full md:ml-auto" [ngClass]="{ 'exceeded-progress-bar': totalSizePercent > 100 }">
                <span class="white-space-nowrap">{{ totalSize }}B / 1Mb</span>
            </p-progressBar>
        </div>
    </ng-template>
    <ng-template pTemplate="content" let-files let-uploadedFiles="uploadedFiles" let-removeFileCallback="removeFileCallback" let-removeUploadedFileCallback="removeUploadedFileCallback">
        <div *ngIf="files?.length > 0">
            <h5>Pending</h5>
            <div class="flex flex-wrap p-0 sm:p-5 gap-5">
                <div *ngFor="let file of files; let i = index" class="card m-0 px-6 flex flex-column border-1 surface-border align-items-center gap-3">
                    <div>
                        <img role="presentation" [alt]="file.name" [src]="file.objectURL" width="100" height="50" />
                    </div>
                    <span class="font-semibold">{{ file.name }}</span>
                    <div>{{ formatSize(file.size) }}</div>
                    <p-badge value="Pending" severity="warning" />
                    <p-button icon="pi pi-times" (onClick)="onRemoveTemplatingFile($event, file, removeFileCallback, index)" [outlined]="true" [rounded]="true" severity="danger" />
                </div>
            </div>
        </div>
        <div *ngIf="uploadedFiles?.length > 0">
            <h5>Completed</h5>
            <div class="flex flex-wrap p-0 sm:p-5 gap-5">
                <div *ngFor="let file of uploadedFiles; let i = index" class="card m-0 px-6 flex flex-column border-1 surface-border align-items-center gap-3">
                    <div>
                        <img role="presentation" [alt]="file.name" [src]="file.objectURL" width="100" height="50" />
                    </div>
                    <span class="font-semibold">{{ file.name }}</span>
                    <div>{{ formatSize(file.size) }}</div>
                    <p-badge value="Completed" class="mt-3" severity="success" />
                    <p-button icon="pi pi-times" (onClick)="removeUploadedFileCallback(index)" [outlined]="true" [rounded]="true" severity="danger" />
                </div>
            </div>
        </div>
    </ng-template>
    <ng-template pTemplate="file"> </ng-template>
    <ng-template pTemplate="empty">
        <div class="flex align-items-center justify-content-center flex-column">
            <i class="pi pi-cloud-upload border-2 border-circle p-5 text-8xl text-400 border-400"></i>
            <p class="mt-4 mb-0">Drag and drop files here to upload.</p>
        </div>
    </ng-template>
</p-fileUpload>

Advanced #

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

Choose

Drag and drop files here to upload.


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

Style #

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

Name	Element
p-fileupload	Container element
p-fileupload-buttonbar	Header containing the buttons
p-fileupload-content	Content section

Accessibility #

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.

FileUpload API

API defines helper props, events and others for the PrimeNG FileUpload module.

FileUpload #

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

Properties #

Defines the input properties of the component.

name	type	default	description
name	string	null	Name of the request parameter to identify the files at backend.
url	string	null	Remote url to upload the files.
method	"post" \| "put"	post	HTTP method to send the files to the url such as "post" and "put".
multiple	boolean	false	Used to select multiple files at once from file dialog.
accept	string	null	Comma-separated list of pattern to restrict the allowed file types. Can be any combination of either the MIME types (such as "image/*") or the file extensions (such as ".jpg").
disabled	boolean	false	Disables the upload functionality.
auto	boolean	false	When enabled, upload begins automatically after selection is completed.
withCredentials	boolean	false	Cross-site Access-Control requests should be made using credentials such as cookies, authorization headers or TLS client certificates.
maxFileSize	number	null	Maximum file size allowed in bytes.
invalidFileSizeMessageSummary	string	{0}: Invalid file size,	Summary message of the invalid file size.
invalidFileSizeMessageDetail	string	maximum upload size is {0}.	Detail message of the invalid file size.
invalidFileTypeMessageSummary	string	{0}: Invalid file type,	Summary message of the invalid file type.
invalidFileTypeMessageDetail	string	allowed file types: {0}.	Detail message of the invalid file type.
invalidFileLimitMessageDetail	string	limit is {0} at most.	Detail message of the invalid file type.
invalidFileLimitMessageSummary	string	Maximum number of files exceeded,	Summary message of the invalid file type.
style	Object	null	Inline style of the element.
styleClass	string	null	Class of the element.
previewWidth	number	50	Width of the image thumbnail in pixels.
chooseLabel	string	null	Label of the choose button. Defaults to PrimeNG Locale configuration.
uploadLabel	string	null	Label of the upload button. Defaults to PrimeNG Locale configuration.
cancelLabel	string	null	Label of the cancel button. Defaults to PrimeNG Locale configuration.
chooseIcon	string	null	Icon of the choose button.
uploadIcon	string	null	Icon of the upload button.
cancelIcon	string	null	Icon of the cancel button.
showUploadButton	boolean	true	Whether to show the upload button.
showCancelButton	boolean	true	Whether to show the cancel button.
mode	"basic" \| "advanced"	advanced	Defines the UI of the component.
headers	HttpHeaders	null	HttpHeaders class represents the header configuration options for an HTTP request.
customUpload	boolean	false	Whether to use the default upload or a manual implementation defined in uploadHandler callback. Defaults to PrimeNG Locale configuration.
fileLimit	number	null	Maximum number of files that can be uploaded.
uploadStyleClass	string	null	Style class of the upload button.
cancelStyleClass	string	null	Style class of the cancel button.
removeStyleClass	string	null	Style class of the remove button.
chooseStyleClass	string	null	Style class of the choose button.

Emitters #

Defines emit that determine the behavior of the component based on a given condition or report the actions that the component takes.

name	parameters	description
onBeforeUpload	event : FileBeforeUploadEvent	Callback to invoke before file upload is initialized.
onSend	event : FileSendEvent	An event indicating that the request was sent to the server. Useful when a request may be retried multiple times, to distinguish between retries on the final event stream.
onUpload	event : FileUploadEvent	Callback to invoke when file upload is complete.
onError	event : FileUploadErrorEvent	Callback to invoke if file upload fails.
onClear	event : Event	Callback to invoke when files in queue are removed without uploading using clear all button.
onRemove	event : FileRemoveEvent	Callback to invoke when a file is removed without uploading using clear button of a file.
onSelect	event : FileSelectEvent	Callback to invoke when files are selected.
onProgress	event : FileProgressEvent	Callback to invoke when files are being uploaded.
uploadHandler	event : FileUploadHandlerEvent	Callback to invoke in custom upload mode to upload the files manually.
onImageError	event : Event	This event is triggered if an error occurs while loading an image file.
onRemoveUploadedFile	event : RemoveUploadedFileEvent	This event is triggered if an error occurs while removing an uploaded file.

Methods #

Defines methods that can be accessed by the component's reference.

name	parameters	description
upload		Uploads the selected files.
clear		Clears the files list.
remove	event : Event index : number	Removes a single file.
removeUploadedFile	index : any	Removes uploaded file.

Templates #

Defines the templates used by the component.

name	parameters	description
file		Custom template of file.
header	context : { $implicit: any, // File list. uploadedFiles: any, // Uploaded files list. chooseCallback: VoidFunction, // Callback to invoke on choose button click. clearCallback: VoidFunction, // Callback to invoke on clear button click. uploadCallback: VoidFunction, // Callback to invoke on upload. }	Custom template of file.
content	context : { $implicit: any, // File list. uploadedFiles: any, // Uploaded files list. progress: any, // Upload progress. messages: any, // Status messages about upload process. chooseCallback: VoidFunction, // Callback to invoke on choose button click. removeFileCallback: VoidFunction, // Callback to invoke on clear button click. clearCallback: VoidFunction, // Callback to invoke on clear button click. uploadCallback: VoidFunction, // Callback to invoke on upload. removeUploadedFileCallback: VoidFunction, // Callback to invoke on remove uploaded file, accepts index as a parameter. }	Custom template of content.
toolbar		Custom template of toolbar.
chooseicon		Custom template of chooseicon.
uploadicon		Custom template of uploadicon.
cancelicon		Custom template of cancelicon.

Events #

Defines the custom events used by the component's emitters.

UploadEvent #

Upload event.

name	type	description
originalEvent	HttpEvent<any>	HTTP event.

RemoveUploadedFileEvent #

Remove uploaded file event.

name	type	description
file	any	Removed file.
files	any[]	Uploaded files.

FormDataEvent #

Form data event.

name	type	description
formData	FormData	FormData object.

FileSendEvent #

An event indicating that the request was sent to the server. Useful when a request may be retried multiple times, to distinguish between retries on the final event stream.

name	type	description
originalEvent	HttpEvent<any>	HTTP event.
formData	FormData	FormData object.

FileBeforeUploadEvent #

Callback to invoke before file upload is initialized.

name	type	description
formData	FormData	FormData object.

FileUploadEvent #

Callback to invoke when file upload is complete.

name	type	description
originalEvent	HttpEvent<any>	HTTP event.
files	File[]	Uploaded files.

FileRemoveEvent #

Callback to invoke when a file is removed without uploading using clear button of a file.

name	type	description
originalEvent	Event	Browser event.
file	File	Selected file

FileSelectEvent #

Callback to invoke when files are selected.

name	type	description
originalEvent	Event	Browser event.
files	File[]	Uploaded files.
currentFiles	File[]	All files to be uploaded.

FileProgressEvent #

Callback to invoke when files are being uploaded.

name	type	description
originalEvent	HttpEvent<any>	HTTP event.
progress	number	Calculated progress value.

FileUploadHandlerEvent #

Callback to invoke in custom upload mode to upload the files manually.

name	type	description
files	File[]	List of selected files.

FileUploadErrorEvent #

Callback to invoke on upload error.

name	type	description
error	ErrorEvent	List of selected files.
files	File[]	List of selected files.