search

invertase / react-native-firebase

🔥 A well-tested feature-rich modular Firebase implementation for React Native. Supports both iOS & Android platforms for all Firebase services.
https://rnfirebase.io
Other
11.68k stars 2.21k forks source link

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

Closed maximevaly closed 4 years ago

maximevaly commented 4 years ago

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: ```ruby 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`: ```objc /** * 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 #import #import #if __has_include() #import // 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 @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:** ```bash $ 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`

stale[bot] commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

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

alittletf commented 4 years ago

@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 commented 4 years ago

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[bot] commented 4 years ago

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 commented 4 years ago

As far as I know this has not been fixed.

stale[bot] commented 4 years ago

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] commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

stale[bot] commented 4 years ago

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] commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

ok, sounds like it's resolved.

vjann commented 4 years ago

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 commented 4 years ago

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

mikehardy commented 4 years ago

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

majirosstefan commented 3 years ago

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 commented 3 years ago

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

rmindo commented 3 years ago

Is it resolved?

mikehardy commented 3 years ago

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

rmindo commented 3 years ago

@mikehardy will open a new one. Thanks