Input Type Not Working in Capacitor 3

We have recently migrated from capacitor 2 to capacitor 3 and all of a sudden file uploads using input type = file has stopped working across the Android app . On a fresh install , the docs directory opens once , but once you select the image / pdf it doesnt populate the name . After that the directory doesnt even open , the input button just doesnt do anything . here’s the input tag im using , i tried image/* , even application/pdf , nothing works . Searched everywhere but couldnt find a solution. Any pointers would greatly help.

<input #fileinput hidden type=“file” accept=" image/jpeg" [(ngModel)]=“panFile” (change)=“uploadFile(‘pan’,$event)”>

Here’s the dependancies im using in my app.

“dependencies”: {
@angular/animations”: “^10.2.5”,
@angular/common”: “^10.2.5”,
@angular/core”: “^10.2.5”,
@angular/forms”: “~10.0.0”,
@angular/platform-browser”: “~10.0.0”,
@angular/platform-browser-dynamic”: “~10.0.0”,
@angular/router”: “~10.0.0”,
@capacitor/android”: “3.1.2”,
@capacitor/app”: “1.0.2”,
@capacitor/core”: “3.1.2”,
@capacitor/geolocation”: “^1.0.2”,
@capacitor/ios”: “^2.4.8”,
@capacitor/keyboard”: “^1.0.2”,
@capacitor/push-notifications”: “^1.0.3”,
@capacitor/splash-screen”: “^1.1.0”,
@ionic-native/aes-256”: “^5.34.0”,
@ionic-native/appsflyer”: “^5.34.0”,
@ionic-native/badge”: “^5.35.0”,
@ionic-native/base64”: “^5.34.0”,
@ionic-native/camera”: “^5.34.0”,
@ionic-native/clevertap”: “^5.34.0”,
@ionic-native/code-push”: “^5.36.0”,
@ionic-native/core”: “^5.34.0”,
@ionic-native/deeplinks”: “^5.34.0”,
@ionic-native/diagnostic”: “^5.34.0”,
@ionic-native/facebook”: “^5.34.0”,
@ionic-native/file”: “^5.34.0”,
@ionic-native/file-chooser”: “^5.34.0”,
@ionic-native/file-opener”: “^5.35.0”,
@ionic-native/file-path”: “^5.34.0”,
@ionic-native/file-transfer”: “^5.34.0”,
@ionic-native/google-plus”: “^5.34.0”,
@ionic-native/http”: “^5.34.0”,
@ionic-native/in-app-browser”: “^5.34.0”,
@ionic-native/local-notifications”: “^5.35.0”,
@ionic-native/native-storage”: “^5.34.0”,
@ionic-native/network”: “^5.34.0”,
@ionic-native/open-native-settings”: “^5.34.0”,
@ionic-native/sim”: “^5.34.0”,
@ionic-native/sms-retriever”: “^5.34.0”,
@ionic-native/spinner-dialog”: “^5.34.0”,
@ionic-native/status-bar”: “^5.34.0”,
@ionic-super-tabs/angular”: “^7.0.8”,
@ionic-super-tabs/core”: “^7.0.8”,
@ionic/angular”: “^5.6.11”,
@ionic/cli”: “^6.16.3”,
@types/hammerjs”: “^2.0.40”,
@types/socket.io-client”: “^1.4.36”,
“capacitor-native-biometric”: “^3.0.3”,
“chart.js”: “^2.9.4”,
“clevertap-cordova”: “^2.3.5”,
“com-badrit-base64”: “^0.2.0”,
“com.razorpay.cordova”: “git+https://github.com/razorpay/razorpay-cordova.git”,
“cordova-android”: “7.1.4”,
“cordova-open-native-settings”: “^1.5.5”,
“cordova-plugin-advanced-http”: “^3.1.1”,
“cordova-plugin-aes256-encryption”: “^2.0.1”,
“cordova-plugin-appsflyer-sdk”: “^6.3.20”,
“cordova-plugin-badge”: “^0.8.8”,
“cordova-plugin-camera”: “^5.0.2”,
“cordova-plugin-cocoapod-support”: “^1.6.2”,
“cordova-plugin-code-push”: “^2.0.0”,
“cordova-plugin-device”: “^2.0.3”,
“cordova-plugin-facebook-connect”: “^2.3.0”,
“cordova-plugin-file”: “^6.0.2”,
“cordova-plugin-file-opener2”: “^3.0.5”,
“cordova-plugin-file-transfer”: “^1.7.1”,
“cordova-plugin-filechooser”: “^1.2.0”,
“cordova-plugin-filepath”: “^1.6.0”,
“cordova-plugin-googleplus”: “^8.5.2”,
“cordova-plugin-inappbrowser”: “^5.0.0”,
“cordova-plugin-ionic-keyboard”: “^2.2.0”,
“cordova-plugin-ionic-webview”: “^4.2.1”,
“cordova-plugin-local-notification”: “^0.9.0-beta.2”,
“cordova-plugin-native-spinner”: “^1.1.3”,
“cordova-plugin-nativestorage”: “^2.3.2”,
“cordova-plugin-network-information”: “^2.0.2”,
“cordova-plugin-sim”: “^1.3.3”,
“cordova-plugin-sms-retriever-manager”: “^1.0.2”,
“cordova-plugin-statusbar”: “^2.4.3”,
“cordova-plugin-whitelist”: “^1.3.5”,
“cordova.plugins.diagnostic”: “^6.0.3”,
“core-js”: “^3.15.2”,
“crypto-js”: “^4.0.0”,
“echarts”: “^4.9.0”,
“hammerjs”: “^2.0.8”,
“highcharts”: “^8.2.2”,
“highcharts-angular”: “^2.10.0”,
“install”: “^0.13.0”,
“ionic-plugin-deeplinks”: “1.0.20”,
“ionic-selectable”: “^4.9.0”,
“jetifier”: “^2.0.0”,
“jsencrypt”: “^3.2.0”,
“moment”: “^2.29.1”,
“ng2-charts”: “^2.4.3”,
“ng2-image-compress”: “^7.0.7”,
“ng2-search-filter”: “^0.5.1”,
“ngx-cookie-service”: “^10.1.1”,
“ngx-filter-pipe”: “^2.1.2”,
“ngx-mask-ionic”: “^1.1.2”,
“rxjs”: “~6.5.5”,
“socket.io-client”: “^2.4.0”,
“swiper”: “^6.7.0”,
“tslib”: “^2.3.0”,
“underscore”: “^1.13.1”,
“userexperior-cordova-plugin”: “^1.3.0”,
“zone.js”: “~0.10.3”
},

I’ve tried with <input type="file" accept="image/jpeg"> and it’s working fine.

In your example the input is hidden so it’s was not displayed and also “file” has weird double quotes that made my field act as regular input instead of file input, not sure it that was a problem of the forum when pasting code. But I removed both and works fine.

Most times I come across a problem that presents with the following sequence:

A. things work fine for a bit
B. something bad happens
C. UI freezes and becomes totally unresponsive

…there has been some uncaught exceptional condition in B that short-circuits Angular’s rendering thread, taking down the timers that manage its schedule.

Try looking carefully at all console logs from the device, concentrating on uncaught exceptions.

@rahulbalimidi Did you find a solution for that? I’m having the same problem.