search

danialfarid / ng-file-upload

Lightweight Angular directive to upload files with optional FileAPI shim for cross browser support
MIT License
7.87k stars 1.59k forks source link

Android "capture" #1349

Closed apmitchell closed 8 years ago

apmitchell commented 8 years ago

I have ngf-capture="true" but an getting a warning to make it a boolean instead of an enum. On Android I can not access the phones camera nor see the image in the preview, everything works fine on iOS however.

`

<i ngf-select="fileSelected($file, $invalidFiles)" accept="image/*" ngf-max-height="1000" ngf-capture="true" ng-model="data.profileImage"> `

I have installed the Crosswalk browser to test something, and now the Android device is opening the camcorder but not the camera... still not sure what is going on. Thanks for you help with this.

okonon commented 8 years ago

i am running cordova-android 5.1.0 and have similar issue. When i click on the button to start the upload process the device opens image picker not the camera app. here is my html:

<div class="camera-placeholder"
       ngf-drop
       ngf-select="stagePhoto($file)"
       ng-model="photo"
       ngf-resize="{ width: 1024, height: 1024, quality: 0.8 }"
       ngf-pattern="image/*"
       ngf-fix-orientation="true"
       ngf-capture="true"
       ngf-multiple="false"
       ng-hide="havePhoto">
    <i class="fh-icon fh-icon-camera"></i>
    <span class="camera-placeholder-copy">Select / Take a Photo</span>
  </div >

Additional info:

Cordova CLI: 6.0.0
Gulp version:  CLI version 3.9.0
Gulp local:   Local version 3.9.0
Ionic Version: 1.2.4
Ionic CLI Version: 2.0.0-beta.12
Ionic App Lib Version: 2.0.0-beta.6
ios-deploy version: 1.8.4 
ios-sim version: 4.1.1 
OS: Mac OS X El Capitan
Node Version: v4.2.3
Xcode version: Xcode 7.2 Build version 7C68
okonon commented 8 years ago

@danialfarid any pointers for a workaround? oh, by the way, THANKS A LOT for such great plugin!

danialfarid commented 8 years ago

try capture="camera"

apmitchell commented 8 years ago

Hey @danialfarid, no luck on my end. I get the same behavior with capture="camera"

apmitchell commented 8 years ago

@danialfarid, you have suggestions or any idea what may be going on. Not sure if other people are having this issue, or if its just an edge case. Any insight, would be really appreciated man, thanks. I know you are busy too so, I really do appreciate your time man. Thanks again.

okonon commented 8 years ago

@danialfarid i tried too - no luck

danialfarid commented 8 years ago

Well if a normal input type file with capture doesn't work then it is android issue. http://mobilehtml5.org/ts/?id=23

okonon commented 8 years ago

@danialfarid i just checked the page you referenced above and the inputs are working as expected. however the html that i posed above still does not work

danialfarid commented 8 years ago

So you are saying if you have a simple html <input type="file" accept="image/*" id="capture" capture="camera"> works but <input type="file" accept="image/*" id="capture" ngf-capture="camera" ngf-select> doesn't work?

okonon commented 8 years ago

let me try exactly that and report back...

okonon commented 8 years ago

actually both of them do not launch the camera... weird

okonon commented 8 years ago 
<!DOCTYPE html>
<html>
<head>

</head>

  <body>
  <input type="file" accept="image/*" id="capture" capture="camera"> works but <br>q
  <input type="file" accept="image/*" id="capture2" ngf-capture="camera" ngf-select> does not

  </body>
  </html>

above does not launch the camera...

Here is my info:

Cordova CLI: 6.0.0
Gulp version:  CLI version 3.9.0
Gulp local:   Local version 3.9.1
Ionic Version: 1.2.4
Ionic CLI Version: 2.0.0-beta.12
Ionic App Lib Version: 2.0.0-beta.6
ios-deploy version: 1.8.4 
ios-sim version: 4.1.1 
OS: Mac OS X El Capitan
Node Version: v4.2.3
Xcode version: Xcode 7.2 Build version 7C68
okonon commented 8 years ago

@danialfarid i am running this code inside a cordova app. Specifically cordova-android 5.1.0. I am wondering if it has something to do with cordova ....

danialfarid commented 8 years ago

Maybe, is there a way to see the final html source of the page? The first element is the first button from the example link I posted earlier and you said it is working.

okonon commented 8 years ago

@danialfarid the difference is that your example is served from http://mobilehtml5.org/ts/?id=23 server and accessed in Google Chrome, but the code that is not functioning correctly is served from local cordova embedded browser.

okonon commented 8 years ago

Here is final html (it has a lot of commented out code for debugging):

<html><head>
  <!--<meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <meta name="format-detection" content="telephone=no">
  <meta http-equiv="Content-Security-Policy" content="default-src *; img-src * filesystem: data: blob:; style-src &apos;self&apos; &apos;unsafe-inline&apos; *; script-src &apos;self&apos; &apos;unsafe-inline&apos; &apos;unsafe-eval&apos; *">
  <title>Frockhub</title>

  <link href="./lib/res/font-awesome/css/font-awesome.min.css" rel="stylesheet">
  <link href="lib/ion-autocomplete/dist/ion-autocomplete.min.css" rel="stylesheet">
  <link href="css/ionic.app.css" rel="stylesheet">
  <link href="lib/nouislider/distribute/nouislider.min.css" rel="stylesheet">
  <link href="lib/cropper/dist/cropper.min.css" rel="stylesheet">
  <link href="lib/ng-cropper/dist/ngCropper.all.css" rel="stylesheet">
  <link href="lib/angular-notify/dist/angular-notify.min.css">

  <script src="lib/res/jquery-1.11.2.js"></script>
  <script src="lib/nouislider/distribute/nouislider.min.js"></script>

  &lt;!&ndash; ionic/angularjs js &ndash;&gt;
  <script src="lib/ionic/release/js/ionic.bundle.js"></script>
  <script src="lib/ng-file-upload/ng-file-upload.min.js"></script>
  &lt;!&ndash; cordova script (this will be a 404 during development) &ndash;&gt;
  &lt;!&ndash;<script src="./bower_components/jssha/src/sha.js"></script>&ndash;&gt;
  <script src="lib/ngCordova/dist/ng-cordova.js"></script>

  <script src="lib/ng-facebook/ngFacebook.js"></script>

  &lt;!&ndash;<script src="lib/a0-angular-storage/dist/angular-storage.min.js"></script>&ndash;&gt;
  <script src="lib/ion-autocomplete/dist/ion-autocomplete.min.js"></script>
  &lt;!&ndash;<script src="lib/angular-jwt/dist/angular-jwt.min.js"></script>&ndash;&gt;
  <script src="lib/ngstorage/ngStorage.min.js"></script>
  &lt;!&ndash;<script src="lib/res/angular-payments.min.js"></script>&ndash;&gt;
  <script src="lib/underscore/underscore-min.js"></script>
  <script src="lib/moment/min/moment.min.js"></script>
  <script src="lib/moment-duration-format/lib/moment-duration-format.js"></script>
  <script src="lib/angular-moment/angular-moment.js"></script>
  <script src="lib/cropper/dist/cropper.min.js"></script>
  <script src="lib/ng-cropper/dist/ngCropper.all.js"></script>
  &lt;!&ndash;<script src="lib/imgcache.js/js/imgcache.js"></script>&ndash;&gt;

  <script src="lib/mixpanel/mixpanel-jslib-snippet.min.js"></script>
  <script src="lib/angular-mixpanel/src/angular-mixpanel.js"></script>
  <script src="lib/angular-socialshare/dist/angular-socialshare.min.js"></script>

  <script src="lib/angular-notify/dist/angular-notify.min.js"></script>

  <script src="https://instant.twotap.com/js/publisher_cart.js"></script>
  <script src="lib/airbrake-js-client/dist/client.min.js"></script>

  <script src="js/app.js"></script>
  <script src="js/constants.js"></script>
  <script src="js/config.js"></script>

  &lt;!&ndash; Directives &ndash;&gt;
  <script src="js/directives/iFrameSetDimentions.js"></script>
  <script src="js/directives/doubleTabbar.js"></script>
  <script src="js/directives/stopEvent.js"></script>
  <script src="js/directives/filterBar.js"></script>
  <script src="js/directives/imageonload.js"></script>
  <script src="js/directives/searchBar.js"></script>
  <script src="js/directives/searchBox.js"></script>
  &lt;!&ndash;<script src="js/directives/thumbnail.js"></script>&ndash;&gt;
  <script src="js/directives/slider.js"></script>
  <script src="js/directives/spinnerOnLoad.js"></script>
  &lt;!&ndash;<script src="js/directives/multiBg.js"></script>&ndash;&gt;
  &lt;!&ndash;<script src="js/directives/uiSrefActiveIf.js"></script>&ndash;&gt;
  <script src="js/directives/ion-sticky.js"></script>
  <script src="js/directives/repeatDone.js"></script>
  <script src="js/directives/FocusMe.js"></script>
  <script src="js/directives/textarea.js"></script>
  <script src="js/directives/PhotoTag.js"></script>
  <script src="js/directives/draggable.js"></script>
  <script src="js/directives/ProductSearchResult.js"></script>
  <script src="js/directives/ClosetItem.js"></script>
  <script src="js/directives/socialTokens.js"></script>
  <script src="js/directives/filterEditorButton.js"></script>
  <script src="js/directives/entityFilterBar.js"></script>
  <script src="js/directives/productInfoOverlay.js"></script>
  <script src="js/directives/passwordMatch.js"></script>
  <script src="js/directives/closetBackground.js"></script>
  <script src="js/directives/userListItem.js"></script>
  <script src="js/directives/CheckoutButton.js"></script>
  <script src="js/directives/AnalyticsStat.js"></script>
  <script src="js/directives/modalHeader.js"></script>
  <script src="js/directives/PurchaseOrder.js"></script>
  <script src="js/directives/PurchaseProduct.js"></script>
  <script src="js/directives/welcomeHelpButton.js"></script>

  &lt;!&ndash; Filters &ndash;&gt;
  <script src="js/filters/picker.js"></script>
  <script src="js/filters/reverse.js"></script>
  <script src="js/filters/regex.js"></script>
  <script src="js/filters/storeName.js"></script>
  <script src="js/filters/niceNumber.js"></script>
  &lt;!&ndash; Factory &ndash;&gt;
  <script src="js/factory/FilterTypes.js"></script>
  <script src="js/factory/Util.js"></script>
  <script src="js/factory/ExceptionHandler.js"></script>
  &lt;!&ndash; Services &ndash;&gt;
  <script src="js/services/User.js"></script>
  <script src="js/services/Comment.js"></script>
  <script src="js/services/Bag.js"></script>
  <script src="js/services/AuthService.js"></script>
  <script src="js/services/Login.js"></script>
  <script src="js/services/Favorite.js"></script>
  <script src="js/services/Search.js"></script>
  <script src="js/services/Brand.js"></script>
  &lt;!&ndash;<script src="js/services/Promotion.js"></script>&ndash;&gt;
  <script src="js/services/Shops.js"></script>
  <script src="js/services/Closet.js"></script>
  <script src="js/services/PhotoTagService.js"></script>
  <script src="js/services/Product.js"></script>
  <script src="js/services/TouchID.js"></script>
  <script src="js/services/Event.js"></script>
  <script src="js/services/ImageResize.js"></script>
  <script src="js/services/ImageUtil.js"></script>
  <script src="js/services/ModalService.js"></script>
  <script src="js/services/Notifications.js"></script>
  <script src="js/services/Push.js"></script>
  <script src="js/services/Sharing.js"></script>
  <script src="js/services/TwoTap.js"></script>
  <script src="js/services/OneSignal.js"></script>
  <script src="js/services/Purchase.js"></script>
  <script src="js/services/Invite.js"></script>

  &lt;!&ndash; Controllers &ndash;&gt;
  <script src="js/controllers/AppCtrl.js"></script>
  <script src="js/controllers/HomeCtrl.js"></script>
  <script src="js/controllers/LoginCtrl.js"></script>
  <script src="js/controllers/RegisterCtrl.js"></script>
  <script src="js/controllers/UserSettingsCtrl.js"></script>
  <script src="js/controllers/BloggersCtrl.js"></script>
  <script src="js/controllers/ResultsCtrl.js"></script>
  <script src="js/controllers/ProductCtrl.js"></script>
  <script src="js/controllers/GenreCtrl.js"></script>
  <script src="js/controllers/ClosetCtrl.js"></script>
  <script src="js/controllers/RewardsCtrl.js"></script>
  <script src="js/controllers/NotificationsCtrl.js"></script>
  <script src="js/controllers/PhotoCtrl.js"></script>
  <script src="js/controllers/SearchModalCtrl.js"></script>
  <script src="js/controllers/ProfilePicCtrl.js"></script>
  <script src="js/controllers/UserSettingsCtrl.js"></script>
  <script src="js/controllers/ClosetItemPageCtrl.js"></script>
  <script src="js/controllers/CommentsCtrl.js"></script>
  <script src="js/controllers/FavoritesCtrl.js"></script>
  <script src="js/controllers/AnalyticsCtrl.js"></script>
  <script src="js/controllers/OrderHistoryCtrl.js"></script>
  <script src="js/controllers/WelcomeCtrl.js"></script>
  <script src="js/controllers/WalkthroughCtrl.js"></script>

  <script src="lib/res/please.js"></script>

  <script src="lib/ionic-platform-web-client/dist/ionic.io.bundle.min.js"></script>-->
</head>

  <body>
  <input type="file" accept="image/*" id="capture" capture="camera"> works but <br>q
  <input type="file" accept="image/*" id="capture2" ngf-capture="camera" ngf-select=""> does not
    <!-- This is needed to support social sharing from [web]
    the content is shown by programmically triggering click event on
    corresponding element by id
    -->
    <!--<a id="hiddenShareTwitter"
       style="display:none;"
       socialshare
       socialshare-url="{{$root.dynamicShareContent}}"
       socialshare-trigger="click"
       socialshare-provider="twitter">
      hidden share button
    </a>
    <a id="hiddenShareFacebook"
       style="display:none;"
       socialshare
       socialshare-url="{{$root.dynamicShareContent}}"
       socialshare-trigger="click"
       socialshare-provider="facebook">
      hidden share button
    </a>-->

</body></html>
danialfarid commented 8 years ago

So does the first input in the generated html work? It looks exactly like the html5 demo link.

okonon commented 8 years ago

@danialfarid i am researching it now and the problem appears that camera functionality is blocked if the page si served using file:// protocol. exactly what cordova-android 5.1.0 does. So to overcome people can install a crosswalk plugin or https://github.com/Telerik-Verified-Plugins/WKWebView plugin to serve their app from local webserver. However i can't do either...

Thanks a lot for your help and sorry for the trouble.

okonon commented 8 years ago

https://issues.apache.org/jira/browse/CB-7212

danialfarid commented 8 years ago

(thumbs up)

barryvdh commented 8 years ago

I had the same issue, using ngf-accept="'image/*'" started the camcorder on Android, using the actual accept="image/*" does work for some reason (when using an input file field).

peterholcomb commented 8 years ago

I'm seeing the same as @barryvdh