Rn-fetch-blob: AppCrash when upload file from react native image picker

Created on 18 Mar 2020  路  3Comments  路  Source: joltup/rn-fetch-blob

Hi guys, I'm getting weird issue while using rn-fetch-blob to upload file from react-native image picker. Can you guys help to have a look at the issue.

  • React native version: 0.60.0
  • rn-fetch-blob version 0.12.0
    I'm using react-native-image-picker to pick an image. then use rn-fetch-blob to upload it. It keeps showing this error in xcode
    image
    Here is my code:
    const headers = { Authorization:bearer ${token}`,
    Instance: instanceId,
    'Content-Type': 'multipart/form-data',
    };
    const data = [
    {
    name: 'file',
    filename: file.filename,
    type: file.type,
    data: file.uri.replace('file://', ''), // tried with RNFetchBlob.wrap(file.uri), RNFetchBlob.wrap(file.origUrl), file.uri, file.origUrl, none of them work.
    },
    ];

const url = ${AppSettings.proxyUrl}${ENDPOINT.COMMON.GAME_UPLOAD_IMAGE};
return RNFetchBlob.fetch(
'POST',
url,
{
Authorization: bearer ${token},
'Content-Type': 'multipart/form-data',
},
data
)
.then(resp => {
console.log('resp', resp);
// ...
})
.catch(err => {
console.log('err', err);
// ...
});`

Most helpful comment

@baotoan1905 try this

        RNFetchBlob.wrap(
          Platform.OS === 'android'
            ? file.uri
            : file.uri.replace('file://', ''),
        ),

All 3 comments

@baotoan1905 try this

        RNFetchBlob.wrap(
          Platform.OS === 'android'
            ? file.uri
            : file.uri.replace('file://', ''),
        ),

Thanks iqbalfaisal, I figured out the issue, it was because of this
const headers = { Authorization: bearer ${token}`,
Instance: instanceId,
'Content-Type': 'multipart/form-data',
};

The instanceId should be string instead of number, I have to convert it to string, but it's weird that it doesn't show any error, instead it make app crash.
I figured out this issue by running app in android, in ios it keeps crashing, doesn't show any error.
Anyway, Thanks for your help.

@baotoan1905 try this

        RNFetchBlob.wrap(
          Platform.OS === 'android'
            ? file.uri
            : file.uri.replace('file://', ''),
        ),

thanks! this solved it for me! I've been looking for a while for the reason my multipart request didn't get sent to the server on iOS and I was also using react-native-image-picker to provide the file uri (on android it was working).

Was this page helpful?
0 / 5 - 0 ratings