• Review the documentation: https://facebook.github.io/react-native

-> Nowhere in the document its mentioned blob is not supported as such, but the app crashes when the blob is uploaded

• Search for existing issues: https://github.com/facebook/react-native/issues

-> There was an issue raised by a guy called 'Bhavuk Jain' and it's marked as 'closed' due to insufficient information. And the issue number is - "#20895"

• Use the latest React Native release: https://github.com/facebook/react-native/releases
  -> I am using the latest version of the React-Native and the version number is -
  "react-native-cli: 2.0.1", "react-native: 0.56.1"

Environment:-

React Native Environment Info:
System:
OS: macOS High Sierra 10.13.4
CPU: x64 Intel(R) Core(TM) i7-7660U CPU @ 2.50GHz
Memory: 3.75 GB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.3.0 - /usr/local/bin/node
npm: 6.1.0 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
Android SDK:
Build Tools: 23.0.1, 25.0.0, 25.0.2, 26.0.1, 26.0.2, 27.0.3, 28.0.0
API Levels: 22, 23, 24, 25, 26, 27
IDEs:
Android Studio: 3.1 AI-173.4819257
Xcode: 9.4/9F1027a - /usr/bin/xcodebuild
npmPackages:
react: ^16.4.1 => 16.4.1
react-native: ^0.56.1 => 0.56.1
npmGlobalPackages:
react-native-cli: 2.0.1
react-native-git-upgrade: 0.2.7

Description

1. I am trying to upload a JPEG image to my server using React Native iOS app and when I do this the app crashes with the below error.

ExceptionsManager.js:84 Exception '*** -[__NSPlaceholderDictionary initWithObjects:forKeys:count:]: attempt to insert nil object from objects[0]' was thrown while invoking sendRequest on target Networking with params (
{
data = {
blob = {
blobId = "bdd6c6d8-9d37-4ed4-9c11-b2e19374733b";
offset = 0;
size = 206591;
type = "image/jpeg";
};
trackingName = unknown;
};

Reproducible Demo

1. I have a method to select the image from Camera Roll using ImagePicker. Code for that is as below

selectImage(){

ImagePicker.showImagePicker(options, (response) => {
console.log('Response = ', response);

if (response.didCancel) {
console.log('User cancelled image picker');
}
else if (response.error) {
console.log('ImagePicker Error: ', response.error);
}
else {
let source = { uri: response.uri };
this.setState({
imageSource: source,
data:response.data
});
}
});

}

2. Once the Image is selected I have one more method called UploadImage and what this does is.
   -> Given the data in base64 format.
   -> Then I am converting this base64 data to blob
   -> And uploading the image to server using ReactNative SDK of our product.
   -> Internally this SDK will make a POST call to the server to upload.

Code is as below:

uploadImage(collectionId, fileName, url, data) {
return this._getCollection(collectionId)
.then(collection => {
var object = new mcs.StorageObject(collection);
object.setDisplayName(fileName);
var blobImg = this.b64toBlob(data, 'image/jpeg');
object.loadPayload(blobImg, 'image/jpeg');
return this._postObject(collection, object);
});
}

Method to convert base64 data to blob:

b64toBlob(b64Data, contentType, sliceSize) {
contentType = contentType || '';
sliceSize = sliceSize || 512;

var byteCharacters = atob(b64Data);
var byteArrays = [];

for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
var slice = byteCharacters.slice(offset, offset + sliceSize);

var byteNumbers = new Array(slice.length);
for (var i = 0; i < slice.length; i++) {
  byteNumbers[i] = slice.charCodeAt(i);
}

var byteArray = new Uint8Array(byteNumbers);

byteArrays.push(byteArray);

}

var blob = new Blob(byteArrays, {type: contentType});
return blob;
}