import FileUpload from 'primevue/fileupload';
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
<script src="https://unpkg.com/primevue@^3/fileupload/fileupload.min.js"></script>
FileUpload requires a url property as the upload target and a name to identify the files at backend.
<FileUpload name="demo[]" url="./upload" />
Only one file can be selected at a time by default, to allow selecting multiple files at once enable multiple option.
<FileUpload name="demo[]" url="./upload" :multiple="true" />
FileUpload basic mode provides a simpler UI as an alternative to advanced mode.
<FileUpload mode="basic" name="demo[]" url="./upload" />
File selection can also be done by dragging and dropping from the filesystem to the content section of the component.
When auto property is enabled, upload begins as soon as file selection is completed or a file is dropped on the drop area.
<FileUpload mode="basic" name="demo[]" url="./upload" :auto="true" />
Selectable file types can be restricted with accept property, example below only allows images to be uploaded. Read more about other possible values here.
<FileUpload mode="basic" name="demo[]" url="./upload" accept="image/*" />
Maximium file size can be restricted using maxFileSize property defined in bytes. Similarly fileLimit is available to restrict the number of files to be uploaded.
<FileUpload name="demo[]" url="./upload" :maxFileSize="1000000" :fileLimit="3" />
In order to customize the default messages use invalidFileSizeMessage and invalidFileLimitMessage options where {0} placeholder refers to the filename and {1} the file size.
XHR request to upload the files can be customized using the before-upload callback that passes the xhr instance and FormData object as event parameters.
Uploading implementation can be overridden by enabling customMode property and defining a custom upload handler event.
<FileUpload name="demo[]" :customUpload="true" @uploader="myUploader" />
myUploader(event) {
//event.files == files to upload
}
When there is no file selected, you may use the empty slot to display content.
<FileUpload name="demo[]" url="./upload">
<template #empty>
<p>Drag and drop files to here to upload.</p>
</template>
</FileUpload>
| 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. |
| mode | string | advanced | Defines the UI of the component, possible values are "advanced" and "basic". |
| multiple | boolean | false | Used to select multiple files at once from file dialog. |
| accept | string | null | 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. |
| invalidFileSizeMessage | string | "{0}: Invalid file size, file size should be smaller than {1}." | Message of the invalid fize size. |
| invalidFileLimitMessage | string | Maximum number of files exceeded, limit is {0} at most. | Message to display when number of files to be uploaded exceeeds the limit. |
| fileLimit | number | null | Maximum number of files that can be uploaded. |
| withCredentials | boolean | false | Cross-site Access-Control requests should be made using credentials such as cookies, authorization headers or TLS client certificates. |
| previewWidth | number | 50 | Width of the image thumbnail in pixels. |
| chooseLabel | string | null | Label of the choose button. Defaults to PrimeVue |
| uploadLabel | string | Upload | Label of the upload button. Defaults to PrimeVue |
| cancelLabel | string | Cancel | Label of the cancel button. Defaults to PrimeVue |
| customUpload | boolean | false | Whether to use the default upload or a manual implementation defined in uploadHandler callback. Defaults to PrimeVue |
| showUploadButton | boolean | true | Whether to show the upload button. |
| showCancelButton | boolean | true | Whether to show the cancel button. |
| chooseIcon | string | pi pi-plus | Icon of the choose button. |
| uploadIcon | string | pi pi-upload | Icon of the upload button. |
| cancelIcon | string | pi pi-times | Icon of the cancel button. |
| style | any | null | Inline style of the component. |
| class | string | null | Style class of the component. |
| Name | Parameters | Description |
|---|---|---|
| before-upload |
event.xhr: XmlHttpRequest instance. event.formData: FormData object. |
Callback to invoke before file upload begins to customize the request such as post parameters before the files. |
| before-send |
event.xhr: XmlHttpRequest instance. event.formData: FormData object. |
Callback to invoke before file send begins to customize the request such as adding headers. |
| upload |
event.xhr: XmlHttpRequest instance. event.files: Uploaded files. |
Callback to invoke when file upload is complete. |
| error |
event.xhr: XmlHttpRequest instance. event.files: Files that are not uploaded. |
Callback to invoke if file upload fails. |
| clear | -. | Callback to invoke when files in queue are removed without uploading. |
| select |
event.originalEvent: Original browser event. event.files: List of selected files. |
Callback to invoke when files are selected. |
| progress |
event.originalEvent: Original browser event. event.progress: Calculated progress value. |
Callback to invoke when files are being uploaded. |
| uploader | event.files: List of selected files. | Callback to invoke to implement a custom upload. |
| remove |
event.file: Removed file. event.files: Remaining files to be uploaded. |
Callback to invoke when a singe file is removed from the list. |
| Name | Parameters |
|---|---|
| empty | - |
Following is the list of structural style classes, for theming classes visit
| Name | Element |
|---|---|
| p-fileupload | Container element. |
| p-fileupload-buttonbar | Header containing the buttons. |
| p-fileupload-content | Content section. |
None.