vue-file-selector

Vue File selector for Vuejs 3

File selector with validation that supports drag-n-drop for Vuejs.

Other open source projects

• ImageGlass - A lightweight, versatile image viewer: https://imageglass.org
• Fluent Reveal Effect Js (Fluent Design System): https://github.com/d2phap/fluent-reveal-effect
• FileWatcherEx - A wrapper of C# FileSystemWatcher for Windows: https://github.com/d2phap/FileWatcherEx

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

Props

Events

1. @validated

Occurs after the selected files validated.

Function(result: FsValidationResult, files: File[]): void

• result: validation result,
  • returns true if the file validation is valid, else
  • returns false or Error codes (string).
• 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.

License