I have a component with a file input and a progress bar from reactstrap. That component is importing a function that uploads a file to the server using an axios call to my node server. So I found a great tutorial on updating the progress bar from the Axios call. But that tutorial assumes the Axios call is in the same component as the progress bar, not being imported.

So in my component, here is the relavant code:

import React, { useEffect, useState } from 'react';
import { Progress } from 'reactstrap';
import { uploadFiles } from './SDSFunctions';
const [loaded, setLoaded] = useState(0);
    .then((res) => console.log(res))
    .catch((e) => console.log(e));
return (
<div className="form-group">
    <Progress max="100" color="success" value={loaded}>
        {Math.round(loaded, 2)}%

And then SDSFunctions.js:

import axios from 'axios';

const config = {
    onUploadProgress: function(progressEvent) {
        const percentCompleted = Math.round(
            (progressEvent.loaded * 100) /
    headers: {
        'Content-Type': 'multipart/form-data'

export const uploadFiles = (data) => {
    return axios
        .post('SDS/upload', data, config)
        .then((response) => {
            console.log('Files Uploaded!');
            return response;
        .catch((e) => {
            return Promise.reject(e);

Did you try passing onUploadProgress function as a callback?

No I didn&#39;t, I will try that and let you know what happens.