Skip to content

Media24si/vue-file-upload

Repository files navigation

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.

About

A super-simple file upload component

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published