Having problem when pass variable with vue 3 and typescript

Question

I'm coding Nuxt 3 and having the following bug

my function,

const checkFileSize = (file: File): boolean => {
  if (!file) {
    return true;
  }

  return props.maxSize * 1024 * 1024 >= file.size;
};

This function is call when I upload a file.

but when I console log the above file it returns a Proxy object and because of that I can not read file.size . The file.size return undefined

I fixed it into file.value.size and it worked but the type error on the function input is wrong (because interface File does not have any value key)

So do I have to change the type (In this case File => what?).
Or do I have to call my function somewhere else to get the exactly file: File input

I fixed it into file.value.size and it worked but the type error on the function input is wrong (Cuz interface File does not have any value key)

*Updated:

Currently I use this code to call handleChange function, and inside handleChange I call checkFileSize

const handleChange = (file: File) => {
     checkFileSize(file)
}

<v-file-input @change="handleChange" />

Still the problem of define a type for ref value

it got errors ['ref' refers to a value, but is being used as a type here. Did you mean 'typeof ref'?ts(2749) ] — marvelous
– marvelous, Commented Nov 17, 2022 at 7:42
The question lacks the details. It's not because it's a proxy, it's because it's a ref. If you expect File then you could pass ref value to it and not a ref itself. — Estus Flask
– Estus Flask, Commented Nov 17, 2022 at 8:19
const handleChange = (file: File) => {} Seems that the handleChange method has a refs input, and I dont know how to declare the type of a refs — marvelous
– marvelous, Commented Nov 18, 2022 at 0:29

Ivan Gnusarkov · Accepted Answer · 2023-01-21 16:15:37Z

0

it got errors ['ref' refers to a value, but is being used as a type here.

Use Ref to fix type error:

const checkFileSize = (file: Ref<File>): boolean => {
  if (!file.value) {
    return true;
  }

  return props.maxSize * 1024 * 1024 >= file.value.size;
};

edited Jan 21, 2023 at 16:15

answered Jan 21, 2023 at 16:13

Ivan Gnusarkov

12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Having problem when pass variable with vue 3 and typescript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related