you are welcome Linh Nguyễn

Linh Nguyễn this should demonstrate what you asked about.

import axios from 'axios'; const baseURL = 'http://127.0.0.1:9000'; const axiosUploadHelper = async (configObject, api) => { const { setUploadProgress, ...requestConfig } = configObject; //destructure out the setUploadPress setter function try { let uploadProgress; const response = await axios({ ...requestConfig, baseURL, onUploadProgress: ( upload ) => { uploadProgress = Math.round((100 * upload.loaded) / upload.total); setUploadProgress(uploadProgress); //progress updating function from your component } }); return { data: response.data } } catch (err) { return { error: { status: err.response?.status, data: err.response?.data || err.message, }, } } } export default axiosUploadHelper; /****************************************************** */ //am assuming you have these two defined in two separate files /************************************************** */ /// This is how your component would look like while accesing the progress value /** You react commponent */ import { useCallback, useState } from 'react'; import { useUploadFilesMutation } from '//where you defined your endpoints'; const MyComponent = () => { const [uploadProgress, setUploadProgress] = useState(0); const [uploadPost, res] = useUploadFilesMutation(); const handleSubmit = useCallback( async (e) => { e.preventDefault(); try{ const response = await uploadPost({ url, //endpoint method, // post, put, patch, delete data, //your data to send to your backend setUploadProgress //a function update upload progress }); }catch(err){ console.log(err); } }) //now easily access your upload progress within the component console.log('progress', uploadProgress); return ( <div> <form onSubmit={handleSubmit}> {/* your form jsx here*/ } </form> </div> ) } export default MyComponent;

Linh Nguyễn, you won't access that value via the response object. You would need to keep track of this value in something like the global store ,from where you can easily access it or if you want something simple the consider tracking and setting the propress value using useState in your component.

Sorry about the unformatted code earlier, I have made some changes, hope that helps. Let me know if there is something still unclear

Hello, the setUploadProgress is just a function is used to dispatch an action to my store to update my upload progress value which in my case i was keeping in the redux store. Where it is being used You can just define your own logic right there depending on how you want to use that progress value