[Vuejs]-Vuejs binding files for uploading

by

0👍

✅

uploaded files is binded to files.
Below code is my correct working code.

<div id="app">
      <p v-if="files.length">
          <ul>
            <li v-for="file in files">
                {{file.name}} <span v-if="file.success"> - . </span><span v-if="file.error"> - . </span>
                <span v-if="file.success || file.error">{{file.xhr.responseText}}</span>
            </li>
          </ul>
      </p>
  <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>
</div>
<script>
new Vue({
  el: '#app',
  data: function () {
    return {
      files: []
    }
  },
  components: {
    FileUpload: VueUploadComponent
  },
  methods: {
    inputFile: function (newFile, oldFile) {
      console.log('inputFile')
      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)
        }
      }
    },
    ....
</script>

Leave a comment