cordova-plugin-inappbrowser icon indicating copy to clipboard operation
cordova-plugin-inappbrowser copied to clipboard

No option to use camera when uploading files on Android

Open padders opened this issue 7 years ago • 24 comments

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.

padders avatar Aug 16 '18 16:08 padders