Phap Dieu Duong introduced a File selector Vue js component called vue-file-selector that supports drag-n-drop and validation. You can simply click the upload button and drop the files. It offers many validation options, like Maximum file size, Minimum file size, etc.

Installation

You’ve to run this command for the installation via npm.

npm i vue-file-selector@latest

Usage

Please see the Demo project for a full example.

Declare the plugin

// import the library
import FileSelector from 'vue-file-selector';

// then use it!
Vue.use(FileSelector);
Use in Vue file
<template>
  <div>
    <file-selector
      accept-extensions=".jpg,.svg"
      :multiple="true"
      :max-file-size="5 * 1024 * 1024"
      @validated="handleFilesValidated"
      @changed="handleFilesChanged"
    >
      Select image files
    </file-selector>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    handleFilesValidated(result, files) {
      console.log('Validation result: ' + result);
    },

    handleFilesChanged(files) {
      console.log('Selected files: ');
      console.table(files);
    },
  },
};
</script>

Slots

Props

Events

1. @validated

Occurs after the selected files are validated.

Function(result: String | Boolean, files: FileList): 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: FileList): void

• files: list of files validated.

Github source: https://github.com/d2phap/vue-file-selector