Uploader - Example for typescript

[tinohager]

Could you provide an example I have unfortunately found no example at all? Thanks in advance

How to proceed in case of error when the authentication token is missing?

<q-uploader
  multiple
  auto-upload
  :factory="factoryFn"
/>

function factoryFn () : Promise<QUploaderFactoryObject> {
  if (!token) {
    return new Promise<QUploaderFactoryObject>((resolve) => {
      resolve({
        //failure handling?
      })
    })
  }

  return new Promise<QUploaderFactoryObject>((resolve) => {
    resolve({
      url: `/api/upload`,
      method: 'POST',
      headers: [
        { name: 'Authorization', value: `Bearer ${token}` }
      ]
    })
  })
}

[MohMehrnia]

please give me an example, i can not found any example!!!!

[yusufkandemir]

@MohMehrnia please see the example below your reply. Also linking it: #15733 (comment)

[yusufkandemir]

Here is an improved version of your example, and with the added error handling:

<template>
  <q-uploader
    multiple
    auto-upload
    :factory="factoryFn"
    @factory-failed="onFactoryFailed"
  />
<template>

<script setup lang="ts">
import { type QUploaderFactoryFn } from 'quasar';

const { token } = useAuth(); // imaginary way of getting the token

// can be made async as well: async (files) => { ... }
const factoryFn: QUploaderFactoryFn = (files) => {
  if (!token) {
    throw new Error('Token not found'); // will trigger @factory-failed
  }

  return {
    url: '/api/upload',
    method: 'POST',
    headers: [
      { name: 'Authorization', value: `Bearer ${token}` },
    ],
  };
};

const onFactoryFailed: QUploaderProps['onFactoryFailed'] = (error, files) => {
  // may log 'token not found' or any error that happened during the request
  console.error(error);

  console.error('failed to upload files:', files);
};
</script>