Create FormData with image array and uploading using rn-fetch-blob in React-Native

Question

I'm using rn-fetch-blob library to upload some pictures to the server. But I'm getting different types of errors, such as no Boundary on Content-Type or errors with the FormData structure itself such as " of type NSMutableDictionary cannot be converted to NSString", I'm getting quite frustrated.

I got an image array like this:

var images = [
     {name 'pic1', data: RNFetchBlob.wrap(imagePathHere), type: 'image/jpeg'},
     {name 'pic2', data: RNFetchBlob.wrap(imagePathHere), type: 'image/jpeg'},
     {name 'pic3', data: RNFetchBlob.wrap(imagePathHere), type: 'image/jpeg'},
];

Then I create the FormData as follows:

  const formData = new FormData();
  formData.append('id', userId)   // <-- numeric type
  formData.append('pictures', images);

I'm doing the post request from RNFetchBlob with 'Content-Type': 'multipart/form-data' and I pass the formData directly to it.

Any ideas on what's wrong ? I read somewhere that FormData only allows strings or blobs, should I create a Blob from my array? How can I do that?

Thanks in advance.

score 5 · Accepted Answer · answered Feb 10 '19 at 13:23

After a lot of struggle, I found a solution in some other github about the structure I had to pass for parameters. This would be the correct one for my specific case.

   var reqData = [
      { name: 'id', data: response.data.id }
   ];

   this.state.images.forEach((image) => {
      reqData.push({
         data: image.imageFile,
         filename: image.fileName.split('.')[0] + '.jpg',
         name: 'pictures',
         type: image.type
      })
   });

But basically this would be an example of it:

var params = [
   { 
       name: 'id',
       data: 43
   },
   { 
       name: 'image',
       data: RNFetchBlob.wrap(imagePath),
       filename: 'image1.jpg',
       type: 'image/jpeg'
   },
   { 
       name: 'image',
       data: RNFetchBlob.wrap(imagePath),
       filename: 'image2.jpg',
       type: 'image/jpeg'
   },
];

Create FormData with image array and uploading using rn-fetch-blob in React-Native

1 Answers1