No option to use camera when uploading files on Android

[padders]

This seems to be a known issue previously, but using inappbrowser simply won't give me the normal options on android for uploading files in a browser form, whereas ios seems fine (once I'd added the permissions to the config.xml). I can see there are various pull requests that fix this so I suspect I'm doing something wrong.

I've tried adding various native plugins to add permissions in case that changes it, or used the config.xml to add the permissions to the androidmanifest.xml for the camera in case it's that that's stopping it but I'm never granted the permissions.

My app.module.ts is

import { BrowserModule } from "@angular/platform-browser";
import { ErrorHandler, NgModule } from "@angular/core";
import { IonicApp, IonicErrorHandler, IonicModule } from "ionic-angular";

import { MyApp } from "./app.component";
import { HomePage } from "../pages/home/home";
import { ListPage } from "../pages/list/list";

import { StatusBar } from "@ionic-native/status-bar";
import { SplashScreen } from "@ionic-native/splash-screen";
import { InAppBrowser } from "@ionic-native/in-app-browser";
import { AndroidPermissions } from "@ionic-native/android-permissions";

@NgModule({
  declarations: [MyApp, HomePage, ListPage],
  imports: [BrowserModule, IonicModule.forRoot(MyApp)],
  bootstrap: [IonicApp],
  entryComponents: [MyApp, HomePage, ListPage],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: ErrorHandler, useClass: IonicErrorHandler },
    InAppBrowser,
    AndroidPermissions
  ]
})
export class AppModule {}

home.ts

import { Component, OnInit } from "@angular/core";
import { NavController } from "ionic-angular";
import {
  InAppBrowser,
  InAppBrowserOptions
} from "@ionic-native/in-app-browser";
import { AndroidPermissions } from "@ionic-native/android-permissions";

@Component({
  selector: "page-home",
  templateUrl: "home.html"
})
export class HomePage {
  constructor(
    public navCtrl: NavController,
    private inAppBrowser: InAppBrowser,
    private androidPermissions: AndroidPermissions
  ) {}
  openWebpage(url: string) {
    const options: InAppBrowserOptions = {
      zoom: "no",
      location: "no",
      hidenavigationbuttons: "yes",
      hideurlbar: "yes",
      footer: "yes",
      toolbar: "yes",
      closebuttoncaption: "Return to home",
      toolbarcolor: "#ffffff"
    };

    // Opening a URL and returning an InAppBrowserObject
    const browser = this.inAppBrowser.create(url, "_blank", options);

    this.androidPermissions
      .checkPermission(
        this.androidPermissions.PERMISSION.WRITE_EXTERNAL_STORAGE
      )
      .then(
        result => console.log("Has permission?", result.hasPermission),
        err =>
          this.androidPermissions.requestPermission(
            this.androidPermissions.PERMISSION.WRITE_EXTERNAL_STORAGE
          )
      );

    this.androidPermissions
      .checkPermission(this.androidPermissions.PERMISSION.CAMERA)
      .then(
        result => console.log("Has permission?", result.hasPermission),
        err =>
          this.androidPermissions.requestPermission(
            this.androidPermissions.PERMISSION.CAMERA
          )
      );

    this.androidPermissions.requestPermissions([
      this.androidPermissions.PERMISSION.CAMERA
    ]);

    // Inject scripts, css and more with browser.X
  }
}

ionic info

ionic info
✔ Gathering environment info - done!

Ionic:

   ionic (Ionic CLI)  : 4.1.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.1.11

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : android 7.1.1, ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic 5.0.5, cordova-plugin-ionic-keyboard 2.1.2, cordova-plugin-ionic-webview 2.0.3, (and 8 other plugins)

System:

   Android SDK Tools : 26.1.1
   ios-deploy        : 2.0.0
   NodeJS            : v8.11.3 (/usr/local/bin/node)
   npm               : 5.6.0
   OS                : macOS High Sierra
   Xcode             : Xcode 9.4.1 Build version 9F2000

Environment:

   ANDROID_HOME : /Users/Paul/Library/Android/sdk

plugins installed (some aren't used now, I added file, and camera to see if they added the camera permissions to the app)

ionic cordova plugins list
> cordova plugin ls
cordova-plugin-android-permissions 1.0.0 "Permissions"
cordova-plugin-camera 4.0.3 "Camera"
cordova-plugin-device 2.0.2 "Device"
cordova-plugin-file 6.0.1 "File"
cordova-plugin-inappbrowser 3.0.0 "InAppBrowser"
cordova-plugin-ionic 5.0.5 "cordova-plugin-ionic"
cordova-plugin-ionic-keyboard 2.1.2 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 2.0.3 "cordova-plugin-ionic-webview"
cordova-plugin-media-capture 3.0.2 "Capture"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-whitelist 1.3.3 "Whitelist"

I'm running the app on a Mac, using the command 'ionic cordova run android --device'

I have an unlocked Galaxy s7 in usb debug mode connected which is running the app. When I access the same webpages in the normal browser I get all the camera options I'd expect. The android version is 8.0.0, with the Samsung Experience of 9.0

The output from the debug console tells me that I have file write permissions, but not camera permissions. I also can't add that permission in the android settings as it never appears.

[janpio]

I can see there are various pull requests that fix this so I suspect I'm doing something wrong.

Closed pull requests that were included in a release or just PRs waiting for attention?

[padders]

Ah, looks like I might have confused myself. It was this that I saw

https://github.com/jverlee/cordova-plugin-inappbrowser-camera

I have now tried to install that version, but using Ionic I run into issues installing it at all, it just throws errors every time.

Maybe there is an issue with this release regarding camera usage on android then? I still suspect I'm not quite getting the config or permissions right in some way...

[janpio]

I have no idea how compatible cordova-plugin-inappbrowser-camera is to the regular cordova-plugin-inappbrowser. Ionic Native that you are using to use the InAppBrowser plugin is tightly coupled to the plugin's API, so if this one has a different one you might experience problems.

[padders]

Yeah, The error suggested that cordova-plugin-inappbrowser-camera was incorrectly configured. I couldn't get it to run at all with that version so I suspect you're right.

The standard inappbrowser works fine, other than not allowing me access to the camera when uploading files on a site. Any idea if I need to use the permissions or config differently to allow this functionality? It works fine on Ios.

[janpio]

cordova-plugin-inappbrowser-camera say in its README it merged a PR, but that one is also merged here now - so maybe this is not even useful any more.

Any idea if I need to use the permissions or config differently to allow this functionality?

Sorry, no idea.

How exactly does your form code look like? And the same form works in stock Android browser?

[padders]

It's a fairly standard drop zone using dropzone.js. When I use it in the standard browser it pops up a permissions warning, then if I accept it lets me choose from camera, mic, video and files. That's what lead me to believe it was a permissions issue. However, If I add a specific camera function to the app it does let me use the camera, but still doesn't grant me those options using inappbrowser. The same thing happens on the demo site below using their demo uploader.

https://www.dropzonejs.com/

[padders]

Just checking it with another site https://uppy.io/examples/dashboard/ and I get the same thing, it asks me to grant permissions from their site when using a camera, but not in the standard browser

[janpio]

Can you try with a standard <input>? Just to confirm a baseline.

[padders]

Sure, using the w3schools demo below, the same thing happens. I'm sure it's permissions related. The app you create doesn't have camera permissions listed in the android settings menu, so it's never going to gain camera access even though I request it at runtime.

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_fileupload_get

[janpio]

What happens if you run this code inside your Ionic apps, not inside the context of InAppBrowser?

[padders]

Adding the very basic <input type="file" id="myFile"> to the home.html does the same thing. Just gives me a file upload with no other options. I suspect ionic plugins being used correctly might give me a better version, I'll have a look.

[padders]

Adding a very basic button to take a picture using https://ionicframework.com/docs/native/media-capture/ works, but within inappbrowser it still doesn't give me an option to takes pictures when uploading a file. Ionic can definitely access the camera on my phone, but inappbrowser doesn't seem to be able to.

[janpio]

InAppBrowser is a different context, there are no Cordova plugins available at all. That's why cordova-plugin-media-capture can do stuff inside the app, but not inside InAppBrowser.

(It is only influence partly [on iOS at least] by what permissions the containing app has)

[padders]

Yeah, makes sense. That's why I tried to add permissions using cordova-plugin-android-permissions but it never grants me access. I always get file write access which I think apps get by default, but never camera (or anything else I try to request).

[janpio]

Adding the very basic to the home.html does the same thing. Just gives me a file upload with no other options.

If this is the case - but that input gives your the camera in stock browsr - this is an issue with cordova-android, not this plugin. Because only if it works in your web app itself in Cordova, it can theoretically work in InAppBrowser as well.

Agree?

[padders]

To be honest. I genuinely don't know. It seems to be a permissions issue in some way, but I don't know where that problem originates. Having changed from cordova-plugin-android-permissions to cordova.plugins.diagnostic (using the guide here https://pointdeveloper.com/ionic-requesting-permissions-run-time/ ) I can now get the camera permissions when I open inappbrowser... I still don't get the option to use it when uploading a file though.

How would I check if it is an issue with cordova-android?

[janpio]

It may not be an issue at all - something like cordova-plugin-media-capture might exist because it is just not possible at all in Cordova context.

What I was getting at: If <input type="file" id="myFile"> doesn't work even in the web app run in cordova-android, it is very much not surprising that it also doesn't work in InAppBrowser. So to investigate more, it would make sense to move on from InAppBrowser, over to cordova-android. If you can get it working there (without using cordova-plugin-media-capture for example), it should be possible to get it working in InAppBrowser as well.

[jcesarmobile]

It's a duplicate of https://issues.apache.org/jira/browse/CB-13652, but as we are migrating to github, maybe we should close that one and keep this one?

[janpio]

I crosslinked this one for now, let's see what we do for the migration - as the other one also has nice information.

[jeffersonveloso]

This problem still has no solution? I can no longer open a camera using inappbrowser.

[nayrl]

Was this ever resolved, i'm also having this issue.

[padders]

Hi Guys, I didn't get it resolved unfortunately. I rebuilt my app inside Android Studio and Xcode as it was an easier method of making this feature work on all devices.

[MarcusRhodes]

Hey @padders how did android studio and xcode do that?