前后端合体成功

backend/app/api/api_v1/routers/kintone.py

@@ -49,7 +49,7 @@ async def createapp(name:str):
 
 property=["label","code","type","required","defaultValue","options"]
 
-@r.post("/createappfromexcel",)
+@r.post("/createappfromexcel")
 async def createappfromexcel(files:t.List[UploadFile] = File(...)):
     for file in files:
         if file.filename.endswith('.xlsx'):

frontend/.env

@@ -1,2 +1,2 @@
-KAB_BACKEND_URL="http://127.0.0.1:8000/api/v1/upload"
+KAB_BACKEND_URL="http://127.0.0.1:8000/api/v1/"
 

frontend/src/components/DocUpload.vue

@@ -1,14 +1,14 @@
 <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"
+        v-on:uploaded="onUploadFinished"
-        field-name="file"
+        v-on:failed="onFailed"
+        field-name="files"
     ></q-uploader>
   </div>
 
@@ -18,20 +18,11 @@
 
 
     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;
-//         });
-//     }
 
+    /**
+     * ファイルアップロードを拒否する時の処理
+     * @param rejectedEntries
+     */
     function onRejected (rejectedEntries:any) {
       // Notify plugin needs to be installed
       // https://quasar.dev/quasar-plugins/notify#Installation
@@ -41,12 +32,34 @@
       })
     }
 
-    function uploadFinished(){
+    /**
+     * ファイルアップロード成功時の処理
+     */
+    function onUploadFinished({xhr}:{xhr:XMLHttpRequest}){
+      let msg="ファイルのアップロードが完了しました。";
+      if(xhr && xhr.response){
+          msg=`${msg} (${xhr.responseText})`;
+      }
       $q.notify({
-        type: 'info',
+        type: 'positive',
         caption:"通知",
-        message: 'ファイルの読込が完了しました。'
+        message: msg
-      })
+      });
+    }
+
+    /**
+     *
+     * @param info ファイルアップロード失敗時の処理
+     */
+    function onFailed({files,xhr}:{files: readonly any[],xhr:any}){
+      let msg ="ファイルアップロードが失敗しました。";
+      if(xhr && xhr.status){
+          msg=`${msg} (${xhr.status }:${xhr.statusText})`
+      }
+      $q.notify({
+        type:"negative",
+        message:msg
+      });
     }
 
     interface Props {
@@ -55,7 +68,7 @@
     }
     const props = withDefaults(defineProps<Props>(), {
       title:"設計書から導入する(csv or excel)",
-      uploadUrl:process.env.KAB_BACKEND_URL
+      uploadUrl: `${process.env.KAB_BACKEND_URL}createappfromexcel`
     });
 </script>
 <style lang="scss">