Skip to content

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

Open
@sejaljhawer

Description

@sejaljhawer

[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:

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!');
              });
  }
}

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions