<script setup lang="ts">

import { ref } from 'vue';

const file = ref<FileList|string|number|null>(null);
</script>


<template>
  <div>Input of file type</div>
  <div class="q-pa-md">
    <div class="q-gutter-md row items-start">
      <q-input
        :modelValue="file"
        @update:modelValue="(val: FileList|string|number|null) => {  
          file = val;
          console.log('file', file); 
        }"
        filled
        type="file"
        hint="Native file"
      />

    </div>
  </div>
</template>

The value of file is displayed as FileList in console.

The error shown on :modelValue is

Type ‘string | number | { [x: number]: { readonly lastModified: number; readonly name: string; readonly webkitRelativePath: string; readonly size: number; readonly type: string; arrayBuffer: () => Promise<…>; slice: (start?: number | undefined, end?: number | undefined, contentType?: string | undefined) => Blob; stream:…’ is not assignable to type ‘string | number | null | undefined’.ts(2322)
index.d.ts(6099, 3): The expected type comes from property ‘modelValue’ which is declared here on type ‘VNodeProps & AllowedComponentProps & ComponentCustomProps & QInputProps & Record<string, unknown>’
(property) QInputProps.modelValue: string | number | null | undefined
Model of the component; Either use this property (along with a listener for ‘update:modelValue’ event) OR use v-model directive

How can I use :modelValue such that I can use the resulting file value as a FileList and access its properties like first element, its name, length etc