Passing a file input from vue using createResource

Frappe Framework Bug
,
1

I tried to pass a file data from vue to frappe using createResource, but nothing is receive. This is how the component like:

<ion-item>
    <ion-input type="file" @change="handleFileChange" accept="image/*" label="image"
               label-placement="floating"></ion-input>
</ion-item>
<ion-button @click="submitForm" :disabled="!isValidForm">Send</ion-button>

and this is how I pass the input:

const handleFileChange = (event) => {
    console.log(files);
    if (files.length > 0) {
        image.value = files[0];
    }
}

const submitForm = () => {
    const eventData = new FormData();
    eventData.append('file', image.value);
    if (isValidForm.value) {
        let upload_image = createResource({
            method: 'POST',
            url: 'non_profit.api.fundraising.upload_file',
            params: {
                file: eventData,
            },
            onSuccess: (response) => {
                console.log(response);
            },
            onError: (error) => {
                console.log(error);
            }
        })
        upload_image.reload();
    } else {
        console.log('Form is not valid. Please fill in all required fields.');
    }
};

this is how the python code like:

@frappe.whitelist(allow_guest=True)
def upload_file(file):
    print("file: ", file["file"])
    try:
        file_url = save_file("Donation", file, "files", is_private=0)
        return file_url
    except Exception as e:
        frappe.log_error("Error in upload_file: {0}".format(str(e)))
        return None

The python the output of print("file: ", file[“file”]) is “KeyError: ‘file’”. I tried debugging using print(file) too, but the result is {}. There is nothing that received. I make sure the eventData that passed is containing the file, using web console. Anybody knows how what’s wrong or how to pass a file from vue to frappe?