Q-file not working as intended on cordova apk



  • 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.




Log in to reply