'Inconsistent behavior from react-native-blob-util and fetch

I'm trying to call an API that takes an image and some data and returns json. I'm using react-native-blob-util with fetch. Problem is, the same code is working sometimes but failing in the next attempt - almost every alternate request is not submitting the data.

For replicating the issue, I have created the following code. It takes the **same** image file and parameters to make a fetch request. (I am testing on android)

A button to call fetch function:

        <TouchableOpacity
          style={styles.btn}
          onPress={() => {
            MatchFace();
          }}
          >
          <Text style={styles.btnText}>
            Call API
          </Text>
        </TouchableOpacity>

And then this is the function that calls API:

const MatchFace = async () => {
    setData([]);
  ReactNativeBlobUtil.fetch(
    'POST',
    'url_for_the_api',
    {
      'Content-Type': 'multipart/form-data',
      'Api-Key': 'api_key',
    },[
      { name : 'image', filename : 'profile.jpg', type:'image/jpg', data: ReactNativeBlobUtil.wrap(decodeURIComponent('file:///storage/emulated/0/Download/profile.JPG'))},
      { name : 'album_id', data : '2'},
    ]
  )
    .then((response) => response.json())
    .then((json) => setData(json))
    .catch((error) => console.error(error))
    .finally(() => console.log(data));
  }

Part of log

**No response case**
G:\react-native\FaceAttendance\Screens\stackOverFlow.js:52 []

**Case where I get response**
G:\react-native\FaceAttendance\node_modules\react-native\Libraries\LogBox\LogBox.js:173 Stream Closed
registerWarning @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\LogBox\LogBox.js:173
console.warn @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\LogBox\LogBox.js:71
overrideMethod @ G:\react-native\FaceAttendance\node_modules\react-devtools-core\dist\backend.js:2171
(anonymous) @ G:\react-native\FaceAttendance\node_modules\react-native-blob-util\fetch.js:15
emit @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\vendor\emitter\_EventEmitter.js:149
__callFunction @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:419
(anonymous) @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:116
__guard @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:370
callFunctionReturnFlushedQueue @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:115
(anonymous) @ RNDebuggerWorker.js:2

G:\react-native\FaceAttendance\node_modules\react-native\Libraries\LogBox\LogBox.js:173 Stream Closed
registerWarning @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\LogBox\LogBox.js:173
console.warn @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\LogBox\LogBox.js:71
overrideMethod @ G:\react-native\FaceAttendance\node_modules\react-devtools-core\dist\backend.js:2171
(anonymous) @ G:\react-native\FaceAttendance\node_modules\react-native-blob-util\fetch.js:15
emit @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\vendor\emitter\_EventEmitter.js:149
__callFunction @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:419
(anonymous) @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:116
__guard @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:370
callFunctionReturnFlushedQueue @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:115
(anonymous) @ RNDebuggerWorker.js:2

G:\react-native\FaceAttendance\node_modules\react-native\Libraries\Core\ExceptionsManager.js:149 Error: unexpected end of stream
    at G:\react-native\FaceAttendance\node_modules\react-native-blob-util\fetch.js:256
    at MessageQueue.__invokeCallback (G:\react-native\FaceAttendance\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:465)
    at G:\react-native\FaceAttendance\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:127
    at MessageQueue.__guard (G:\react-native\FaceAttendance\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:370)
    at MessageQueue.invokeCallbackAndReturnFlushedQueue (G:\react-native\FaceAttendance\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:126)
    at RNDebuggerWorker.js:2
reactConsoleErrorHandler @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\Core\ExceptionsManager.js:149
registerError @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\LogBox\LogBox.js:204
console.error @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\LogBox\LogBox.js:67
overrideMethod @ G:\react-native\FaceAttendance\node_modules\react-devtools-core\dist\backend.js:2171
eval @ G:\react-native\FaceAttendance\Screens\stackOverFlow.js:51
tryCallOne @ G:\react-native\FaceAttendance\node_modules\promise\setimmediate\core.js:37
(anonymous) @ G:\react-native\FaceAttendance\node_modules\promise\setimmediate\core.js:123
(anonymous) @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:248
_callTimer @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:112
_callReactNativeMicrotasksPass @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:166
callReactNativeMicrotasks @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:418
__callReactNativeMicrotasks @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:393
(anonymous) @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:135
__guard @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:370
flushedQueue @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:134
invokeCallbackAndReturnFlushedQueue @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:130
(anonymous) @ RNDebuggerWorker.js:2

G:\react-native\FaceAttendance\Screens\stackOverFlow.js:52 {num_faces: 1, num_recognized_faces: 1, num_unknown_faces: 0, recognized_faces: Array(1), unknown_faces: Array(0)}

I'm sure that API is performing correctly (tested from test apps on react, php and also postman). I'm possibly doing something wrong with the react-native filesytem.

Oh, one more input - my application needs to call this API in every few seconds when the app runs.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source