FileUpload

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

Import#


import { FileUpload } from 'primereact/fileupload';

Basic#

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

Choose


<Toast ref={toast}></Toast>
<FileUpload mode="basic" name="demo[]" url="/api/upload" accept="image/*" maxFileSize={1000000} onUpload={onBasicUpload} />

Auto#

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

Browse


<Toast ref={toast}></Toast>
<FileUpload mode="basic" name="demo[]" url="/api/upload" accept="image/*" maxFileSize={1000000} onUpload={onBasicUploadAuto} auto chooseLabel="Browse" />

Advanced#

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

Choose

Drag and drop files to here to upload.


<Toast ref={toast}></Toast>
<FileUpload name="demo[]" url="/api/upload" onUpload={onUpload} multiple accept="image/*" maxFileSize={1000000} emptyTemplate={<p className="m-0">Drag and drop files to here to upload.</p>} />

Template#

Used to create custom item elements in the container.

Drag and Drop Image Here


<Toast ref={toast}></Toast>

<Tooltip target=".custom-choose-btn" content="Choose" position="bottom" />
<Tooltip target=".custom-upload-btn" content="Upload" position="bottom" />
<Tooltip target=".custom-cancel-btn" content="Clear" position="bottom" />

<FileUpload ref={fileUploadRef} name="demo[]" url="/api/upload" multiple accept="image/*" maxFileSize={1000000}
onUpload={onTemplateUpload} onSelect={onTemplateSelect} onError={onTemplateClear} onClear={onTemplateClear}
headerTemplate={headerTemplate} itemTemplate={itemTemplate} emptyTemplate={emptyTemplate}
chooseOptions={chooseOptions} uploadOptions={uploadOptions} cancelOptions={cancelOptions} />

Custom Upload#

Uploading implementation can be overriden by enabling customUpload property and defining a custom upload handler event.

Choose


<FileUpload mode="basic" name="demo[]" url="/api/upload" accept="image/*" customUpload uploadHandler={customBase64Uploader} />

Style#

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

Name	Element
p-fileupload	Container element.
p-fileupload-buttonbar	Header containing the buttons.
p-fileupload-content	Content section.

API#

Visit the API documentation for detailed information about all the properties, events and methods of the component.

FileUpload