Blog Detail


A Vue js File selector with Validation and Drag-n-Drop cover image

arrow_back A Vue js File selector with Validation and Drag-n-Drop

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.


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

npm i vue-file-selector@latest


Please see the Demo project for a full example.

Declare the plugin

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

// then use it!
Use in Vue file
      :max-file-size="5 * 1024 * 1024"
      Select image files
export default {
  name: 'App',
  methods: {
    handleFilesValidated(result, files) {
      console.log('Validation result: ' + result);

    handleFilesChanged(files) {
      console.log('Selected files: ');


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.


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=“210241024” (only the files that ≤2 MB are allowed).
height Number NaN The height of droppable section.
validateFn Function -> Boolean () => true A custom validation function that returns a boolean value.


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:

Published at : 17-11-2021

Author : Rizwan Aslam
Rizwan Aslam

I am a highly results-driven professional with 12+ years of collective experience in the grounds of web application development especially in laravel, native android application development in java, and desktop application development in the dot net framework. Now managing a team of expert developers at Codebrisk.

Launch your project

Launch project