FileUpload

FileUpload is an advanced uploader with dragdrop support, multi file uploads, auto uploading, progress tracking and validations.

FileUpload basic mode provides a simpler UI as an alternative to default advanced mode.

Choose No file chosen

FileUpload basic mode provides a simpler UI as an alternative to default advanced mode.

Choose No file chosen
basic-demo

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

Browse
auto-demo

Advanced uploader provides dragdrop support, multi file uploads, auto uploading, progress tracking and validations.

Choose
Drag and drop files to here to upload.
advanced-demo

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.

Drag and drop files to here to upload.

template-demo

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.

ON THIS PAGE
PrimeBlocks
490+ ready to use UI blocks crafted with PrimeNG and Tailwind CSS.
Learn More