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 |
API defines helper props, events and others for the PrimeNG FileUpload module.
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. |
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. |
Name | Parameters | Description |
---|---|---|
upload | - | Uploads the selected files. |
clear | - | Clears the files list. |
Name | Parameters |
---|---|
file | - |
content | $implicit: files |
toolbar | - |
chooseicon | - |
uploadicon | - |
cancelicon | - |