firebase / firebase/firebase-js-sdk

uploadBytes to storage with expo Image picker causing app to crash with no logs

Open
#5,848 156 comments 39 reactions 0 assignees View on GitHub
api: storage needs-attention question v9
Dominant language
TypeScript
Stars
5.1k
Forks
1k
Avg merge
2d 21h
Merged PRs (30d)
37

Description

### [REQUIRED] Describe your environment

* Operating System version: iOS 14.8.1
* Expo CLI 5.0.3 environment info:
System:
OS: macOS Sierra 10.12.6
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 12.16.2 - /usr/local/bin/node
npm: 6.14.4 - /usr/local/bin/npm
SDKs:
iOS SDK:
Platforms: iOS 11.0, macOS 10.13, tvOS 11.0, watchOS 4.0
npmPackages:
expo: ~44.0.0 => 44.0.1
react: 17.0.1 => 17.0.1
react-dom: 17.0.1 => 17.0.1
react-native: 0.64.3 => 0.64.3
react-native-web: 0.17.1 => 0.17.1
npmGlobalPackages:
expo-cli: 5.0.3
* Firebase SDK version: 9.6.1
* Firebase Product: storage (auth, database, storage, etc)

### [REQUIRED] Describe the problem

I am using Expo Image picker to select an image, convert to blob, then the Firebase 9.0 SDK function uploadBytes to add the image to my storage bucket. Around 60-80% of the time, the uploadBytes function causes my app to crash with no errors or logs recorded. When the app does not crash, the upload to Storage is successful.

Similar code and crashing symptoms as: https://stackoverflow.com/questions/70528896/react-native-expo-image-picker-upload-image-to-firebase-storage-v9-crash

#### Steps to reproduce:

#### Relevant Code:

```javascript
const uploadNewPhoto = async() => {
let result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.Images,
allowsEditing: false,
// aspect: [4, 3],
quality: 0.1,
});

if (!result.cancelled) {
// Convert URI to a Blob via XHTML request, and actually upload it to the network
const blob = await new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.onload = function() {
resolve(xhr.response);
};
xhr.onerror = function() {
reject(new TypeError('Network request failed'));
};
xhr.responseType = 'blob';
xhr.open('GET', result.uri, true);
xhr.send(null);
});
const thisUsersNewPostRef = ref(storageRef, 'users/img1' );

uploadBytes(thisUsersNewPostRef, blob).then((snapshot) => { // causes crash
console.log('Uploaded a blob or file!');
});
}
}

```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.