Rn-fetch-blob: Exception in HostFunction: Malformed calls from JS: field sizes are different

[LeonardoMoliveira]

I'm trying to upload a JPEG image using react-native-image-picker which returns me a URI.
When I call RNFetchBlob.fetch() it returns this error

Error

Error: Exception in HostFunction: Malformed calls from JS: field sizes are different. [[16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,28,18],[5,4,5,4,4,4,4,4,7,8,8,8,8,8,9,8,9,9,3,11,0],[[673,{"style":{"transform":430,"right":655,"opacity":271},"type":"style"}],[271,673],[655,{"input":[270,20],"op":"multiply","type":"op"}],[270,655],[20,655],[655,673],[430,673],[673,674],[654,277],[653,654],[271,653],[635,653],[270,635],[20,635],[635],[430,653],[653],[654],[674,277],[187,100,1588864064469,false]],3220]

Code / Redux Saga

function* updateAvatar({ payload }) {
    if (!payload) {
      yield call(api.delete, '/avatar');
      yield put(updateAvatarSuccess());
      return;
    }

    const response = yield call(
      RNFetchBlob.fetch,
      'POST',
      `${config.api}/avatar`,
      {
        'Content-Type': 'multipart/form-data',
        ...api.defaults.headers,
      },
      [
        {
          name: 'file',
          filename: 'avatar.jpg',
          type: 'image/jpeg',
          data: RNFetchBlob.wrap(payload.uri),
        },
      ]
    );

    yield put(updateAvatarSuccess(response.json().avatar));

I can't upload files using new FormData() passing { name: ..., uri: ... } as many tutorials says, I must send a binary file as this lib does. Thank you.

[apostolou]

same issue for me when debugging on ios. Any ideas ?

[Vchouliaras]

Hey guys any updates on this one? The same issue for me as well ...

[mtshv]

same issue on iOS

[etsraphael]

Same issue on android

[LeonardoMoliveira]

I figure out this happens only using yield call() of Redux Saga

the solution for me was:

    const response = yield call(() => {
      return new Promise((resolve, reject) => {
        RNFetchBlob.fetch(
          'POST',
          `${config.api}/avatar`,
          {
            ...api.defaults.headers,
            'Content-Type': 'multipart/form-data',
          },
          [
            {
              name: 'file',
              filename: 'avatar.jpg',
              data: payload,
            },
          ]
        )
          .then(resolve)
          .catch(reject);
      });
    });

someone know why this happens?