React FileUpload is an advanced uploader with dragdrop support, multi file uploads, auto uploading, progress tracking and validations.
Setup
Refer to PrimeReact setup documentation for download and installation steps for your environment.
Import
import { FileUpload } from 'primereact/fileupload';
Getting Started
FileUpload requires a url property as the upload target and a name to identify the files at backend.
<FileUpload name="demo" url="./upload"></FileUpload>
Multiple Uploads
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 />
DragDrop
File selection can also be done by dragging and dropping from the filesystem to the content section of the component.
Auto Uploads
When auto property is enabled, upload begins as soon as file selection is completed or a file is dropped on the drop area.
<FileUpload name="demo" url="./upload" auto />
File Types
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 name="demo[]" url="./upload" multiple accept="image/*" />
File Size
Maximium file size can be restricted using maxFileSize property defined in bytes.
<FileUpload name="demo" url="./upload" maxFileSize="1000000" />
In order to customize the default messages use invalidFileSizeMessageSummary and invalidFileSizeMessageDetail options. In summary messages, 0 placeholder refers to the filename and in detail message, the file size.
- invalidFileSizeMessageSummary: '0: Invalid file size, '
- invalidFileSizeMessageDetail: string = 'maximum upload size is 0.'
Request Customization
XHR request to upload the files can be customized using the onBeforeUpload callback that passes the xhr instance and FormData object as event parameters.
Basic UI
FileUpload basic mode provides a simpler UI as an alternative to advanced mode.
<FileUpload name="demo" url="./upload" mode="basic" />
Custom Upload
Uploading implementation can be overriden by enabling customUpload property and defining a custom upload handler event.
<FileUpload name="demo[]" url="./upload" customUpload uploadHandler={myUploader} />
const myUploader = (event) => {
//event.files == files to upload
}
Theming
FileUpload supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.
Resources
Visit the PrimeReact FileUpload showcase for demos and documentation.