FileUpload

Import via Module

import { FileUpload } from 'primereact/fileupload';
 

Import via CDN

<script src="https://unpkg.com/primereact/core/core.min.js"></script>
<script src="https://unpkg.com/primereact/fileupload/fileupload.min.js"></script>
 

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
}
 

ItemTemplate

Used to create custom item elements in the container.

<FileUpload name="demo[]" url="./upload" itemTemplate={customItemTemplate} uploadHandler={myUploader} />
 

const customItemTemplate = (file, props) => {
    // file: Current file object.
    // options.onRemove: Event used to remove current file in the container.
    // options.previewElement: The default preview element in the container.
    // options.fileNameElement: The default fileName element in the container.
    // options.sizeElement: The default size element in the container.
    // options.removeElement: The default remove element in the container.
    // options.formatSize: The formated size of file.
    // options.files: Current files.
    // options.index: The index of file in current files list.
    // options.element: Default element created by the component.
    // options.props: component props.
}
 

Button Options

Used to customize choose, upload and cancel buttons.

const chooseOptions = {label: 'Choose', icon: 'pi pi-fw pi-plus'};
const uploadOptions = {label: 'Uplaod', icon: 'pi pi-upload', className: 'p-button-success'};
const cancelOptions = {label: 'Cancel', icon: 'pi pi-times', className: 'p-button-danger'};
 

<FileUpload name="demo[]" url="./upload" chooseOptions={chooseOptions} uploadOptions={uploadOptions} cancelOptions={cancelOptions} uploadHandler={myUploader} />
 

const buttonOptions = {
    // label: The label of button.
    // icon: The icon of button.
    // className: Style class of button.
    // style: Style of button.
}
 

Properties

Events

Methods

Styling

Following is the list of structural style classes, for theming classes visit theming page.