Vue File selector for Vuejs 3
File selector with validation that supports drag-n-drop for Vuejs.
Other open source projects
Install
Run the command
npm i vue-file-selector@latest
NPM package: https://www.npmjs.com/package/vue-file-selector
Github source: https://github.com/d2phap/vue-file-selector
Usage
Please see Demo project for full example.
Declare the plugin
// in main.ts
import { createApp } from 'vue';
// import FileSelector main css
import 'vue-file-selector/dist/main.css';
// import the FileSelector plugin
import FileSelector from 'vue-file-selector';
import App from './App.vue';
createApp(App)
// then use it!
.use(FileSelector)
.mount('#app');
Use in Vue file
<template>
<div>
<FileSelector
accept-extensions=".jpg,.svg"
:multiple="true"
:max-file-size="5 * 1024 * 1024"
@validated="handleFilesValidated"
@changed="handleFilesChanged">
Select image files
</FileSelector>
</div>
</template>
<script lang="ts">
import { Options, Vue } from 'vue-class-component';
import { FsValidationResult } from 'vue-file-selector/dist';
@Options({})
export default class App extends Vue {
handleFilesValidated(result: FsValidationResult, files: File[]) {
console.log('Validation result: ' + result);
},
handleFilesChanged(files: File[]) {
console.log('Selected files: ');
console.table(files);
},
}
</script>
Slots
| Name | Default | Description |
|---|
default | Select | Content of the Select button. |
loader | Loading... | Content of loading state. |
top | (empty) | Top section content, above the Select button. |
bottom | (empty) | Bottom section content, below the Select button. |
Props
| Name | Type | Default | Description |
|---|
multiple | boolean | false | Allow multiple files selected. |
isLoading | boolean | false | Show or hide the loading section (slot: loader). |
acceptExtensions | string | (empty) | List of file extensions accepted. Each extension separated by a comma (,). E.g. accept-extensions=".zip,.rar". |
maxFileSize | number | NaN | Maximum size in byte of every single file allowed. E.g. :max-file-size="2*1024*1024" (only the files that ≤2 MB are allowed). |
height | number | NaN | The height of droppable section. |
validateFn | FsValidateFn | () => true | A custom validation function that returns boolean value. |
Events
1. @validated
Occurs after the selected files validated.
Function(result: FsValidationResult, files: File[]): void
result: validation result,
files: list of files validated.
2. @changed
Occurs if the selected files pass validation.
Function(files: File[]): void
files: list of files validated.
Error codes
List of error codes returned after validation, see FsValidationResult.
| Code | Error description |
|---|
EXTENSION_ERROR | The selected files contain invalid extensions. |
FILE_SIZE_ERROR | The selected files size exceeded limit. |
MULTIFILES_ERROR | Multiple files selection is not allowed. |
License
![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4){kind=avatar}
