Vue upload file

upload-file.js

const { computed, reactive } = vueCompositionApi

var UploadFile = new Vue({
  name: 'UploadFile',
  delimiters: ['[[', ']]'],

  setup (initProps, setupContext) {
    const refs = setupContext.refs

    const maxSizeMB = (FILE_UPLOAD_MAX_MEMORY_SIZE / 1024 / 1024).toFixed(0)

    const state = reactive({
      filename: 'select file',
      file: null,
      isEmpty: 'no',
      uploading: false,
      job: null,
      progress: 0
    })

    const fileSize = computed(() => state.file.size)
    const fileSizeMB = computed(() => (fileSize.value / 1024 / 1024).toFixed(1))
    const styleProgress = computed(() => ({ width: `${state.progress}%` }))

    const changeFile = (e) => {
      state.file = e.target.files[0]
      const ext = state.file.name.split('.').pop().toLowerCase()
      if (state.file && ['xls', 'csv', 'xlsx'].includes(ext)) {
        state.filename = state.file.name
      } else {
        state.file = null
        state.filename = 'select file'
      }
    }

    const submitNotEmpty = async () => {
      if (!state.file) {
        // hack to run bootstrap js validation
        // TODO: refactor the code and get rid off jquery and bootstrap event handlers
        refs.submitfile.value = null
        return
      }

      const formData = new FormData()
      formData.append('file', state.file)

      if (fileSize.value > FILE_UPLOAD_MAX_MEMORY_SIZE) {
        alert(`The file is ${fileSizeMB.value}MB! Max size is ${maxSizeMB}MB`)
        clear()
        return
      }

      if (fileSize.value < 200 * 1024) {
        const headers = {
          'Content-Type': 'multipart/form-data',
        }
        try {
          const resp = await axios.post('/files/is-empty', formData, { headers })
          if (resp.data.value) {
            state.isEmpty = 'yes'
            const message = 'This file contains no records. Click OK to proceed with a Nil Return.'
            if (confirm(message)) {
              submit()
            }
          } else {
            state.isEmpty = 'no'
            submit()
          }
        } catch (e) {
          console.error(e)
          submit()
        } finally {
          clear()
        }
      }
    }
    const clear = () => {
      state.filename = 'select file'
      state.file = null
      state.isEmpty = 'no'
      state.isUploading = false
    }

    const updateProgress = async () => {
      const { data } = await axios.get('/files/progress')
      state.progress = data.process_percent
    }

    const checkProgress = (tempo) => {
      let setIntervalRef = setInterval(() => {
        updateProgress()
        if (state.progress == 100) {
          clearInterval(setIntervalRef)
        }
      }, tempo)
    }

    const submit = () => {
      refs.form.submit()
      checkProgress(500)
    }

    return {
      state,
      styleProgress,
      changeFile,
      submitNotEmpty,
    }
  },
}).$mount('#upload-file')