m24-vue-upload-file

1.0.2 • Public • Published

Super simple File upload component with Vue.js

A super simple unstyled file upload component in Vue.js

Software License Packagist

  • 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>

Props

Name Type Default Required Description
acceptTypes String '' false HTML input accept types
multiple Boolean 0 false Should the upload accept one or multiple files

Events

Name Returns Description
files-uploaded array of files Returns an array with files added
file-removed array of files Returns an array of the remaining files

Contributing

Please see CONTRIBUTING for details.

License

The MIT License (MIT). Please see License File for more information.

Package Sidebar

Install

npm i m24-vue-upload-file

Weekly Downloads

3

Version

1.0.2

License

MIT

Unpacked Size

25.6 kB

Total Files

5

Last publish

Collaborators

  • neoglyph