Q-file not working as intended on cordova apk

[AJisOk]

I’m making an app for a client that they can use from their browser or as an apk on their phone. I’ve been running into this issue where the q-file component doesn’t work on the apk but it does on pc browser and mobile browser. Here’s the code for the component and the q-form:

            <q-form 
              @submit="onSubmit"
              @validation-error="onValError"
              >

              <q-card-section class="self-center q-pb-xs">
                <div class="text-h6">New Project</div>
              </q-card-section>

              <q-card-section >

                <q-input
                  filled
                  autofocus
                  v-model="newProjectName"
                  label="Project Name"
                  class="input-box-shadow q-mb-md"
                  :rules="[
                    val => val && val.length > 0 || 'Please enter a project name']"
                />

                <q-select
                  filled
                  v-model="newClient"
                  use-input
                  fill-input
                  hide-selected
                  input-debounce="0"
                  @new-value="clientCreateValue"
                  :options="clientFilterOptions"
                  @filter="filterClient"
                  behavior="menu"
                  label="Client"
                  :rules="[
                    val => val && val.length > 0 || 'Please enter a client']"
                  class="input-box-shadow q-mt-md"
                />
                  
<!-- this is where the important stuff starts -->

                <q-file 
                  filled
                  v-model="newPhoto"
                  label="Add Photo"
                  class="col input-box-shadow q-mt-md"
                  accept="image/*"
                  capture="user"
                  >
                  <template v-slot:append>
                    <q-icon v-if="newPhoto !== null" name="close" @click.stop="newPhoto = null" class="cursor-pointer" />
                    <q-icon v-if="newPhoto == null" name="r_create_new_folder" @click.stop />
                  </template>

                </q-file>

<!-- this is where the important stuff ends -->

              </q-card-section>

              <!-- Cancel and Submit buttons for new project -->

              <q-card-actions align="center" class="col q-pb-md" style="padding-bottom:48px">
                <q-btn outline class="cancel-btn q-px-sm" label="Cancel" @click="onCancel" />
                <q-btn unelevated class="submit-btn q-px-sm" label="Submit" type="submit" />
              </q-card-actions>

            </q-form>

In the app, adding a photo is optional when submitting this form. When you submit the form without a photo, everything works as intended however when you attempt to submit the form with a photo, it fails with this error:

[Vue warn]: Invalid prop: type check failed for prop "value". Expected , FileList, Array, got File 
    
    found in
    
    ---> <QFile>
           <QCardSection>
             <QForm>
               <QCard>
                 <QPortal>
                   <QDialog>
                     <QPageSticky>
                       <QPage>
                         <PageProjects> at src/pages/Projects.vue
                           <QPageContainer>
                             <QLayout>
                               <MainLayout> at src/layouts/MainLayout.vue
                                 <App> at src/App.vue
                                   <Root>

"[Vue warn]: Invalid prop: type check failed for prop "value". Expected , FileList, Array, got File 
    
    found in
    
    ---> <QFile>
           <QCardSection>
             <QForm>
               <QCard>
                 <QPortal>
                   <QDialog>
                     <QPageSticky>
                       <QPage>
                         <PageProjects> at src/pages/Projects.vue
                           <QPageContainer>
                             <QLayout>
                               <MainLayout> at src/layouts/MainLayout.vue
                                 <App> at src/App.vue
                                   <Root>", source: webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js (620)

Which basically means that the value which was returned to the qfile was of type “file” which is an accepted type according to https://quasar.dev/vue-components/file-picker#QFile-API however according to the error above, it’s not.

I’ve been attempting to find a solution for this for a while now. I’m reluctant to use q-uploader because it doesn’t slot into our pipeline very well and q-file is working just fine on every other platform.

I also had some earlier issues with the native OS photo selection interface and q-file, specifically the accept prop, not working as intended either. If anyone has experienced these issues before some feedback or tips would be appreciated, I can also show more code if necessary.

[dobbel]

@AJisOk

For file handling in ‘native’ apps with cordova or capacitor you’ll need plugins.

Cordova:
https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-camera/
https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-file/index.html

[Natalie9]

Same issue in here. I would like use q-file or q-uploader, but in apk or in browser the behavior is different. In Browser show “chose an action” for select camera or files, but in apk not, files are selected whitout chosen an action.

I installed plugins and permissions, but continue not working.