FileUpload requires a url property as the upload target and a name to identify the files at backend.
+Only one file can be selected at a time by default, to allow selecting multiple files at once enable multiple option.
+FileUpload basic mode provides a simpler UI as an alternative to advanced mode.
+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.
+Selectable file types can be restricted with accept property, example below only allows images to be uploaded. Read more about other possible values here.
+Maximium file size can be restricted using maxFileSize property defined in bytes.
+In order to customize the default messages use invalidFileSizeMessage option. In messages, {0} placeholder refers to the filename and in detail message, 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.
+ +| 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 | +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. | +
| invalidFileSizeMessage | +string | +"{0}: Invalid file size, file size should be smaller than {1}." | +Summary message of the invalid fize size. | +
| 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 | +Choose | +Label of the choose button. | +
| uploadLabel | +string | +Upload | +Label of the upload button. | +
| cancelLabel | +string | +Cancel | +Label of the cancel button. | +
| 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 file upload is complete. | +
| progress | +event.originalEvent: Original browser event. + event.progress: Calculated progress value. |
+ Callback to invoke when files are selected. | +
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.
+