wrbapp/frontend/pages/settings/admin/ledenlijst.vue

<template>
    <div class="flex flex-col gap-5 mx-auto p-2 w-full max-w-sm">
        <div>
            <form @submit.prevent="submitLedenlijst" class="flex flex-col">
                <span class="">Last updated: <b>37 sep</b></span>
                <input required="true" @change="handleFileChanged" accept=".csv" class="my-2" type="file">
                <span class="text-sm"><i>Met de volgende kolommen: Relatiecode, Volledige naam(1), Roepnaam, E-mail, 2e E-mail, Verenigingssporten, Diploma</i></span>
                <button :disabled="disableButtons" class="enabled:btn disabled:btn-disabled mx-auto mt-2">Publish Ledenlijst</button>
            </form>
        </div>
    </div>
</template>

<script setup>
definePageMeta({
    title: 'Ledenlijst',
    key: 'back'
})

const file = ref(null)
const disableButtons = ref(false)

const handleFileChanged = (event) => {
    const target = event.target;

    if (target && target.files) {
        file.value = target.files[0];
    }
}

const submitLedenlijst = () => {
    disableButtons.value = true

    console.log('submitting', file.value)
}
</script>