Drag'n'drop Multifile Upload Component For Vue

Install & Download:

# Vue 2
$ npm i vue-upload-component
# Vue 3
$ npm i vue-upload-component@next

Description:

A lightweight and elegant file upload component for Vue.js, supports drag and drop upload, directory upload, chunk upload, image crop, and much more.

How to use it:

1. Import and register the component.

import VueUploadComponent from 'vue-upload-component'
app.component('file-upload', VueUploadComponent)

2. Create a simple file upload component in your app.

<ul>
  <li v-for="file in files">{{file.name}} - Error: {{file.error}}, Success: {{file.success}}</li>
</ul>
<file-upload
  ref="upload"
  v-model="files"
  post-action="/post.method"
  put-action="/put.method"
  @input-file="inputFile"
  @input-filter="inputFilter"
>
  Upload file
</file-upload>
<button v-show="!$refs.upload || !$refs.upload.active" @click.prevent="$refs.upload.active = true" type="button">Start upload</button>
<button v-show="$refs.upload && $refs.upload.active" @click.prevent="$refs.upload.active = false" type="button">Stop upload</button>

new Vue({
  el: '#app',
  data: function () {
    return {
      files: []
    }
  },
  components: {
    FileUpload: VueUploadComponent
  },
  methods: {
    /**
     * Has changed
     * @param  Object|undefined   newFile   Read only
     * @param  Object|undefined   oldFile   Read only
     * @return undefined
     */
    inputFile: function (newFile, oldFile) {
      if (newFile && oldFile && !newFile.active && oldFile.active) {
        // Get response data
        console.log('response', newFile.response)
        if (newFile.xhr) {
          //  Get the response status code
          console.log('status', newFile.xhr.status)
        }
      }
    },
    /**
     * Pretreatment
     * @param  Object|undefined   newFile   Read and write
     * @param  Object|undefined   oldFile   Read only
     * @param  Function           prevent   Prevent changing
     * @return undefined
     */
    inputFilter: function (newFile, oldFile, prevent) {
      if (newFile && !oldFile) {
        // Filter non-image file
        if (!/\.(jpeg|jpe|jpg|gif|png|webp)$/i.test(newFile.name)) {
          return prevent()
        }
      }
      // Create a blob field
      newFile.blob = ''
      let URL = window.URL || window.webkitURL
      if (URL && URL.createObjectURL) {
        newFile.blob = URL.createObjectURL(newFile.file)
      }
    }
  }
});

3. Available component props.

inputId: {
  type: String,
},
name: {
  type: String,
  default: 'file',
},
accept: {
  type: String,
},
capture: {
},
disabled: {
  default: false,
},
multiple: {
  type: Boolean,
  default: false,
},
maximum: {
  type: Number,
},
addIndex: {
  type: [Boolean, Number],
},
directory: {
  type: Boolean,
},
createDirectory: {
  type: Boolean,
  default: false
},
postAction: {
  type: String,
},
putAction: {
  type: String,
},
customAction: {
  type: Function as PropType<(file: VueUploadItem, self: any) => Promise<VueUploadItem>>
},
headers: {
  type: Object as PropType<{[key:string]: any}>,
  default:() => {
    return {}
  },
},
data: {
  type: Object as PropType<{[key:string]: any}>,
  default:() => {
    return {}
  },
},
timeout: {
  type: Number,
  default: 0,
},
drop: {
  default: false,
},
dropDirectory: {
  type: Boolean,
  default: true,
},
size: {
  type: Number,
  default: 0,
},
extensions: {
  type: [RegExp, String, Array] as PropType<RegExp| string| string[]>,
  default: () => {
    return []
  },
},
modelValue: {
  type: Array as PropType<VueUploadItem[]>,
  default:() => {
    return []
  },
},
thread: {
  type: Number,
  default: 1,
},
// Chunk upload enabled
chunkEnabled: {
  type: Boolean,
  default: false
},
// Chunk upload properties
chunk: {
  type: Object as PropType<{headers?: {[key:string]: any}; action?: string; minSize?: number; maxActive?: number; maxRetries?: number; handler?: any;}>,
  default: (): ChunkOptions => {
    return CHUNK_DEFAULT_OPTIONS
  }
}