uploadProgress callback doesn't fire.

[devloop11]

Hi everyone,

• react-native - 0.76.3
• expo - 52.0.11
• react-native-blob-util - 0.21.1

Platform: iOS

I faced an issue recently with uploading the progress bar on iOS simulator. The file was uploaded successfully but uploadProgress did not fire at all.

Here is a code of request service:

ReactNativeBlobUtil
        .fetch("POST", formattedUrl,{
        Accept: "application/json",
        "Content-Type": "multipart/form-data",
      }, [
          {
            filename: file.fileName,
            name: "file",
            type: file.mimeType,
            data: ReactNativeBlobUtil.wrap(formatedPath),
          },
        ])
        .uploadProgress({ interval: 500 }, (sent, total) => {
          console.log(sent, total);
          params?.onUploadCallback && params.onUploadCallback({ total, sent });
        })
        .then((response) => {
          /// handling response
       })

After digging deeply I found that native iOS ReactNativeBlobUtilRequest function was not called at all. - (void) URLSession:(NSURLSession *)session task:(NSURLSessionTask *)task didSendBodyData:(int64_t)bytesSent totalBytesSent:(int64_t)totalBytesWritten totalBytesExpectedToSend:(int64_t)totalBytesExpectedToWrite

I could fix it by calling config method with {IOSBackgroundTask: true}. If I called it with false value the issue appeared again.

ReactNativeBlobUtil.config({ IOSBackgroundTask: true })
        .fetch({....rest of the code})

It needs to be marked in the uploading progress section because I spent almost a day to fix it. This is the only way to get uploading progress because Axios and XMLHttpRequest don't work for mobile.

[akintolafemi]

Hello. If you're using expo, a nice workaround is to use Expo FileSystem. And implement as below

import * as FileSystem from "expo-file-system";

const task = FileSystem.createUploadTask(
    SERVER_URL,
    LOCAL_FILE_URL,
    {
      fieldName: FIELD_NAME_OF_THE_FILE_IN_REQUEST,
      httpMethod: "POST",
      uploadType: FileSystem.FileSystemUploadType.MULTIPART,
      mimeType: MIMETYPE,
      headers: {},
      parameters: {...OTHER PARAMS IN REQUEST},
    },
    (progressData) => {
      const sent = progressData.totalBytesSent;
      const total = progressData.totalBytesExpectedToSend;
      const progress = sent / total;
      onUpload(Number(progress.toFixed(2)) * 100);
    },
  );
const request = await task.uploadAsync();

const response = request?.body //response from your backend server