Popular posts

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;