uploadProgress not being triggered rn-fetch-blob

Question

Working on a react-native app, I'm having the following issue in both platforms (iOS and Android)

Environment:

"react-native": "^0.61.1",
"rn-fetch-blob": "^0.12.0"

I'm doing a multipart request to upload a video to the server. Given this request takes time I would like to show the progress to the user.

According to the library documentation, there is a uploadProgress callback: https://github.com/joltup/rn-fetch-blob#uploaddownload-progress but is not working on my side.

Here is my code:

RNFetchBlob.fetch(
    'POST',
    `${REACT_APP_API_DOMAIN}/upload/video`,
    {
      Authorization: `Bearer ${token}`,
      timestamp: `${timestamp}`,
      'Content-Type': 'multipart/form-data',
    },
    [
      {
        name: 'video',
        filename: `video.${file.split('.')[file.split('.').length - 1]}`,
        data: RNFetchBlob.wrap(file),
      },
    ],
  )
    .then(() => {
      Notifier.showNotification({
        title: 'The videos was successfully saved!',
        description: "We're processing it, your profile will be updated soon!",
        Component: NotifierComponents.Alert,
      });
      setStatus(statusEnum.PROCESSING);
      completeCallback();
    })
    .uploadProgress((written, total) => {
      console.log('uploaded', written / total);
    })
    .catch(err => {
      Notifier.showNotification({
        title: 'There was an error uploading the video',
        description: err.toString(),
        Component: NotifierComponents.Alert,
        componentProps: {
          alertType: 'error',
        },
      });
      setStatus(statusEnum.FAILED);
      completeCallback();
    });

Any thoughts?

Answer 1

A little late but I think you should put the uploadProgress before the then part, so it would be:

RNFetchBlob.fetch(...).uploadProgress(...).then(...).catch(...)

Edit:

RNFetchBlob.fetch(
            'POST',
            video.uploadUrl,
            {
              'content-type': 'multipart/form-data',
            },
            [
              {
                name: 'file',
                filename: video.fileName,
                data: RNFetchBlob.wrap(decodeURIComponent(video.uri.replace('file://', ''))),
              },
            ],
          )