Vue/Javascript - Using excel file reader in q-file filtering function

Currently, I'm working on a project that requires uploading excel files. However, before uploading the excel file, I have to see if the file's header files are correct. However, I'm having a problem since the custom filter function I'm using requires an asynchrous function.

Here's the template for the q-file I'm using:

          <template v-slot:body-cell-Upload="props">
             <q-td :props="props" class="q-gutter-sm q-pa-md">
               <q-file
                  style="max-width: 300px"
                  v-model="FileUpload"
                  filled
                  label="Upload excel file here"
                  :filter="files => files.filter(file => checkFileHeader(file, props.row))"
                  @rejected="onRejected"
               />
             </q-td>
          </template>

Here's the script for the custom filtering function I'm using:

export default {

  setup () {

    async function checkFileHeader (file, row) {
      const source = row.source
      const reader = new FileReader()
      reader.onload = await function(e) {
        const data = new Uint8Array(reader.result);
        const wb = XLSX.read(data);
        isValid = headerChecker(wb, source)

      }
      reader.readAsArrayBuffer(file)

      return isValid
    }

  }

}

HeaderChecker is a function that returns a boolean. I've yet have to still write the function checking the headers itself but Javascript throws an error that isValid is undefined.

    function headerChecker(wb, source) {
      const wsname = wb.SheetNames[0]
      const ws = wb.Sheets[wsname]
      const arr_data = XLSX.utils.sheet_to_json(ws)
      const ws_header = Object.keys(arr_data[0])
      return true
    }

I tried to convert checkFileHeader into a async function so that the reader.onload function will assign the boolean to isValid variable, but for some reason it did not happen.

isValid is not initially defined in your code, i.e. using const or let, hence the error. Regardless, there are a few other things wrong.

1. Array.filter does not work using asynchronous functions. This can be worked around by getting the asynchronous result first and filtering based on that:

const promises = files.map((f) => processFile(f)); // returns Promises resolving to true or false
const results = await Promise.all(promises); // [true, true, false, ...]
return files.filter((f, i) => results[i]); // filter using same index

2. Regardless of the previous work-around, the prop filter on <q-file> expects an array and nothing else. Returning a Promise, even one that resolves into an Array, will cause the file picker to fail. There's nothing that can be done about this because what you want to do requires an async function and async functions always return Promises.

Solution:

Drop the filter prop and use @update:model-value which runs every time a file is picked. You can then directly filter the v-model and not worry about any return value.

I started with the Quasar file-picker example code so not everything is the exact same, but should hopefully be close enough.

<q-file
  style="max-width: 300px"
  v-model="files"
  filled
  label="Pick file(s)"
  multiple
  @update:model-value="checkFilesHeader"
></q-file>

import { useQuasar } from "quasar";
import { ref } from "vue";

export default {
  setup() {
    const $q = useQuasar();
    const files = ref(null);

    async function processFile(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = async function () {
          try {
            const data = new Uint8Array(reader.result);
            resolve(false); // resolve the result of your processing
          } catch (e) {
            reject(false);
          }
        };
        reader.readAsArrayBuffer(file);
      });
    }

    async function checkFilesHeaders() {
      const promises = files.value.map((f) => processFile(f));
      const results = await Promise.all(promises);
      const filteredFiles = files.value.filter((f, i) => results[i]);
      const diff = files.value.length - filteredFiles.length
      if (diff > 0) {
        $q.notify({
          type: "negative",
          message: `${diff} file(s) did not pass validation constraints`,
        });
      }
      files.value = filteredFiles;
    }

    return {
      files,
      checkFilesHeader,
    };
  },
};

Note: my code always does resolve(false) which mocks what would happen if the processing resulted in a file that needed to be filtered. Your code would have something else, e.g. resolve(headerChecker(wb, source))