Support for React Native blob

I’ve seen many people complaining about issues when uploading files with React Native. The best solution today is to use fetch() which supports the blob generated in React Native, but it lacks progress. Libs such as rn-fetch-blob can’t be used in Expo since you’d need to eject.

Many libraries for React Native such as Firebase have upload method that has support for the React Native blob and it would be a great addition to Axios as well.

What I’d like to do is basically:

await Axios.post(url, reactNativeBlob, ...)

I’ve tried different methods with Axios, e.g. by creating FormData with the file details, such as uri, name and type, but then Axios tries to convert the file to base64 and upload it that way, which isn’t what I want.

I don’t know how React Native blobs are different from web blobs, but I’m really hoping that this could be supported in Axios.

[chinesedfan]

Axios won’t support it directly. But if someone finished it in a wrapper package, we can record it in our ECOSYSTEM.md.

[jamesaucode]

If anyone is still having trouble with working with React Native’s blob and axios, here’s a temporary work around that I have.

class RNBlob extends Blob {
  get [Symbol.toStringTag]() {
    return 'Blob';
  }
}

// then on the blob that you want to work with
axios.post('api', {
  data: new RNBlob([blob])
});

Because of how Axios determine whether an object is a blob (see: utils#147), it does a Object.prototype.call on the request body, but on React Native, calling Object.prototype.call on Blob returns [object Object] instead of [object Blob], so axios will simply JSON.stringify it as if it’s a generic javascript object. The above snippet will ‘trick’ axios into thinking it’s a Blob (which it is), and process it correctly.