CODEWITHSUNDEEP
typescriptvue.jsfilequasar
Alive in Vietnam
Alive in Vietnam

Reputation: 31

How can I fix quasar typescript file type error

I'm trying to learn quasar with typescript. I got a type error when I code file upload.

Below is my code. Type error occurs in the parameter of the form.append() method. error message is

"Argument of type 'Ref<File | null>' is not assignable to parameter of type 'string | Blob'."

I have no idea how can I set the type of file variable.

<script setup lang="ts">
import { ref, Ref } from 'vue';
import { QFile } from 'quasar';

const file: Ref<File | null> = ref(null);

const pickFile = (): void => {
  console.log(file.value);
  const formData = new FormData();
  formData.append('file', file);
  console.log(file.value);
};
</script>

<template>
  <q-file v-model="file" label="File Upload" @update:model-value="pickFile()">
    <template #prepend>
      <q-icon name="mdi-attachment"></q-icon>
    </template>
  </q-file>
</template>

enter image description here

Upvotes: 0

Views: 685

Answers (2)

Kelvin Nketia-Achiampong
Kelvin Nketia-Achiampong

Reputation: 3

FormData takes two types, Blob or String. But you are declaring file to be of type null.

// You should try initialize file as an empty string instead.
const file: Ref<String | Blob> = ref("");

Upvotes: 0

Dr4jw3r
Dr4jw3r

Reputation: 181

FormData declares file as String|Blob, that means that whatever you pass in needs to be of the same type. You can initialise your ref like this:

const file: Ref<String | Blob> = ref("");

Also, when appending it to form data make sure you're passing in the value, not the whole ref

formData.append("file", file.value);

Hope this helps.

Upvotes: 1

Related Questions