Vue3 FileUpload is an advanced uploader with dragdrop support, multi file uploads, auto uploading, progress tracking and validations. It supports Vue 3 with PrimeVue 3 and Vue 2 with PrimeVue 2.
Setup
Refer to PrimeVue setup documentation for download and installation steps for your environment such as Vue CLI, Vite or browser.
Import
import FileUpload from 'primevue/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" />
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="true" />
Basic UI
FileUpload basic mode provides a simpler UI as an alternative to advanced mode.
<FileUpload mode="basic" name="demo[]" url="./upload" />
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 mode="basic" name="demo[]" url="./upload" :auto="true" />
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 mode="basic" name="demo[]" url="./upload" accept="image/*" />
File Size and File Linit
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.
- invalidFileSizeMessage: '{0}: Invalid file size, file size should be smaller than {1}.'
- invalidFileLimitMessage: 'Maximum number of files exceeded, limit is {0} at most.'
Request Customization
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.
Custom Upload
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
}
Empty Template
When there is no file selected, you may use the empty slot to display content.
<FileUpload name="demo[]" url="./upload" />
<template #empty>
<p>Drag and drop files to here to upload.</p>
</template>
</FileUpload>
Theming
FileUpload supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.
Resources
Visit the PrimeVue FileUpload showcase for demos and documentation.