q-uploader not working on my android

[HarleyTan]

Software version

Quasar: 0.14.2 OS: Android 7.0 Browsers: Default android browser、Quasar App、and My Cordova App

What did you get as the error?

When I click "+ PICK FILE" button in q-uploader component nothing happens，but shows like

Choose an action No apps can perform this action

What were you expecting?

I check the code in android,q-uploader is translated to <input type="file" accept=".jpg" multiple="multiple" class="q-uploader-input absolute-full cursor-pointer"> Attention at multiple="multiple" I change it to <input type="file" accept=".jpg" multiple class="q-uploader-input absolute-full cursor-pointer">,the app works well

can you pls fix this?

thanks very much

youcan test it,just like:

<template>
  <div>
    <div>Test</div>
    <div>
      upload photos
      <q-uploader :url="'/upload'" :multiple="true" extensions=".jpg"  :float-label="'please select the photos'" ></q-uploader>
    </div>
    <div>
      q-uploader in app like:
      <input type="file" accept=".jpg" multiple="multiple" >
    </div>
    <div>
      html5 input file
      <input id="fileInput" type="file" size="65" multiple>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {}
  }
}
</script>

<style>
</style>

[rstoenescu]

Fix available in edge and future v0.14.4. Thanks for reporting!

[HarleyTan]

I'm so sorry,I may had found the wrong point <input type="file" accept=".jpg" multiple="multiple" > is not ok <input type="file" multiple="multiple" > but is ok!

may be the point is at accept=".jpg"

[rstoenescu]

It's fixed in edge version and future v0.14.4 already, like I said :) Tested on Android 6 and iOS 10.

[HarleyTan]

compare such 3 tests in android browser and cordova app, only the 3rd works

    <div>
     1  q-uploader
      <q-uploader :url="'/upload'" :multiple="true" extensions=".jpg"  :float-label="'please select the photos'" ></q-uploader>
    </div>
    <div>
     2  q-uploader without multiple
      <q-uploader :url="'/upload'" extensions=".jpg"  :float-label="'please select the photos'" ></q-uploader>
    </div>
    <div>
      3 q-uploader without extensions
      <q-uploader :url="'/upload'" :multiple="true"  :float-label="'please select the photos'" ></q-uploader>
    </div>

[HarleyTan]

I'm using the edge version now,and just now updated

[HarleyTan]

and in android browser or cordova,although with multiple,I can only upload one file

do you have any idea about this point

[rstoenescu]

Can you confirm you are on the very latest edge and this issue can still be reproduced? (npm update it)

[HarleyTan]

I checked it again. my package.json:

  "dependencies": {
    "@websanova/vue-auth": "^2.12.1-beta",
    "axios": "^0.16.2",
    "babel-runtime": "^6.0.0",
    "fastclick": "^1.0.6",
    "material-design-icons": "^3.0.1",
    "moment": "^2.15.0",
    "quasar-extras": "0.x",
    "quasar-framework": "git+https://git@github.com/quasarframework/quasar-edge.git",
    "roboto-fontface": "^0.7.0",
    "vue": "2.3.4",
    "vue-axios": "^2.0.2",
    "vue-baidu-map": "^0.12.5",
    "vue-router": "^2.0.0",
    "vuelidate": "^0.5.0",
    "vuex": "^2.3.1"
  },

when i npm update quasar-framework, I got :

quasar-app@0.0.1 /home/××××/ws/go/src/chdev/cgxt3/fe
└── quasar-framework@0.14.4  (git+https://git@github.com/quasarframework/quasar-edge.git#3796908ced96b568ca4c8a024910b31a476d9b43)

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN quasar-app@0.0.1 No repository field.
npm WARN quasar-app@0.0.1 No license field.

https://github.com/quasarframework/quasar-edge#3796908ced96b568ca4c8a024910b31a476d9b43 it is the latest version

and the 1 and 2 and 3 is as below:(seen in chrome remote debug for cordova app webview)

<input type="file" accept=".jpg" class="q-uploader-input absolute-full cursor-pointer" multiple="">
<input type="file" accept=".jpg" class="q-uploader-input absolute-full cursor-pointer">
<input type="file" class="q-uploader-input absolute-full cursor-pointer" multiple="">

also only the 3rd works,the 1st and 2nd failed

[HarleyTan]

now,I:

rm -rf node_modules/ dist/ yarn quasar build cd cordova/ cordova run android

and the 1,2,3 is as below:(seen in chrome remote debug for cordova app webview)

<input type="file" accept=".jpg" multiple="multiple" class="q-uploader-input absolute-full cursor-pointer">
<input type="file" accept=".jpg" class="q-uploader-input absolute-full cursor-pointer">
<input type="file" multiple="multiple" class="q-uploader-input absolute-full cursor-pointer">

only the 3rd works,the 1st and 2nd failed (test in cordova app and android browser)

by the way,in Quasar Play app,all 1,2,3 failed

[HarleyTan]

http://quasar-framework.org/guide/cordova-wrapper.html

but quasar does suggest or use crosswalk for default

when i cordova plugin add cordova-plugin-crosswalk-webview,all the 1,2,3 woks good,although can only choose 1file only newest chrome can choose multiple files

[rstoenescu]

This seems like a bug on the Android platform. Quasar is working according to the standards: https://html.spec.whatwg.org/multipage/input.html#the-multiple-attribute It sets "multiple" as a boolean attribute as standards say.

Caniuse.com says it's not supported on Android 4.x but it's working for Android 5+: http://caniuse.com/#feat=input-file-multiple

If adding "accept" attribute seems to break this, then we should report this bug. Can anyone help with a workaround to this? Is there a syntax for the input tag to work on all Android WebViews?

[nothingismagick]

I would suggest using accept="image/*" because "thing.jpg", "thing.JPG" and thing.jpeg" are all valid media-type suffixes for the same thing - and depending on source it could be any one of them.