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.