While working on Nuxt 3, I encountered a bug with the following function:
My function,
const checkFileSize = (file: File): boolean => {
if (!file) {
return true;
}
return props.maxSize * 1024 * 1024 >= file.size;
};
This function is called when I upload a file.
However, when I console log the file mentioned above, it returns a Proxy object and consequently, I am unable to read file.size. The file.size property returns undefined.
I managed to resolve this by changing it to file.value.size, but there is a type error related to the function input (as interface File does not have any value key).
Do I need to change the type (in this case File => what?).
Or should I call my function somewhere else to get the exact file: File input?
I updated my code to use this method to call the handleChange function, in which I invoke checkFileSize:
const handleChange = (file: File) => {
checkFileSize(file)
}
<v-file-input @change="handleChange" />
The issue of defining a type for the ref value still persists.