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" name="demo[]" url="https://www.primefaces.org/cdn/api/upload.php" accept="image/*" maxFileSize="1000000" (onUpload)="onUpload($event)"></p-fileUpload>

Auto #

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

Browse



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

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.

Choose

Upload 3 Files

Additional content.



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

Advanced #

Choose

Drag and drop files



<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 guide documents the specification of this component based on WCAG guidelines, the implementation is in progress.

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.

Properties #

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	string	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	false	Pattern to restrict the allowed file types such as "image/*".
disabled	boolean	false	Disables the upload functionality.
auto	boolean	false	When enabled, upload begins automatically after selection is completed.
maxFileSize	number	null	Maximum file size allowed in bytes.
fileLimit	number	null	Maximum number of files that can be uploaded.
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.
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.
invalidFileTypeMessageDetail	string	"allowed file types: {0}."	Detail message of the invalid file type.
style	string	null	Inline style of the component.
styleClass	string	null	Style class of the component.
chooseStyleClass	string	null	Style class of the choose button.
cancelStyleClass	string	null	Style class of the cancel button.
removeStyleClass	string	null	Style class of the remove button.
uploadStyleClass	string	null	Style class of the upload button.
previewWidth	number	50	Width of the image thumbnail in pixels.
chooseLabel	string	null	Label of the choose button. Defaults to global value in i18n translation configuration.
uploadLabel	string	null	Label of the upload button. Defaults to global value in i18n translation configuration.
cancelLabel	string	null	Label of the cancel button. Defaults to global value in i18n translation 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.
withCredentials	boolean	false	Cross-site Access-Control requests should be made using credentials such as cookies, authorization headers or TLS client certificates.
mode	string	advanced	Defines the UI of the component, possible values are "advanced" and "basic".
customUpload	boolean	false	Whether to use the default upload or a manual implementation defined in uploadHandler callback.
showUploadButton	boolean	true	Defines the visibility of upload button for Client-side FileUpload.
showCancelButton	boolean	true	Defines the visibility of cancel button for Client-side FileUpload.
files	array	null	List of files to be provide to the FileUpload externally.
headers	HttpHeaders	null	HttpHeaders class represents the header configuration options for an HTTP request.

Events #

Name	Parameters	Description
onBeforeUpload	event.formData: FormData object.	Callback to invoke before file upload is initialized.
onSend	event.originalEvent: Http Event event.formData: FormData object.	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.originalEvent: Http Event event.files: Uploaded files.	Callback to invoke when file upload is complete.
onError	event.files: Files that are not uploaded. event.error: Request Error.	Callback to invoke if file upload fails.
onClear	-	Callback to invoke when files in queue are removed without uploading using clear all button.
onRemove	event.originalEvent: Original browser event. event.file: Selected file.	Callback to invoke when a file is removed without uploading using clear button of a file.
onSelect	event.originalEvent: Original browser event. event.files: Selected files of the select event. event.currentFiles: All files to be uploaded.	Callback to invoke when files are selected.
onProgress	event.originalEvent: Original browser event. event.progress: Calculated progress value.	Callback to invoke when files are being uploaded.
uploadHandler	event.files: List of selected files.	Callback to invoke in custom upload mode to upload the files manually.
onImageError	event: Browser event	This event is triggered if an error occurs while loading an image file.

Methods #

Name	Parameters	Description
upload	-	Uploads the selected files.
clear	-	Clears the files list.

Templates #

Name	Parameters
file	-
content	$implicit: files
toolbar	-
chooseicon	-
uploadicon	-
cancelicon	-