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

Created on 22 Oct 2019 · 25Comments · Source: invertase/react-native-firebase

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 - [x] 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 - [x] **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`

Needs Triage iOS Storage >= 6

Source

maximevaly

👍2

All 25 comments

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[bot] on 19 Nov 2019

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.

maximevaly on 1 Dec 2019

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

mikehardy on 1 Dec 2019

👍1

@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

alittletf on 10 Dec 2019

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

maximevaly on 11 Dec 2019

@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

alittletf on 30 Dec 2019

👍1

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

mikehardy on 30 Dec 2019

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

stale[bot] on 27 Jan 2020

As far as I know this has not been fixed.

maximevaly on 4 Feb 2020

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

stale[bot] on 3 Mar 2020

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

stale[bot] on 31 Mar 2020

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?

russellwheatley on 6 Apr 2020

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.

maximevaly on 9 Apr 2020

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

russellwheatley on 22 Apr 2020

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

stale[bot] on 20 May 2020

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

stale[bot] on 20 Jun 2020

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 on 3 Jul 2020

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).

vjann on 10 Jul 2020

👍1

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.

AbhiShrek on 19 Jul 2020

ok, sounds like it's resolved.

mikehardy on 21 Jul 2020

😕1

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 on 22 Jul 2020

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

vjann on 28 Jul 2020

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

mikehardy on 30 Jul 2020

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.