How to access file upload status in Vue.js + axios, from another component?

Question

JavaScript

I have a service component for working with api (ApiManager.js) , it has a method for uploading files:

uploadImage(imagFormData) {
    return axios.post('https://apiurl/image', imagFormData, {
      headers: {
        "Authorization": "Client-ID"
      },
      onUploadProgress: uploadedEvent => {
        console.log('Upload proccess -> ', Math.round(uploadedEvent.loaded / uploadedEvent.total * 100) , '%' )
      }
    })
      .then(response => {
        console.log('uploaded resp ---> ', response);
      })
  }

And there is an UploadImageComponent.vue component in which this method is called:

import ApiManager from '@/services/ApiManager'

ApiManager.uploadImage(imagFormData).then(response =>{
   ...
})

With this architecture in the UploadImageComponent.vue component, how can I access the upload status?

Answer 1

onUploadProgress({loaded, total}) {
  const uploadProgress = Math.round(loaded / total * 100)
  
  store.commit('uploader/setProgress', uploadProgress)
}

export const uploader = {
  namespaced: true,
  state: {
    progress: 0
  },
  mutations: {
    setProgress(state, progress) {
      state.progress = progress
    }
  }
}

computed: {
  ...mapState('uploader', [
    'progress'
  ])
}

<template>
  <div>{{progress}}%</div>
</template>

Answer 2

You can throw an event and handle it