putFile error

[redpandatronicsuk]

Issue

When uploading a file using putFile it produces this error:

{ userInfo: null,
  framesToPop: 1,
  column: 26,
  line: 2369,
  nativeStackIOS:
   [ '0   myditation                          0x0000000108fbc4c6 RCTJSErrorFromCodeMessageAndNSError + 134',
     '1   myditation                          0x0000000108efd003 __41-[RCTModuleMethod processMethodSignature]_block_invoke_2.218 + 179',
     '2   myditation                          0x0000000109934cad -[RNFirebaseStorage promiseRejectStorageException:error:] + 1101',
     '3   myditation                          0x00000001099330a1 __74-[RNFirebaseStorage addUploadObservers:uploadTask:path:resolver:rejecter:]_block_invoke.472 + 193',
     '4   myditation                          0x0000000108bf6a24 __50-[FIRStorageObservableTask fireHandlers:snapshot:]_block_invoke_2 + 36',
     '5   libdispatch.dylib                   0x00000001163d77ab _dispatch_call_block_and_release + 12',
     '6   libdispatch.dylib                   0x00000001163d87ec _dispatch_client_callout + 8',
     '7   libdispatch.dylib                   0x00000001163e38cf _dispatch_main_queue_callback_4CF + 628',
     '8   CoreFoundation                      0x000000011551bc99 __CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE__ + 9',
     '9   CoreFoundation                      0x00000001154dfea6 __CFRunLoopRun + 2342',
     '10  CoreFoundation                      0x00000001154df30b CFRunLoopRunSpecific + 635',
     '11  GraphicsServices                    0x000000011784da73 GSEventRunModal + 62',
     '12  UIKit                               0x0000000110e99057 UIApplicationMain + 159',
     '13  myditation                          0x000000010830c34f main + 111',
     '14  libdyld.dylib                       0x0000000116455955 start + 1' ],
  code: 'storage/unknown',
  sourceURL: 'http://localhost:19002/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false&assetPlugin=*******%2Fnode_modules%2Fexpo%2Ftools%2FhashAssetFiles',
  domain: 'RCTErrorDomain' }

This is the code I use to upload the file, uri is from ImagePicker and points to a valid image file:

firebase.storage()
.ref(`/profile-images-upload/${uid}/${Date.now()}.jpg`)
.putFile(uri)

The file is created in the storage bucket, but has type application/json; charset=UTF-8 and the contents is:

{"contentType":"application\/octet-stream","name":"profile-images-upload\/6nwzSEn3EfdZtBeBQJucxCKdcI62\/1528199184428.jpg"}

This error happens in an Expo detached app. Before detachment upload was working with the JS SDK using this code:

      const response = await fetch(uri)
      const blob = await response.blob()
      const { uid } = firebase.auth().currentUser
      const ref = firebase
        .storage()
        .ref()
        .child(`profile-images-upload/${uid}/${Date.now()}.jpg`)
      const uploadTask = ref.put(blob)
      uploadTask.on('state_changed', snapshot => {
         ...
        }, e => {
          reject(e)
        }, () => {
          const downloadURL = uploadTask.snapshot.downloadURL
          resolve(downloadURL)
        })

Environment

iOS

React Native version:

https://github.com/expo/react-native/archive/sdk-27.0.0.tar.gz

RNFirebase Version:

4.2.0

Podfile

source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '9.0'

EXPO_CPP_HEADER_DIR = 'ExpoKit'

target 'myditation' do
  pod 'ExpoKit',
    :git => "http://github.com/expo/expo.git",
    :tag => "ios/2.5.10",
    :subspecs => [
      "Core",
      "CPP",
      "GL"
    ],
    :inhibit_warnings => true

  pod 'React',
    :path => "../node_modules/react-native",
    :inhibit_warnings => true,
    :subspecs => [
      "Core",
      "ART",
      "RCTActionSheet",
      "RCTAnimation",
      "RCTCameraRoll",
      "RCTGeolocation",
      "RCTImage",
      "RCTNetwork",
      "RCTText",
      "RCTVibration",
      "RCTWebSocket",
      "DevSupport",
      "CxxBridge"
    ]
  pod 'yoga',
    :path => "../node_modules/react-native/ReactCommon/yoga",
    :inhibit_warnings => true
  pod 'DoubleConversion',
    :podspec => "../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec",
    :inhibit_warnings => true
  pod 'Folly',
    :podspec => "../node_modules/react-native/third-party-podspecs/Folly.podspec",
    :inhibit_warnings => true
  pod 'glog',
    :podspec => "../node_modules/react-native/third-party-podspecs/glog.podspec",
    :inhibit_warnings => true

  pod 'Firebase/Core'
  pod 'Firebase/Messaging'
  pod 'Firebase/Crash'
  pod 'Firebase/Auth'
  pod 'Firebase/Storage'
  pod 'Firebase/Firestore'

  pod 'react-native-music-control', :path => '../node_modules/react-native-music-control'

  post_install do |installer|
    installer.pods_project.main_group.tab_width = '2';
    installer.pods_project.main_group.indent_width = '2';

    installer.pod_targets.each do |target|

    if target.pod_name == 'ExpoKit'
      target.native_target.build_configurations.each do |config|
        config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] ||= ['$(inherited)']
        config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] << 'EX_DETACHED=1'
        
        # needed for GoogleMaps 2.x
        config.build_settings['FRAMEWORK_SEARCH_PATHS'] ||= []
        config.build_settings['FRAMEWORK_SEARCH_PATHS'] << '${PODS_ROOT}/GoogleMaps/Base/Frameworks'
        config.build_settings['FRAMEWORK_SEARCH_PATHS'] << '${PODS_ROOT}/GoogleMaps/Maps/Frameworks'
      end
    end


    if ['Amplitude-iOS','Analytics','AppAuth','Branch','CocoaLumberjack','FBSDKCoreKit','FBSDKLoginKit','FBSDKShareKit','GPUImage','JKBigInteger2'].include? target.pod_name
      target.native_target.build_configurations.each do |config|
        config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '9.0'
      end
    end
    # Can't specify this in the React podspec because we need
    # to use those podspecs for detached projects which don't reference ExponentCPP.
    if target.pod_name.start_with?('React')
      target.native_target.build_configurations.each do |config|
        config.build_settings['HEADER_SEARCH_PATHS'] ||= ['$(inherited)']
        config.build_settings['HEADER_SEARCH_PATHS'] << "${PODS_ROOT}/Headers/Public/#{EXPO_CPP_HEADER_DIR}"
      end
    end
    # Build React Native with RCT_DEV enabled
    next unless target.pod_name == 'React'
    target.native_target.build_configurations.each do |config|
      config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] ||= ['$(inherited)']
      config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] << 'RCT_DEV=1'
    end

    end
  end
end

[dethell]

Also having this same issue in detached Expo app. Same error.

[reyanshmishra]

@redpandatronicsuk @dethell did you guys solved it?

[dethell]

@reyanshmishra I have not solved it. This is still blocking me in my app progress. Any help out there from the rn-firebase team?

[reyanshmishra]

@dethell I solved it as I had a typo in my firebaseconfige URL.

Should look something like above.

[dethell]

@reyanshmishra I don't believe the config is an issue because the firebase.initalizeApp() call has been deprecated. If you are using the GoogleService-info.plist file in your iOS project it pulls all the config settings from there. In fact, if you try to use the initializeApp call within the project you get this Yellowbox warning:

Deprecation: Calling 'initalizeApp()' for apps that are already initialised natively is unnecessary, use 'firebase.app()' instead to access the already initialized default app instance.

[dethell]

This is a cross-post from several related issues where I had commented:

Found it, in my case at least. The URI of the image from the ImagePicker had a % character in it from the local app cache. This percent was being URI encoded to '%25' which resulted in the file not being found by the putFile code. Adding a decodeURI call around the uri fixed the issue.

let fileUri = decodeURI(pickerResult.uri)

[reyanshmishra]

@dethell then I'll update my code but for me, the URL was the issue.

[Salakar]

Thanks for reporting this issue.

We're aware that Storage has fallen behind slightly on React Native Firebase and would like to bring it up to speed again. I will close this issue for now and track it as well as other issues collectively over on the Storage improvements proposal to be addressed in a future release. See #1260

[Salakar]

@dethell I've added a check to automatically call decodeURI internally on putFile - will be part of the v4.3.0 release when ready.

[Salakar]

Automatic decoreURI support is now live in the v4.3.0 release.

---

Loving react-native-firebase and the support we provide? Please consider supporting us with any of the below:

• 👉 Back financially via Open Collective
• 👉 Follow React Native Firebase and Invertase on Twitter
• 👉 Star this repo on GitHub ⭐️