M24-vue-upload-file NPM

Super simple File upload component with Vue.js

A super simple unstyled file upload component in Vue.js

Vue.js (tested with 2.6.11).

Installation

npm install --save m24-vue-upload-file

Example

import Vue from 'vue'
import FileUpload from 'm24-vue-upload-file'

new Vue({
  el: '#app',
  data: {
    upload: {
      acceptTypes: 'image/*',
      multiple: false
    },
    files: [],
  },
  components: {
    FileUpload
  },
  methods: {
    filesAdded (fileArray) {
      this.files = fileArray
    },
    fileRemoved (fileArray) {
      this.files = fileArray
    },


    ...


    // Example of a file submit
    submitFiles (files) {
      const formData = new FormData()
      for (var i = 0; i < this.files.length; i++) {
        const file = this.files[i]
        formData.append('files[' + i + ']', file)
      }

      axios.post(this.submitEndpoint, formData, { headers: { 'Content-Type': 'multipart/form-data' } })
        .then(response => {
          // Upload
        })
        .catch(errors => {
          // Upload failes
        })
    },
  }
})

<body id="app">
  <file-upload :acceptTypes="upload.acceptTypes"
               :multiple="upload.acceptsMultiple"
               @files-uploaded="filesAdded"
               @file-removed="fileRemoved"></file-upload>
</body>