Use fetch to post a blob in react-native

Question

I'm trying to post a blob. It's definitely a blob. This isn't working in react-native though. I'm getting a red screen that says "PUT must have a request body". Well, I've put the blob in the request body.

createAttachment: function(url, blob) {
  var settings = {
    method: "PUT",
    headers: {
      'Accept': 'image/jpeg',
      'Content-Type': 'image/jpeg',
      'If-Match': '*',
    },
    body: blob
  };
  return fetch(url, settings)
}

Bulla

You sure you don't mean POST and not PUT? – Feune

either way I get the same error "POST must have a request body" – Bulla

actually POST gives a different error: "Exception creating JSON string: null" – Bulla

Here it seems like fetched blob data doesn't get marshaled or mapped to js memory across the bridge like strings are. Any ideas for a workaround? – Bulla

Does anyone have a working example? I'm struggling even to create the Blob object. – Flatiron

Answer 1

My project had same problem before, according to this issue perhaps, blob data is not supported in react native fetch API currently (Both in send and receive).

So I made a module myself ..

https://github.com/wkh237/react-native-fetch-blob

It works fine in our project, if you don't mind to take a look, it might helps.

Stringfellow

omg you're the creator of fetch-blob? i need your help!!! please check this post #44051339 – Parshall

Answer 2

Use rn-fetch-blob lib for this: https://github.com/joltup/rn-fetch-blob#user-content-upload-example--dropbox-files-upload-api

Nape

How I will create a blob from binary data using this package? – Tied

@Tied Method in link just takes base64 and sends it via http. You can google how to convert your data to appropriate format using js tools – Nape