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="https://www.primefaces.org/cdn/api/upload.php" 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="https://www.primefaces.org/cdn/api/upload.php" 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.
<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>
<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>
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 |
FileUpload uses a hidden native input element with type="file" for screen readers.
Interactive elements of the uploader are buttons, visit the Button accessibility section for more information.
API defines helper props, events and others for the PrimeNG FileUpload module.
FileUpload is an advanced uploader with dragdrop support, multi file uploads, auto uploading, progress tracking and validations.
Defines the input properties of the component.
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. |
Defines methods that can be accessed by the component's reference.
Defines the templates used by the component.
Defines the custom events used by the component's emitters.
Upload event.
Form data event.
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.
Callback to invoke before file upload is initialized.
Callback to invoke when file upload is complete.
Callback to invoke when a file is removed without uploading using clear button of a file.
Callback to invoke when files are selected.
Callback to invoke when files are being uploaded.
Callback to invoke in custom upload mode to upload the files manually.
Callback to invoke on upload error.