upload-mixins.js

import { MAX_FILE_SIZE } from '@/upload-config'
import { uploadDocument } from '@/api/documents'
import { LoadingBar } from 'iview'

const STATUS_INITIAL = 0
const STATUS_SAVING = 1
const STATUS_SUCCESS = 2
const STATUS_FAILED = 3

const prepareFiles = (fieldName, files) => {
  let formData = new FormData()

  // append the files to FormData
  for (let file of files) {
    if (file.size < MAX_FILE_SIZE) {
      formData.append(fieldName, file, file.name)
    }
  }
}

export const UploadMixin = {
  computed: {
    initial() {
      return this.currentStatus === STATUS_INITIAL
    },

    saving() {
      return this.currentStatus === STATUS_SAVING
    },

    success() {
      return this.currentStatus === STATUS_SUCCESS
    },

    failure() {
      return this.currentStatus === STATUS_FAILED
    }
  },

  methods: {
    filesChange(fieldName, files) {
      if (!files.length) return

      LoadingBar.start()

      const formData = prepareFiles(fieldName, files)
      this.currentStatus = STATUS_SAVING

      uploadDocument(formData)
                    .then(this.uploadDone)
                    .catch(this.uploadErr)
    },

    uploadDone() {
      LoadingBar.finish()
      this.currentStatus = STATUS_SUCCESS
    },

    uploadErr(error) {
      LoadingBar.error()
      this.uploadError = error
      this.currentStatus = STATUS_FAILED
    },

    deleteDocument() {
      // TODO: Delete
    },
    
    cleanup() {
      // reset form to initial state
      this.currentStatus = STATUS_INITIAL
      this.uploadError = null
    }
  }
}