React-native-fetch-blob: Error: The network connection was lost.(…)

[chrbradley]

Hello,

I can't get an image uploaded to Cloudinary. When the upload is almost finished it gets interrupted and an error is returned:

err:  Error: The network connection was lost.(…)

Here are the particulars:

"react-native": "^0.38.0",
"react-native-fetch-blob": "^0.10.0",

    RNFetchBlob
    .config({timeout: 60000})
    .fetch(
      'POST',
      'https://api.cloudinary.com/v1_1/***/image/upload',
      {
        upload_preset: '***',
        'Content-Type': 'application/octet-stream'
      }, RNFetchBlob.wrap(testFile.uri))
    .uploadProgress((written, total) => {
      console.log('uploaded', written / total)
    })
    .then((res) => {
      console.log('res: ', res)
    })
    .catch((err) => {      console.log('err: ', err)
    })

I didn't see anything similar in the TS guide but I've been able to upload to the api using fetch. I tried .config({timeout: }). Low values, < 5000 or so, work, but larger values don't. The error typically appears just before upload completion or immediately after.

[wkh237]

@chrbradley , thanks for reporting the issue. Could you try adding this header and see if it works ?

```diff
RNFetchBlob
.config({timeout: 60000})
.fetch(
'POST',
'https://api.cloudinary.com/v1_1//image/upload',
{
upload_preset: '',
'Content-Type': 'application/octet-stream'

• 'Transfer-Encoding' : 'Chunked',
  }, RNFetchBlob.wrap(testFile.uri))
  .uploadProgress((written, total) => {
  console.log('uploaded', written / total)
  })
  .then((res) => {
  console.log('res: ', res)
  })
  .catch((err) => { console.log('err: ', err)
  })```

[chrbradley]

I've experimented with different timeout values including 60000. Larger
values don't help. The connection always closes right around 99%
completion. I can upload using fetch without issue.
On Sat, Dec 17, 2016 at 10:09 PM wkh237 [e-mail] wrote:

@chrbradley https://github.com/chrbradley , thanks for reporting the
issue. Could you try adding this header and see if it works ?

RNFetchBlob

.config({timeout: 60000})

.fetch(

  'POST',

  'https://api.cloudinary.com/v1_1/***/image/upload',

  {

    upload_preset: '***',

    'Content-Type': 'application/octet-stream'

• 'Transfer-Encoding' : 'Chunked',

  }, RNFetchBlob.wrap(testFile.uri))

  .uploadProgress((written, total) => {

  console.log('uploaded', written / total)

  })

  .then((res) => {

  console.log('res: ', res)

  })

  .catch((err) => { console.log('err: ', err)

  })```

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/wkh237/react-native-fetch-blob/issues/213#issuecomment-267800692,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AExvC0Qe6KV1PCVHqTFrSJeExrnOdXbLks5rJKP6gaJpZM4LNqWc
.

[wkh237]

@chrbradley , sorry about late responding. I've made some tests on Cloudinary upload API and can successfully upload a large image (~2MB) using multipart-formdata request.

    let task = RNFetchBlob.fetch(
      'POST',
      'https://api.cloudinary.com/v1_1/xeipsnjp/image/upload',
      {},
      [{
        name : 'file',
        filename : 'cat.png',
        data: RNFetchBlob.wrap(res.path()),
      }, {
        name : 'upload_preset', data: 'jrkbliez'
      }])

    task.uploadProgress((written, total) => {
      console.log('uploaded', written / total)
    })

    task.then((res) => {
      console.log('res: ', res)
    })
    .catch((err) => {
      console.log('err: ', err)
    })

here's the logs

Could not find information about how to useoctet-stream upload images, also when I use the code you provide, the request fails around 99% but it gives me different error message.

Could you help confirm this ? Thanks

[chrbradley]

@wkh237 I finally got an opportunity to try this and can confirm that it works. Thank You!

[ashusdn]

@wkh237 / @chrbradley ,

I have also got same error when uploading file, I am trying same way as describe above but after
uploaded 0.22847261926343237
Error: The request timed out.

Can you please provide me any solution regarding this.