Browse Source

wip(gui-v2): DnD file uploader

pull/2795/head
Wing-Kam Wong 2 years ago
parent
commit
f3e9261eda
  1. 43
      packages/nc-gui-v2/components/dlg/FileImport.vue

43
packages/nc-gui-v2/components/dlg/FileImport.vue

@ -1,7 +1,11 @@
<script setup lang="ts">
import { useToast } from 'vue-toastification'
import type { UploadChangeParam } from 'ant-design-vue'
import { useI18n } from 'vue-i18n'
import MdiFileIcon from '~icons/mdi/file-plus-outline'
import MdiFileUploadOutlineIcon from '~icons/mdi/file-upload-outline'
import MdiLinkVariantIcon from '~icons/mdi/link-variant'
import MdiCodeJSONIcon from '~icons/mdi/code-json'
const { t } = useI18n()
interface Props {
@ -11,6 +15,7 @@ interface Props {
const { modelValue, importType } = defineProps<Props>()
const toast = useToast()
const emit = defineEmits(['update:modelValue'])
const activeKey = ref('upload')
const fileList = ref([])
@ -39,36 +44,45 @@ const handleChange = (info: UploadChangeParam) => {
console.log(info.file, info.fileList)
}
if (status === 'done') {
console.log(`${info.file.name} file uploaded successfully.`)
toast.success(`${info.file.name} file uploaded successfully.`)
} else if (status === 'error') {
console.log(`${info.file.name} file upload failed.`)
toast.error(`${info.file.name} file upload failed.`)
}
}
</script>
<template>
<v-dialog v-model="dialogShow" persistent @keydown.esc="dialogShow = false">
<v-card style="height: 400px; width: 700px">
<v-card class="w-300 max-h-300">
<a-tabs v-model:activeKey="activeKey" hide-add type="editable-card" :tab-position="top">
<a-tab-pane key="upload" :closable="false">
<template #tab>
<span>
<MdiTableIcon class="text-primary mdi-icons" />
<span class="flex items-center gap-2">
<MdiFileUploadOutlineIcon />
Upload
</span>
</template>
<a-upload-dragger v-model:fileList="fileList" name="file" :multiple="true" @change="handleChange" @drop="handleDrop">
<MdiFileIcon />
<div class="pl-10 pr-10 pb-10 pt-5">
<a-upload-dragger
v-model:fileList="fileList"
name="file"
:multiple="true"
@change="handleChange"
@drop="handleDrop"
list-type="picture"
>
<MdiFileIcon size="large" />
<p class="ant-upload-text">Click or drag file to this area to upload</p>
<p class="ant-upload-hint">
{{ uploadHint }}
</p>
</a-upload-dragger>
</div>
</a-tab-pane>
<a-tab-pane v-if="importType === 'json'" key="json" :closable="false">
<template #tab>
<span>
<MdiTableIcon class="text-primary mdi-icons" />
<span class="flex items-center gap-2">
<MdiCodeJSONIcon />
Json String
</span>
</template>
@ -76,8 +90,8 @@ const handleChange = (info: UploadChangeParam) => {
</a-tab-pane>
<a-tab-pane v-else key="url" :closable="false">
<template #tab>
<span>
<MdiTableIcon class="text-primary mdi-icons" />
<span class="flex items-center gap-2">
<MdiLinkVariantIcon />
Url
</span>
</template>
@ -88,4 +102,9 @@ const handleChange = (info: UploadChangeParam) => {
</v-dialog>
</template>
<style scoped lang="scss"></style>
<style scoped lang="scss">
:deep(.ant-upload-list) {
overflow: auto;
height: 300px;
}
</style>

Loading…
Cancel
Save