Vue.js + Element-ui Upload: how to call method before-upload

Question

the upload working fine except handleBeforeUpload didn't call, anything I miss?

I want to limit user select file to csv type only.

I am using vue3 with composition api with Element-plus ui. I know that Element-plus official website have a complete example but it's using typescript.

element-plus version = "element-plus": "^2.2.16",

Thank you in advance.

<template>
    <div class="cc-container">
        <div class="select-container">
            <p>
                Response CSV
            </p>
            <el-upload
                v-model:file-list="fileList"
                class="upload-demo"
                action=""
                :before-upload="handleBeforeUpload"
                :multiple="false"
                :limit="1"
                :auto-upload="false"
            >
                <template #trigger>
                    <el-button type="primary">select file</el-button>
                </template>
                <el-button class="ml-3" type="success" @click="submitForm" :disabled="hasSelectedFile">
                    upload to server
                </el-button>
            </el-upload>
        </div>

        <div class="list-container">
                <CsvTable :data="cvsFiles"/>
        </div>
    </div>

</template>

<script setup>
import {Inertia} from '@inertiajs/inertia'
import {computed, onMounted, ref} from 'vue';
import {useForm} from "@inertiajs/inertia-vue3";
import CsvTable from '../components/CsvTable.vue';
import {ElMessage, ElMessageBox} from "element-plus";


const {
    cvsFiles = [],
} = defineProps({
    cvsFiles: Object,
});


const confirmImportCsvDialogVisible = ref(false);

// for el-upload component
const fileList = ref();

const hasSelectedFile = computed(() => {
    return !fileList.value || !fileList.value[0]
})


const submitForm = () => {

    const form = useForm({
        csvFile: fileList.value[0]['raw'],
    });

    Inertia.post('/importcsv', form
        , {
        preserveState: true,
        onSuccess: (res) => {
            if (res.props.status === 'error') {
                ElMessageBox.alert(res.props.message, 'Import CSV file', {
                    confirmButtonText: 'Done',
                })
            }
        },
        onError: () => {
            ElMessageBox.alert('Fail to import CSV file.', 'Import CSV file', {
                confirmButtonText: 'Done',
            })
        }
    });
    // reset file selection list
    fileList.value = [];

};

const handleBeforeUpload = (file) => {
    debugger;
    console.log("beforeUploadCsv")
    if (file.type !== 'csv') {
        ElMessage.error('Must be CSV format!')
        return false
    } else if (file.size / 1024 / 1024 > 2) {
        ElMessage.error('CSV size can not exceed 2MB!')
        return false
    }
    return true
}
</script>

<style scoped lang="scss" src="@/css/pages/csv.scss">
</style>

Edit: I found this example online, and it work. just can't figure out what is the difference. https://codepen.io/pen?editors=1111