How do I pass the uploaded file to a function?

As I can’t use v-model for inputs of type file, I’m looking for a solution to get the file in the function.

I have this:

<ion-input ref="image" name="image" accept=".jpeg, .png, .jpg" type="file"></ion-input>

And I try to get the image like this:

const imageRef=this.$refs.image.$el.value;

However it just displays the name of the image and I would like to get the actual image to append to FormData

 form=new FormData();
 form.append("image", image);

But that sends only the path and file name, I need the file itself.

How could I pass the file to my function (or get it from my function, in this case)? Thank you.

<input @change="getFile" type="file" ref="fileBtn"/>

code

const fileInfo = ref<any>(null)
const getFile = (event: any) => {
    console.log(event.target.files);
    fileInfo.value= event.target.files[0];
};
1 Like