KintoneAppBuilder created

frontend/src/components/DocUpload.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="q-pa-md">
+    <q-uploader
+        style="max-width: 400px"
+        :url="uploadUrl"
+        :label="title"
+        accept=".csv,.xlsx"
+        :on-rejected="onRejected"
+    ></q-uploader>
+  </div>
+</template>
+<script setup lang="ts">
+ import { 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ファイルを選択してください。`
+      })
+    }
+
+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>