import FileUpload from 'primevue/fileupload';
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
<script src="https://unpkg.com/primevue@^3/fileupload/fileupload.min.js"></script>
FileUpload requires a url property as the upload target and a name to identify the files at backend.
<FileUpload name="demo[]" url="./upload" />
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="true" />
FileUpload basic mode provides a simpler UI as an alternative to advanced mode.
<FileUpload mode="basic" name="demo[]" url="./upload" />
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.
<FileUpload mode="basic" name="demo[]" url="./upload" :auto="true" />
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 mode="basic" name="demo[]" url="./upload" accept="image/*" />
Maximium file size can be restricted using maxFileSize property defined in bytes. Similarly fileLimit is available to restrict the number of files to be uploaded.
<FileUpload name="demo[]" url="./upload" :maxFileSize="1000000" :fileLimit="3" />
In order to customize the default messages use invalidFileSizeMessage and invalidFileLimitMessage options where {0} placeholder refers to the filename and {1} 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.
Uploading implementation can be overridden by enabling customMode property and defining a custom upload handler event.
<FileUpload name="demo[]" :customUpload="true" @uploader="myUploader" />
myUploader(event) {
//event.files == files to upload
}
FileUpload component is extremely customizable thanks to the templating features, both the header and content sections provide custom slots.
<FileUpload name="demo[]" url="./upload.php" @upload="onTemplatedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000" @select="onSelectedFiles">
<template #header="{ chooseCallback, uploadCallback, clearCallback, files }">
<div class="flex flex-wrap justify-content-between align-items-center flex-1 gap-2">
<div class="flex gap-2">
<Button @click="chooseCallback()" icon="pi pi-images" class="p-button-rounded"></Button>
<Button @click="uploadCallback()" icon="pi pi-cloud-upload" class="p-button-rounded p-button-success" :disabled="!files || files.length === 0"></Button>
<Button @click="clearCallback()" icon="pi pi-times" class="p-button-rounded p-button-danger" :disabled="!files || files.length === 0"></Button>
</div>
<ProgressBar :value="totalSizePercent" :showValue="false" :class="['md:w-20rem h-1rem w-full md:ml-auto', {'exceeded-progress-bar': (totalSizePercent > 100)}]"><span class="white-space-nowrap">{{ totalSize }}B / 1Mb</span></ProgressBar>
</div>
</template>
<template #content="{ files, uploadedFiles, onUploadedFileRemove, onFileRemove }">
<div v-if="files.length > 0">
<h5>Pending</h5>
<div class="flex flex-wrap p-5 gap-5">
<div v-for="(file, index) of files" :key="file.name + file.type + file.size" class="card m-0 px-6 flex flex-column border-1 surface-border align-items-center gap-3">
<div>
<img role="presentation" :alt="file.name" :src="file.objectURL" height="50" class="shadow-2" />
</div>
<span class="font-semibold">{{ file.name }}</span>
<div>{{ formatSize(file.size) }}</div>
<Badge value="Pending" severity="warning" />
<Button icon="pi pi-times" @click="onRemoveTemplatingFile(file, onFileRemove, index)" class="p-button-outlined p-button-danger p-button-rounded" />
</div>
</div>
</div>
<div v-if="uploadedFiles.length > 0">
<h5>Completed</h5>
<div class="flex flex-wrap p-0 sm:p-5 gap-5">
<div v-for="(file, index) of uploadedFiles" :key="file.name + file.type + file.size" class="card m-0 px-6 flex flex-column border-1 surface-border align-items-center gap-3">
<div>
<img role="presentation" :alt="file.name" :src="file.objectURL" width="100" class="shadow-2" />
</div>
<span class="font-semibold">{{ file.name }}</span>
<div>{{ formatSize(file.size) }}</div>
<Badge value="Completed" class="mt-3" severity="success" />
<Button icon="pi pi-times" @click="onUploadedFileRemove(index)" class="p-button-outlined p-button-danger p-button-rounded" />
</div>
</div>
</div>
</template>
<template #empty>
<div class="flex align-items-center justify-content-center flex-column">
<i class="pi pi-cloud-upload border-2 border-circle p-5 text-8xl text-400 border-400" />
<p class="mt-4 mb-0">Drag and drop files to here to upload.</p>
</div>
</template>
</FileUpload>
| 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 | null | 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}." | Message of the invalid fize size. |
| invalidFileLimitMessage | string | Maximum number of files exceeded, limit is {0} at most. | Message to display when number of files to be uploaded exceeeds the limit. |
| invalidFileTypeMessage | string | "{0}: Invalid file type, allowed file types: {1}"". | Message of the invalid file type. |
| fileLimit | number | null | Maximum number of files that can be uploaded. |
| 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 | null | Label of the choose button. Defaults to PrimeVue |
| uploadLabel | string | Upload | Label of the upload button. Defaults to PrimeVue |
| cancelLabel | string | Cancel | Label of the cancel button. Defaults to PrimeVue |
| customUpload | boolean | false | Whether to use the default upload or a manual implementation defined in uploadHandler callback. Defaults to PrimeVue |
| showUploadButton | boolean | true | Whether to show the upload button. |
| showCancelButton | boolean | true | Whether to show the cancel button. |
| chooseIcon | string | pi pi-plus | Icon of the choose button. |
| uploadIcon | string | pi pi-upload | Icon of the upload button. |
| cancelIcon | string | pi pi-times | Icon of the cancel button. |
| style | any | null | Inline style of the component. |
| class | string | null | Style class of the component. |
| 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 files are selected. |
| progress |
event.originalEvent: Original browser event. event.progress: Calculated progress value. |
Callback to invoke when files are being uploaded. |
| uploader | event.files: List of selected files. | Callback to invoke to implement a custom upload. |
| remove |
event.file: Removed file. event.files: Remaining files to be uploaded. |
Callback to invoke when a single file is removed from the file list to upload. |
| removeUploadedFile |
event.file: Removed uploaded file. event.files: Remaining uploaded files. |
Callback to invoke when a single uploaded file is removed from the uploaded file list. |
| Name | Parameters |
|---|---|
| header |
files: Files to upload uploadedFiles: Uploaded Files chooseCallback: Choose function uploadCallback: Upload function clearCallback: Clear function |
| content |
files: Files to upload uploadedFiles: Uploaded Files progress: Uploaded progress as number messages: Status messages about upload process removeFileCallback(index): Function to remove a file removeUploadedFileCallback(index): Function to remove an uploaded file |
| empty | - |
Following is the list of structural style classes, for theming classes visit
| Name | Element |
|---|---|
| p-fileupload | Container element. |
| p-fileupload-basic | Container element in basic mode. |
| p-fileupload-advanced | Container element in advanced mode. |
| p-fileupload-buttonbar | Header containing the buttons. |
| p-fileupload-content | Content section. |
| p-fileupload-file | File item. |
| p-fileupload-file-thumbnail | Image preview of a file. |
| p-fileupload-file-details | Container of file details. |
| p-fileupload-file-name | File name element. |
| p-fileupload-file-size | File size element. |
| p-fileupload-file-badge | File badge element. |
| p-fileupload-file-actions | Container of file actions. |
| p-fileupload-file-remove | Button to remove a file. |
| p-fileupload-empty | Container of the empty slot. |
None.