vue3 file upload get value undefined - vuejs3

Question

I am trying to upload a file with vue, but the issue I am stuck with is this,
I can't access this.imageFile.value after selecting the photo.
The data I returned from setup but undefined.
Under normal conditions, imageFile.value works in setup.
<template>
<img v-show="imageUrl" :src="imageUrl" alt="">
<input #change="handleImageSelected,getdata" ref="fileInput" type="file" accept="image/*">
</template>
<script>
import {UseImageUpload} from "./use/UseImageUpload";
export default {
data() {
return {
Hello: null
}
},
methods: {
getdata() {
this.Hello = this.imageFile.value
}
},
setup() {
let {imageFile, imageUrl, handleImageSelected} = UseImageUpload();
return {
imageFile,
handleImageSelected,
imageUrl,
}
}
}
</script>
UseImageUpload.js
import {ref, watch} from "vue";
export function UseImageUpload() {
//image
let imageFile = ref("");
let imageUrl = ref("");
function handleImageSelected(event) {
if (event.target.files.length === 0) {
imageFile.value = "";
imageUrl.value = "";
return;
}
imageFile.value = event.target.files[0];
}
watch(imageFile, (imageFile) => {
if (!(imageFile instanceof File)) {
return;
}
let fileReader = new FileReader();
fileReader.readAsDataURL(imageFile);
fileReader.addEventListener("load", () => {
imageUrl.value = fileReader.result;
});
});
return {
imageFile,
imageUrl,
handleImageSelected,
};
}

Answer 1

First of all please try not to mix Options and Composition API - I know it might work but it is not necessary and in the most cases just an anti-pattern.
Composition API is there to replace the Options API or rather to give an alternative. They are just not supposed to work together or to be used together.
So this would improve your code:
setup() {
const Hello = ref(null);
const {imageFile, imageUrl, handleImageSelected} = UseImageUpload();
function getdata() {
Hello = imageFile.value
}
return {
imageFile,
handleImageSelected,
imageUrl,
getdata,
}
This should also fix your issue.