Nuxt.js I searched lots of tutorials for CSV uploading using laravel API but I did not get logic on how to code csv uploading things help me to solve this or give tutorial links.
Modules
import { AxiosResponse } from "axios";
import { axios } from "@/plugins/axios";
export default {
async importVsim(params: any): Promise<AxiosResponse<null>> {
return await <AxiosResponse>axios.post('v1/ucl/import',params);
}
}
Components
<template>
<div style="display:inline; text-align:left;">
<b-button icon-left="upload" @click="open">UCL CSV</b-button>
<b-modal
v-model="showModal"
trap-focus
aria-role="dialog"
aria-label="Example Modal"
:width="600"
aria-modal>
<div class="card mb-4">
<header class="card-header">
<p class="card-header-title">UCL CSV</p>
</header>
<div class="card-content">
<b-field label="mnk_*.csv">
<b-upload v-model="file1" class="file-label">
<span class="file-cta">
<b-icon class="file-icon" icon="upload"></b-icon>
<span class="file-label">Click to upload</span>
</span>
<span class="file-name" v-if="file1">
{{ file1.name }}
</span>
</b-upload>
</b-field>
<b-field label="htk_*.csv">
<b-upload v-model="file2" class="file-label">
<span class="file-cta">
<b-icon class="file-icon" icon="upload"></b-icon>
<span class="file-label">Click to upload</span>
</span>
<span class="file-name" v-if="file2">
{{ file2.name }}
</span>
</b-upload>
</b-field>
<div style="text-align:center;">
<b-button @click="close" :loading="loading">cancel</b-button>
<b-button class="is-primary" @click="upload" :loading="loading">Ok</b-button>
</div>
</div>
</div>
</b-modal>
</div>
</template>
<script lang="ts">
import { Component, Vue } from "nuxt-property-decorator"
import importCsv from "@/modules/importCsv"
@Component({})
export default class extends Vue {
file1: any = null
file2: any = null
loading: boolean = false
showModal: boolean = false
errors: any = {}
async upload() {
const response = await importCsv.importVsim(this.file2)
console.log(response)
}
open() {
this.errors = {}
this.showModal = true
}
close() {
this.showModal = false
}
}
</script>