onUploadProgress event is not being fired - React Native

[halid96]

Describe the bug

onUploadProgress event is not firing now.

I tried it with both 1.51 and 1.3.4 version, not working.

But I know that 1.3.4 was working, so the problem is related to another package probably, this can be React Native prob, or Expo.

console.log() not fires...

        ```
       const response = await axios.post(apiUrl, formData, {
            headers: {
                'Content-Type': 'multipart/form-data',
                'Accept': 'application/json',
            },
            onUploadProgress: function ({ loaded, total, progress, bytes, estimated, rate, upload = true }) {
                let percentCompleted = (progress * 100).toFixed(0);
                console.log('percentCompleted', percentCompleted);
                uploadPercentCompleted.current = percentCompleted;
            },
            withCredentials: true,
        })
        ```

To Reproduce

No response

Code snippet

No response

Expected behavior

No response

Axios Version

1.5.1

Adapter Version

No response

Browser

No response

Browser Version

No response

Node.js Version

No response

OS

No response

Additional Library Versions

"react": "18.2.0",
"react-native": "0.72.3",
"expo": "^49.0.6",

Additional context/Screenshots

No response

[deagwon97]

My app is also experiencing the same issue. I just confirmed that it works well in version 1.5.0

[Youngemmy5956]

console.log('Before axios.post is called'); // Check if this log statement is reached

const response = await axios.post(apiUrl, formData, { headers: { 'Content-Type': 'multipart/form-data', 'Accept': 'application/json', }, onUploadProgress: function ({ loaded, total, progress, bytes, estimated, rate, upload = true }) { let percentCompleted = (progress * 100).toFixed(0); console.log('percentCompleted', percentCompleted); uploadPercentCompleted.current = percentCompleted; }, withCredentials: true, });

console.log('After axios.post is called'); // Check if this log statement is reached

[teckbeng-payboy]

any fixes for this? mine will just straight show 100 for the percentageValue

[zsomborgellerfi]

@halid96 I am having the same problems with React native, did you manage to find a workaround for this?

[suhaotian]

Maybe migrate to xior?

xior similar API with axios, use fetch and plugins support, more liteweight.

Here is the example of upload file with progress plugin support(not real progress, simulated):

https://github.com/suhaotian/xior?tab=readme-ov-file#upload-file

Any questions or feedback please feel free to create issue

[flygomel]

same

[tamagutchi]

+1

does not work with 1.5.0 nor with 1.6.8

[l364cyv1]

It does work on production build (v1.6.8), but on expo dev client build it does not

[igorpimentel23]

not working on 1.6.8 on expo dev build but it works on production build

[UmarbekSaidov]

My app is also experiencing the same issue. I just confirmed that it works well in version 1.5.0

it worked fine for me in the same version

Example Code

[Neiso]

I confirm that it does not work with expo:

    "expo": "50",
    "react": "18.2.0",
    "react-native": "0.73.6",
     "axios": "1.7.4",

with snippet:

  const uploadImage = async (image: Image): Promise<string | false> => {
    try {
      const uri = getUri(path)
      const imagesFilePath = Platform.OS === 'ios' ? image.uri.replace('file://', '') : uri;

      const formData = new FormData();
      formData.append('image', {
        uri: imagesFilePath,
        type: image.mimeType,
        name: image.fileName,
      });

      const res = await axios.put(`${URI}`, formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
        // Never gets fired
        onUploadProgress: (progressEvent) => {
          const progress = Math.round((progressEvent.loaded / (progressEvent.total || 1)) * 100);
          setProgress(progress)
        }
      })

      // Successfully uploaded the file 
      return res.data
    } catch (err) {
      // ...
    }
  }