🔥[v6.0.x] Upload of live photos fails with "NativeFirebaseError: [storage/unknown] An unknown error has occurred"

[maximevaly]

Issue

Hi, I have an issue when uploading live photos from an iOS 13 device with the following libraries:

    "@react-native-community/async-storage": "1.6.2",
    "@react-native-community/cameraroll": "1.2.1",
    "@react-native-firebase/storage": "6.0.2",
    "react-native": "0.60.5",

Regular pictures work fine, and before upgrading from 0.59 to 0.60 live photos were ok as well. Here's a example of the code we use:

function upload(picture: Picture,
    onLoad: (taskSnapshot: FirebaseStorageTypes.TaskSnapshot) => any,
    onError: (error: any) => any,
    onSuccess: (taskSnapshot: FirebaseStorageTypes.TaskSnapshot) => any): void {
  const metadata = { contentType: 'image/jpg', cacheControl: 'max-age=31536000' }
  const userDirectoryRef = firebase.storage().ref('pictures').child(picture.userId);
  const pictureFileRef = monthDirectoryRef.child(picture.randomName);
  // turns 'ph://' into 'assets-library://', see https://github.com/facebook/react-native/issues/24185
  const localPath = transformUri(picture.uri);
  const uploadTask = pictureFileRef.putFile(localPath, metadata);
  uploadTask.on('state_changed', onLoad);
  uploadTask.then(onSuccess);
  uploadTask.catch(onError);
}

The upload fails with the following stacktrace:

NativeFirebaseError: [storage/unknown] An unknown error has occurred.
    at StorageUploadTask._beginTask (blob:http://localhost:8081/5e28705f-e7ec-4b57-ae36-be896f6c7cc0:175557:41)
    at StorageUploadTask.on (blob:http://localhost:8081/5e28705f-e7ec-4b57-ae36-be896f6c7cc0:175793:32)
    at StorageRepository.upload (blob:http://localhost:8081/5e28705f-e7ec-4b57-ae36-be896f6c7cc0:176087:22)
    at blob:http://localhost:8081/5e28705f-e7ec-4b57-ae36-be896f6c7cc0:175112:39
    at new Promise (blob:http://localhost:8081/5e28705f-e7ec-4b57-ae36-be896f6c7cc0:94698:9)
    at UploadFileService.uploadToServer (blob:http://localhost:8081/5e28705f-e7ec-4b57-ae36-be896f6c7cc0:175082:16)
    at UploadFileService._callee$ (blob:http://localhost:8081/5e28705f-e7ec-4b57-ae36-be896f6c7cc0:175036:31)
    at tryCatch (blob:http://localhost:8081/5e28705f-e7ec-4b57-ae36-be896f6c7cc0:27321:19)
    at Generator.invoke [as _invoke] (blob:http://localhost:8081/5e28705f-e7ec-4b57-ae36-be896f6c7cc0:27496:24)
    at Generator.prototype.<computed> [as next] (blob:http://localhost:8081/5e28705f-e7ec-4b57-ae36-be896f6c7cc0:27364:23)
    at blob:http://localhost:8081/5e28705f-e7ec-4b57-ae36-be896f6c7cc0:174996:69

Not sure if it's relevant but I had to downgrade the version of Protobuf to 3.9.2 because compilation was failing with 3.10.0.

---

Project Files

iOS

Click To Expand

ios/Podfile:

• I'm not using Pods
• I'm using Pods and my Podfile looks like:

platform :ios, '10.0'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

  project 'mainapp',
      'Debug' => :debug,
      'Beta' => :release,
      'Daily' => :release,
      'Production' => :release

target 'mainapp' do

  pod 'React-Core', :path => '../node_modules/react-native/React'
  pod 'React-cxxreact', :path => '../node_modules/react-native/ReactCommon/cxxreact'
  pod 'React-jsi', :path => '../node_modules/react-native/ReactCommon/jsi'
  pod 'React-jsiexecutor', :path => '../node_modules/react-native/ReactCommon/jsiexecutor'
  pod 'React-jsinspector', :path => '../node_modules/react-native/ReactCommon/jsinspector'
  pod 'React-DevSupport', :path => '../node_modules/react-native/React'
  pod 'React-RCTWebSocket', :path => '../node_modules/react-native/Libraries/WebSocket'
  pod 'React-RCTActionSheet', :path => '../node_modules/react-native/Libraries/ActionSheetIOS'
  pod 'React-RCTAnimation', :path => '../node_modules/react-native/Libraries/NativeAnimation'
  pod 'React-RCTBlob', :path => '../node_modules/react-native/Libraries/Blob'
  pod 'React-RCTNetwork', :path => '../node_modules/react-native/Libraries/Network'
  pod 'React-RCTImage', :path => '../node_modules/react-native/Libraries/Image'
  pod 'React-RCTLinking', :path => '../node_modules/react-native/Libraries/LinkingIOS'
  pod 'React-RCTSettings', :path => '../node_modules/react-native/Libraries/Settings'
  pod 'React-RCTText', :path => '../node_modules/react-native/Libraries/Text'
  pod 'React-RCTVibration', :path => '../node_modules/react-native/Libraries/Vibration'
  pod 'React', :path => '../node_modules/react-native'
  pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'
  pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
  pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
  pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
  pod 'Protobuf', '3.9.2'
  pod 'GoogleAnalytics'
  pod 'GoogleAppMeasurement', '6.1.1'
  pod 'react-native-splash-screen', :path => '../node_modules/react-native-splash-screen'
  pod 'rn-fetch-blob', :path => '../node_modules/rn-fetch-blob'
  pod 'RNFS', :path => '../node_modules/react-native-fs'
  pod 'ReactNativePermissions', :path => '../node_modules/react-native-permissions'
  pod 'ZendeskSDK', '3.0.2'
  pod 'RNFastImage', :path => '../node_modules/react-native-fast-image'
  pod 'SentryReactNative', :path => '../node_modules/react-native-sentry'
  pod 'Stripe'
  pod 'RNSVG', :path => '../node_modules/react-native-svg'
  pod 'RNGestureHandler', :podspec => '../node_modules/react-native-gesture-handler/RNGestureHandler.podspec'
  pod 'react-native-adjust', :path => '../node_modules/react-native-adjust'
  pod 'react-native-cameraroll', :path => '../node_modules/@react-native-community/cameraroll'
  use_native_modules!
end

post_install do |installer|
  installer.pods_project.targets.each do |target|
    if target.name == "React"
      target.remove_from_project
    end
  end

  installer.pods_project.targets.each do |target|
      target.build_configurations.each do |config|
          config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '10.0'
      end
  end
end

AppDelegate.m:

/**
 * Copyright (c) 2015-present, Facebook, Inc.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

#import "AppDelegate.h"
#import <Firebase.h>
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
#if __has_include(<React/RNSentry.h>)
#import <React/RNSentry.h> // This is used for versions of react >= 0.40
#else
#import "RNSentry.h" // This is used for versions of react < 0.40
#endif
#import "RNSplashScreen.h"
#import <FBSDKCoreKit/FBSDKCoreKit.h>

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  
  NSURL *jsCodeLocation;
  
  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];

  
  [FIRApp configure];
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"mainapp"
                                               initialProperties:nil
                                                   launchOptions:launchOptions];
  [RNSentry installWithRootView:rootView];

  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];
  [[FBSDKApplicationDelegate sharedInstance] application:application
                           didFinishLaunchingWithOptions:launchOptions];
  [RNSplashScreen show];
  return YES;
}


- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
  sourceApplication:(NSString *)sourceApplication annotation:(id)annotation {
  BOOL handledFB = [[FBSDKApplicationDelegate sharedInstance] application:application
                                                                  openURL:url
                                                        sourceApplication:sourceApplication
                                                              annotation:annotation
                    ];

  return handledFB;
}

@end

---

Android

I haven't tried on Android yet

---

Environment

Click To Expand

react-native info output:

$ react-native info
warn The following packages use deprecated "rnpm" config that will stop working from next release:
  - react-native-sentry: https://github.com/getsentry/react-native-sentry
  - rn-fetch-blob: https://npmjs.com/package/rn-fetch-blob
  - tipsi-stripe: https://github.com/tipsi/tipsi-stripe#readme
Please notify their maintainers about it. You can find more details at https://github.com/react-native-community/cli/blob/master/docs/configuration.md#migration-guide.
info Fetching system and libraries information...
System:
    OS: macOS Mojave 10.14.5
    CPU: (8) x64 Intel(R) Core(TM) i7-8559U CPU @ 2.70GHz
    Memory: 306.82 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.15.3 - ~/.nvm/versions/node/v10.15.3/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 6.4.1 - ~/.nvm/versions/node/v10.15.3/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.1, DriverKit 19.0, macOS 10.15, tvOS 13.0, watchOS 6.0
    Android SDK:
      API Levels: 26, 27, 28, 29
      Build Tools: 29.0.1
  IDEs:
    Android Studio: 3.4 AI-183.6156.11.34.5692245
    Xcode: 11.1/11A1027 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0
    react-native: 0.60.5 => 0.60.5

• Platform that you're experiencing the issue on:
  • iOS
  • Android
  • iOS but have not tested behavior on Android
  • Android but have not tested behavior on iOS
  • Both
• react-native-firebase version you're using that has this issue:
  • 6.0.1 & 6.0.2
• Firebase module(s) you're using that has the issue:
  • @react-native-firebase/storage
• Are you using TypeScript?
  • Y & 3.5.3

[stale]

Hello 👋, to help manage issues we automatically close stale issues.
This issue has been automatically marked as stale because it has not had activity for quite some time. Has this issue been fixed, or does it still require the community's attention?

This issue will be closed in 15 days if no further activity occurs.
Thank you for your contributions.

[maximevaly]

I didn't have the chance to try the latest release but looking at the commit history for the past month there doesn't seem to be a fix for this issue yet. I'll confirm that later this week.

[mikehardy]

Not much storage-related change here no, but you never know with the underlying SDK releases, iOS13 forced a lot of change in underlying pods, you might try a full update there (to 6.13.0 as of this typing) to see if it still reproduces

[alittletf]

@maximevaly were you able to fix this? I am running into issue right now

RN 0.61.4
RNF - app/storage 6.0.3
cameraroll - 1.3.0

[maximevaly]

@alittletf No sorry, for now my only solution was to stick to 0.59.

[alittletf]

@mikehardy I tried updated to @react-native-firebase/app & /storage to 6.2.0 and im currently on RN 0.61.4 and can confirm you are not able to upload live photos. Any ideas for a workaround?

EDIT: For anyone coming across this I managed to figure out a workaround for now. When a user selects a photo, I first figure out if the photo is a live photo. I look to see if it has a .mov extension in the filename property. If it does I then use the react-native-view-shot lib to take a screen grab of the photo and use that URI (which is a jpg) and then send on to firebase. Its very hacky, and I will remove it when fixed here but the solution does work in my use case.

^ @maximevaly this what I ended up doing for now

[mikehardy]

Hi there! Sorry, I'm not doing this personally so I don't have any experience - all the useful knowledge in this thread has come from you guys, and there hasn't even been the normal lower-level (versions, configuration etc) issues that I typically help fuzzbust through to get the real issues. If anyone can find where in the code the issue is, this seems like the crew that would provide a sketch for a "real solution" and a PR to do it - those sorts of things are integrated quickly at least, in my experience

[stale]

Hello 👋, to help manage issues we automatically close stale issues.
This issue has been automatically marked as stale because it has not had activity for quite some time. Has this issue been fixed, or does it still require the community's attention?

This issue will be closed in 15 days if no further activity occurs.
Thank you for your contributions.

[maximevaly]

As far as I know this has not been fixed.

[stale]

Hello 👋, to help manage issues we automatically close stale issues.
This issue has been automatically marked as stale because it has not had activity for quite some time. Has this issue been fixed, or does it still require the community's attention?

This issue will be closed in 15 days if no further activity occurs.
Thank you for your contributions.

[stale]

Hello 👋, to help manage issues we automatically close stale issues.
This issue has been automatically marked as stale because it has not had activity for quite some time. Has this issue been fixed, or does it still require the community's attention?

This issue will be closed in 15 days if no further activity occurs.
Thank you for your contributions.

[russellwheatley]

Hi @maximevaly. I've successfully uploaded an image from my device using version 13.4 whilst using the latest RNFB storage package 6.4.0. It also worked when downgrading to version 6.0.2. If I can't reproduce then I'm not sure how to debug. Is there any further context. What file are you trying upload? are you sure it is a jpeg type?

[maximevaly]

Hi @russellwheatley, thanks for looking into this.

I confirm that I’m using a jpeg, the issue is when that jpeg is a live photo. Here’s an example of a file for which the upload doesn’t work https://gofile.io/?c=a73M7a, and a few more test files https://gofile.io/?c=Yal15S (normal photos work fine)

$ file *
heic-live-photo.jpeg:   JPEG image data, Exif standard: [TIFF image data, big-endian, direntries=6, orientation=upper-right, xresolution=86, yresolution=94, resolutionunit=2], baseline, precision 8, 4032x3024, components 3
heic-normal-photo.jpeg: JPEG image data, Exif standard: [TIFF image data, big-endian, direntries=6, orientation=upper-right, xresolution=86, yresolution=94, resolutionunit=2], baseline, precision 8, 4032x3024, components 3
jpeg-live-photo.jpeg:   JPEG image data, Exif standard: [TIFF image data, big-endian, direntries=10, manufacturer=Apple, model=iPhone XS, orientation=upper-right, xresolution=150, yresolution=158, resolutionunit=2, software=13.3, datetime=2020:04:07 19:05:41], baseline, precision 8, 4032x3024, components 3
jpeg-normal-photo.jpeg: JPEG image data, Exif standard: [TIFF image data, big-endian, direntries=10, manufacturer=Apple, model=iPhone XS, orientation=upper-right, xresolution=150, yresolution=158, resolutionunit=2, software=13.3, datetime=2020:04:07 19:04:51], baseline, precision 8, 4032x3024, components 3

I tested all versions from 6.0.1 to 6.4.0 and they all show the same behavior. I also tried updating @react-native-community/async-storage and @react-native-community/cameraroll to their latest stable releases but the problem is the same.

Let me know if you need more information.

[russellwheatley]

Hi @maximevaley do you mind creating a reproducible repo for me as I'm failing to reproduce? Thank you.

[stale]

Hello 👋, to help manage issues we automatically close stale issues.
This issue has been automatically marked as stale because it has not had activity for quite some time. Has this issue been fixed, or does it still require the community's attention?

This issue will be closed in 15 days if no further activity occurs.
Thank you for your contributions.

[stale]

Hello 👋, to help manage issues we automatically close stale issues.
This issue has been automatically marked as stale because it has not had activity for quite some time. Has this issue been fixed, or does it still require the community's attention?

This issue will be closed in 15 days if no further activity occurs.
Thank you for your contributions.

[vjann]

I am also running into this problem, also only when trying to upload live photos. I'm using a uri that looks like this:
ph://CA96A638-B41D-4ABB-85AA-05E242B59560/L0/001
and have also tried converting it to other formats such as
assets-library://asset/asset.JPG?id=CA96A638-B41D-4ABB-85AA-05E242B59560&ext=JPG
trying all possible extension types. Any updates or workarounds? Thanks.

[vjann]

I'm back with a reproducible bug repo!

github link

To reiterate, the issue occurs only with live photos on the iphone. I used a real device, both iphone 5s (ios 12) and iphone 8 (ios 13).

[abhishrek]

I am also having this issue on iOS Simulator only.
Regular JPEG Photo Upload to Firebase Storage crashes with this error :

 WARN     Possible Unhandled Promise Rejection (id: 0):
Error: [storage/unknown] An unknown error has occurred.
NativeFirebaseError: [storage/unknown] An unknown error has occurred.
get@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:160221:42
http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:159495:42
tryCallTwo@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:6266:9
...

But it works fine on iPhone/Android phones itself.

Code

return new Promise((resolve, reject) => {
    const imageRef = storage().ref('images/123/456/789/0.jpeg')
    return imageRef.putFile('/Users/myname/Library/Developer/CoreSimulator/Devices/1234567/data/Containers/Data/Application/C558EBE/tmp/react-native-image-crop-picker/74C81EE11.jpg')
        .then(() => {
            console.log('[ FirebaseStorage ][ uploadImage ] ' , storagePath,  ' upload Success.')
            return imageRef.getDownloadURL();
        })
        .then((url) => {
            console.log('[ FirebaseStorage ][ uploadImage ] ' , storagePath, ' upload Success. url: ', url)
            resolve(url);
        })
        .catch((error) => {
            console.log('[ ERROR ] [ FirebaseStorage ][ uploadImage ]', storagePath, ' upload Failed : ', error.message)
            return reject(error);
        })
})

Package.json

    "@react-native-firebase/app": "^8.2.0",
    "@react-native-firebase/auth": "^8.2.0",
    "@react-native-firebase/firestore": "^7.4.3",
    "@react-native-firebase/functions": "^7.2.2",
    "@react-native-firebase/messaging": "^7.4.2",
    "@react-native-firebase/storage": "^7.2.2",
    "react": "16.11.0",
    "react-native": "0.62.2",

System Info

  System:
    OS: macOS 10.15.5
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 903.55 MB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 13.12.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.4 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.1 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.6, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK: Not Found
  IDEs:
    Android Studio: Not Found
    Xcode: 11.6/11E708 - /usr/bin/xcodebuild
  Languages:
    Java: 14.0.2 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.11.0 => 16.11.0 
    react-native: 0.62.2 => 0.62.2 
  npmGlobalPackages:
    *react-native*: Not Found

UPDATE:
I just realized that the storage googleapis are blocked by my laptop firewall.
So probably, this is the problem.
it's my company's laptop, that i am using for app development.
I dont have another mac, so i cant test this conclusion, but most likely this is it.

[mikehardy]

ok, sounds like it's resolved.

[vjann]

Firewalls are not the problem for me and I'm also guessing not a problem for the other people that in this thread, so sorry for opening this back up. Is there any updates on the reproduced bug that I linked in a previous comment? Thanks

[vjann]

@mikehardy Can you open this back up please? The issue, separate from what AbhiShrek had, was not resolved. Thanks.

[mikehardy]

@vjann can you open a new issue please? This was opened in 2019 and does not contain your project information for troubleshooting

[majirosstefan]

I am using:

"react-native": "0.63.4",
"@react-native-community/cameraroll": "^4.0.1"
"@react-native-firebase/storage": "^10.3.1".

I tried to upload files:
"IMG_0111.HEIC" with "uri" ph://CC95F08C-88C3-4012-9D6D-64A413D254B3/L0/001 ,
"IMG_0004.JPG" with "uri" ph://99D53A1F-FEEF-40E1-8BB3-7DD55A43C8B7/L0/001,
:IMG_0003.JPG" with "uri" ph://9F983DBA-EC35-42B8-8773-B597CF782EDD/L0/001
--> (I guess that these are the simulator defaults).

Using iOS simulator, uploading images ends in unknown-error. I did not try real devices nor Android yet.

[mikehardy]

@majirosstefan can you open a new issue please? This was opened in 2019 and does not contain your project information for troubleshooting

[rmindo]

Is it resolved?

[mikehardy]

@rmindo please read my last comment? We need a reproduction on a new issue with current versions before any progress will be made

[rmindo]

@mikehardy will open a new one. Thanks