Files
KintoneAppBuilder/frontend/src/components/DocUpload.vue

64 lines
1.6 KiB
Vue

<template>
<div class="q-pa-md">
<q-uploader
:on-finish="uploadFinished"
style="max-width: 400px"
:url="uploadUrl"
:label="title"
accept=".csv,.xlsx"
v-on:rejected="onRejected"
v-on:finish="uploadFinished"
field-name="file"
></q-uploader>
</div>
</template>
<script setup lang="ts">
import { createUploaderComponent, useQuasar } from 'quasar';
const $q=useQuasar();
// const allowTypes=['.xlsx','.csv'];
// function checkFileType(files : File[] ):File[]{
// return files.filter((file)=>{
// let filename = file.name.toLowerCase();
// for(let ext of allowTypes){
// if(filename.endsWith(ext)){
// return true;
// }
// }
// return false;
// });
// }
function onRejected (rejectedEntries:any) {
// Notify plugin needs to be installed
// https://quasar.dev/quasar-plugins/notify#Installation
$q.notify({
type: 'negative',
message: `CSVおよびExcelファイルを選択してください。`
})
}
function uploadFinished(){
$q.notify({
type: 'info',
caption:"通知",
message: 'ファイルの読込が完了しました。'
})
}
interface Props {
title: string;
uploadUrl:string;
}
const props = withDefaults(defineProps<Props>(), {
title:"設計書から導入する(csv or excel)",
uploadUrl:process.env.KAB_BACKEND_URL
});
</script>
<style lang="scss">
</style>