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.