rn-fetch-blob Error: RNFetchBlob.fetchBlobForm failed to create request body

Question

async postFileUpload(payload) {
    const rnfetchfile = RNFetchBlob.wrap(payload.uri);
    try {
    console.log(
        'POST',
        'https://******.***.**/******/***/upload_*******_file',
        {
          ...this.config,
          'Content-Type': 'multipart/form-data',
        },
        [
          // element with property `filename` will be transformed into `file` in form data
          {
            name: 'files',
            filename: payload.name,
            data: rnfetchfile.replace('file://file:///', 'file://'),
          },
        ],
      );
      const res = await RNFetchBlob.fetch(
        'POST',
        'https://******.***.**/******/***/upload_*******_file',
        {
          ...this.config,
          'Content-Type': 'multipart/form-data',
        },
        [
          // element with property `filename` will be transformed into `file` in form data
          {
            name: 'files',
            filename: payload.name,
            data: rnfetchfile.replace('file://file:///', 'file://'),
          },
        ],
      );
    const response = JSON.parse(res.data);
      console.log('api upload adpostimage', response);
      return response;
    } catch (err) {
      console.log('postFileUpload', err.response, err);
      Toast.show(err.response.data.message, Toast.SHORT);
      throw err.response.data;
    }

res throws error in console messages are

POST https://******.***.**/******/***/upload_*******_file {Content-Type: "multipart/form-data", Authorization: "Bearer ******.***.*****"} 
[{…}]
0:
name: "files"
filename: "*****.pdf"
data: "RNFetchBlob-file://Users/********/tmp/*****/B****.pdf"}

postFileUpload undefined Error: RNFetchBlob.fetchBlobForm failed to create request body
at index.js:313
at MessageQueue.__invokeCallback (MessageQueue.js:483)
at MessageQueue.js:135
at MessageQueue.__guard (MessageQueue.js:384)
at MessageQueue.invokeCallbackAndReturnFlushedQueue (MessageQueue.js:134)
at debuggerWorker.js:69

I am trying to upload a file using rn-fetch-blob and some crazy things happened rnfetchfile.replace('file://file:///', 'file://'), because of file://file/// outputting which didn't seem right I think this like mostly ios problem please help me out guys

Try replacing the file://file:// to '' an empty string.. rnfetchfile.replace('file://file:///', '') — Abhishek Ghosh
– Abhishek Ghosh, Commented Feb 17, 2020 at 17:45

Reza Babaei · Accepted Answer · 2020-05-01 13:05:33Z

22

as here said just use decodeURIComponent(uri)

this is my code :

const realPath = Platform.OS === 'ios' ? uri.replace('file://', '') : uri;

const data = [
  {
     name: 'file',
     filename,
     type,
     data: RNFetchBlob.wrap(decodeURIComponent(realPath)),
  },
  {name: 'bla', data: 'bla'}
]

answered May 1, 2020 at 13:05

Reza Babaei

1,0751 gold badge15 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ravi Over a year ago

Thank you very much! This should be marked as the correct answer.

Rahul Shakya · Accepted Answer · 2020-02-23 09:27:34Z

0

Try replacing the file://file:// to '' an empty string..

rnfetchfile.replace('file://file:///', '')

– @Abhishek Ghosh commented is a need trick which will work but the file will not be available in the uri.. your uploaded file wont open

I tried doing

data: decodeURIComponent(rnfetchfile.replace('file://file:///', 'file:///')

and it worked hope this helps

edited Feb 23, 2020 at 9:27

answered Feb 23, 2020 at 9:14

Rahul Shakya

1,4251 gold badge19 silver badges17 bronze badges

Collectives™ on Stack Overflow

rn-fetch-blob Error: RNFetchBlob.fetchBlobForm failed to create request body

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related