[@nativescript/imagepicker] - TypeError: Cannot read properties of null (reading 'getName') on Android when picking a photo

[andrewm-mitchells]

I've migrated from https://www.npmjs.com/package/nativescript-mediafilepicker to @nativescript/imagepicker and having issues with it on Android platform when picking images. Below is my config

Packages:

"dependencies": {
    "@angular/animations": "^15.2.0",
    "@angular/common": "^15.2.0",
    "@angular/compiler": "^15.2.0",
    "@angular/core": "^15.2.0",
    "@angular/forms": "^15.2.0",
    "@angular/platform-browser": "^15.2.0",
    "@angular/platform-browser-dynamic": "^15.2.0",
    "@angular/router": "^15.2.0",
    "@nativescript-community/universal-links": "^3.0.0",
    "@nativescript/angular": "^15.2.0",
    "@nativescript/appversion": "~2.0.0",
    "@nativescript/background-http": "^6.0.0",
    "@nativescript/core": "~8.5.0",
    "@nativescript/datetimepicker": "^2.1.11",
    "@nativescript/email": "^2.0.5",
    "@nativescript/imagepicker": "^2.0.1",
    "@nativescript/iqkeyboardmanager": "^2.1.1",
    "@nativescript/social-share": "^2.0.4",
    "@nativescript/theme": "~3.0.2",
    "@nota/nativescript-webview-ext": "^8.0.2",
    "@nstudio/nativescript-barcodescanner": "^5.0.1",
    "crypto-js": "^4.1.1",
    "eslint": "^7.25.0",
    "nativescript-phone": "^3.0.3",
    "nativescript-plugin-universal-links": "^2.0.0",
    "nativescript-ui-gauge": "^15.2.3",
    "nativescript-ui-listview": "^15.2.3",
    "nativescript-ui-sidedrawer": "^15.2.3",
    "reflect-metadata": "~0.1.12",
    "rxjs": "~7.5.0",
    "shelljs": "^0.8.4",
    "zone.js": "~0.11.5"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.2.5",
    "@angular/compiler-cli": "^15.2.0",
    "@nativescript/android": "~8.5.0",
    "@nativescript/ios": "~8.5.1",
    "@nativescript/types": "~8.5.0",
    "@nativescript/webpack": "~5.0.14",
    "@ngtools/webpack": "^15.2.5",
    "codelyzer": "~6.0.0",
    "sass": "^1.49.9",
    "semver": "^7.3.4",
    "typescript": "^4.9.4",
    "url-parse": "^1.5.10"
  }

ns info:

Getting NativeScript components versions information...
✔ Component nativescript has 8.5.3 version and is up to date.
✔ Component @nativescript/core has 8.5.3 version and is up to date.
✔ Component @nativescript/ios has 8.5.1 version and is up to date.
✔ Component @nativescript/android has 8.5.0 version and is up to date.

Component code:

And lastly the error - TypeError: Cannot read properties of null (reading 'getName')

Works as expected on iOS

[andrewm-mitchells]

UPD: Works when running the app on a simulator. Test device Google Pixel with Android 10. Seems like permissions issue to me but I have no clue how to resolve it and ensure it works on all versions of Android.

Below is a more detailed error returned by console.log(imagePicker.present()); placed right before return imagePicker.present();

CONSOLE ERROR: ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of null (reading 'getName')
  JS: TypeError: Cannot read properties of null (reading 'getName')
  JS:     at FileSystemAccess29.getFile (file: src/webpack:/mitch/node_modules/@nativescript/core/file-system/file-system-access.android.js:649:0)
  JS:     at File.fromPath (file: src/webpack:/mitch/node_modules/@nativescript/core/file-system/index.js:174:0)
  JS:     at handle (file: src/webpack:/mitch/node_modules/@nativescript/imagepicker/index.android.js:216:33)
  JS:     at Object.onResult (file: src/webpack:/mitch/node_modules/@nativescript/imagepicker/index.android.js:280:0)
  JS:     at _ZoneDelegate.invokeTask (file: src/webpack:/mitch/node_modules/zone.js/fesm2015/zone.js:406:0)
  JS:     at AsyncStackTaggingZoneSpec.onInvokeTask (file: src/webpack:/mitch/node_modules/@angular/core/fesm2015/core.mjs:23881:0)
  JS:     at _ZoneDelegate.invokeTask (file: src/webpack:/mitch/node_modules/zone.js/fesm2015/zone.js:405:0)
  JS:     at Object.onInvokeTask (file: src/webpack:/mitch/node_modules/@angular/core/fesm2015/core.mjs:24179:0)
  JS:     at _ZoneDelegate.invokeTask (file:///data/data/com.mitch...

[triniwiz]

Can you try using the core next package npm i @nativescript/core@next if that fails then you can try the new prop to copy the file

[andrewm-mitchells]

@triniwiz thanks for suggestions! Tried updating but it didn't help. Then added copyToAppFolder: 'media' but that didn't help either.

Is it possible something in AndroidManifest.xml is not set correctly?

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="__PACKAGE__"
  android:versionName="1.40.0"
  android:versionCode="10106">

  <supports-screens
    android:smallScreens="true"
    android:normalScreens="true"
    android:largeScreens="true"
    android:xlargeScreens="true"/>

  <uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
  <uses-permission android:name="android.permission.READ_MEDIA_VIDEO" />
  <uses-permission android:name="android.permission.INTERNET"/>
  <uses-permission android:name="android.permission.CALL_PHONE" />

  <application
    android:name="com.tns.NativeScriptApplication"
    android:allowBackup="true"
    android:icon="@drawable/icon"
    android:label="@string/app_name"
    android:theme="@style/AppTheme">

    <activity
      android:name="com.tns.NativeScriptActivity"
      android:label="@string/title_activity_kimera"
      android:configChanges="keyboard|keyboardHidden|orientation|screenSize|smallestScreenSize|screenLayout|locale|uiMode"
      android:theme="@style/LaunchScreenTheme"
      android:windowSoftInputMode="adjustPan"
      android:exported="true">

      <!-- Add this new section to your Activity -->
      <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
      </intent-filter>

      <meta-data android:name="SET_THEME_ON_LAUNCH" android:resource="@style/AppTheme" />

      <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
      </intent-filter>
    </activity>
    <activity android:name="com.tns.ErrorReportActivity"/>
  </application>
</manifest>

[wschroers]

I was having the same issue but after downgrading the "@nativescript/imagepicker" component to version 1.0.9 it started working.

I do hope someone can look into this as as I am facing a similar problem right now when trying to access the file with the function "fileSystem.File.fromPath".

[andrewm-mitchells]

I'm getting TypeError: Cannot read properties of undefined (reading 'options') on v1.0.9 when picking an image. And the mediafilepicker is no longer supported and won't let me build for Android so our production app is couple versions behind for Android users unfortunately.

[andrewm-mitchells]

Can you try using the core next package npm i @nativescript/core@next if that fails then you can try the new prop to copy the file

I'm still getting the same error after applying your suggestions. Do you have any other ideas on how this can be fixed? Our production app can not be released because of this issue.

[wschroers]

While searching for a solution I found this thread that seems related: https://github.com/NativeScript/NativeScript/issues/10198

[insytes]

@andrewm-mitchells This is not an ideal situation but we are using an older version of the package with success on Android.

"@nativescript/android": "~8.3.0",    
"@nativescript/core": "~8.5.3",    
"@nativescript/imagepicker": "1.0.2" 

[NathanWalker]

Hi everyone @andrewm-mitchells @jiswo sounds like there is a single commit on core main branch related to this which hasn't been release in a patch yet however we are going to do that this week. What would help is if could confirm the following:

"@nativescript/android": "~8.5.0",  
"@nativescript/core": "8.5.4-alpha.2",    
"@nativescript/imagepicker": "^2.0.0",

Just keep in mind that imagepicker v2 has improved results with more detail. Was major version bump cause the result is a more detailed result set (eg, result.asset is the actual asset now but there's more data on the result now). In event you need to copy the file on latest Android devices you can use the result to do a File.fromPath(path, true) to copy the file.

Please let us know when possible if that works for you.

[NathanWalker]

The following can be used for confirmation - if anyone has moment to confirm from their cases would be much appreciated - we're looking to publish the 8.5.4 patch by eod tomorrow or sooner:

"@nativescript/android": "~8.5.0",  
"@nativescript/core": "8.5.4-next-06-15-2023-5281842431",    
"@nativescript/imagepicker": "^2.0.0",

[NathanWalker]

Confirmed the above appears to resolve the issue for api levels >= 31 - other details for api level <= 30 here: https://github.com/NativeScript/NativeScript/issues/10198#issuecomment-1593942484

[andrewm-mitchells]

Hi @NathanWalker, I'm still getting CONSOLE LOG: TypeError: Cannot read properties of null (reading 'getName') on a physical device.

Here's my package.json:

{
  "name": "app",
  "main": "src/main.ts",
  "version": "1.28.0",
  "publishConfig": {
    "access": "public"
  },
  "scripts": {
    "lint": "eslint \"src/**/*.ts\""
  },
  "dependencies": {
    "@angular/animations": "^15.2.0",
    "@angular/common": "^15.2.0",
    "@angular/compiler": "^15.2.0",
    "@angular/core": "^15.2.0",
    "@angular/forms": "^15.2.0",
    "@angular/platform-browser": "^15.2.0",
    "@angular/platform-browser-dynamic": "^15.2.0",
    "@angular/router": "^15.2.0",
    "@nativescript-community/universal-links": "^3.0.0",
    "@nativescript/angular": "^15.2.0",
    "@nativescript/appversion": "~2.0.0",
    "@nativescript/background-http": "^6.0.0",
    "@nativescript/core": "^8.5.4-next-06-15-2023-5281842431",
    "@nativescript/datetimepicker": "^2.1.11",
    "@nativescript/email": "^2.0.5",
    "@nativescript/imagepicker": "^2.0.2",
    "@nativescript/iqkeyboardmanager": "^2.1.1",
    "@nativescript/social-share": "^2.0.4",
    "@nativescript/theme": "~3.0.2",
    "@nota/nativescript-webview-ext": "^8.0.2",
    "@nstudio/nativescript-barcodescanner": "^5.0.1",
    "@nstudio/nativescript-carousel": "^8.0.3",
    "crypto-js": "^4.1.1",
    "eslint": "^7.25.0",
    "nativescript-phone": "^3.0.3",
    "nativescript-plugin-universal-links": "^2.0.0",
    "nativescript-ui-gauge": "^15.2.3",
    "nativescript-ui-listview": "^15.2.3",
    "nativescript-ui-sidedrawer": "^15.2.3",
    "reflect-metadata": "~0.1.12",
    "rxjs": "~7.5.0",
    "shelljs": "^0.8.4",
    "zone.js": "~0.11.5"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.2.5",
    "@angular/compiler-cli": "^15.2.0",
    "@nativescript/android": "~8.5.0",
    "@nativescript/ios": "~8.5.1",
    "@nativescript/types": "~8.5.0",
    "@nativescript/webpack": "~5.0.14",
    "@ngtools/webpack": "^15.2.5",
    "codelyzer": "~6.0.0",
    "sass": "^1.49.9",
    "semver": "^7.5.0",
    "typescript": "^4.9.4",
    "url-parse": "^1.5.10",
    "util": "^0.12.5"
  }
}

[NathanWalker]

Resolved with https://github.com/NativeScript/NativeScript/releases/tag/8.5.4-core published now.

If using @nativescript/core: "~8.5.0" in package.json, just be sure have run ns clean to reset lock file and ensure 8.5.4 reflects properly when lock is regenerated.

@andrewm-mitchells the final fix for api 30 went in here (not present in next tag using above, but included in the final 8.5.4 patch): https://github.com/NativeScript/NativeScript/pull/10316/files