Delete FileType.vue component
Taylor committed
Apr 16, 2024 at 14:04 UTC
a12c58784c591f5d0f3747af649fdb3fe9c1434a
1 file changed
-97
src/components/connectors/ConfigForm/FormTypes/FileType.vue
deleted
-97
@@ -1,97 +0,0 @@
1
-<template>
2
- <el-form :model="form" status-icon :rules="rules" label-width="120px" ref="formRef" label-position="top">
3
- <el-form-item label="File" prop="connector_file">
4
- <el-upload
5
- class="file-upload-wrap"
6
- drag
7
- :limit="1"
8
- :auto-upload="false"
9
- :on-exceed="handleExceed"
10
- :on-change="handleChange"
11
- ref="uploadRef"
12
- accept=".yaml, .YAML"
13
- >
14
- <el-icon class="el-icon--upload"><upload-filled /></el-icon>
15
- <div class="el-upload__text">
16
- Drop file here or
17
- <em>click to upload</em>
18
- </div>
19
- <template #tip>
20
- <div class="el-upload__tip text-red">Limit 1 file .YAML, new file will cover the old file</div>
21
- </template>
22
- </el-upload>
23
- </el-form-item>
24
- </el-form>
25
-</template>
26
-
27
-<script setup lang="ts">
28
-import { FormInstance } from "element-plus"
29
-import type { UploadFile, UploadInstance, UploadProps, UploadRawFile } from "element-plus"
30
-import { UploadFilled } from "@element-plus/icons-vue"
31
-import { onMounted, reactive, ref, toRefs } from "vue"
32
-
33
-export interface IFileForm {
34
- connector_file: File | null
35
-}
36
-
37
-const emit = defineEmits<{
38
- (e: "mounted", value: FormInstance): void
39
-}>()
40
-
41
-const props = defineProps<{
42
- form: IFileForm
43
-}>()
44
-const { form } = toRefs(props)
45
-
46
-const formRef = ref<FormInstance>()
47
-const uploadRef = ref<UploadInstance>()
48
-
49
-const handleExceed: UploadProps["onExceed"] = (files: File[]) => {
50
- uploadRef.value!.clearFiles()
51
- const file = files[0] as UploadRawFile
52
- uploadRef.value!.handleStart(file)
53
-}
54
-
55
-const handleChange: UploadProps["onChange"] = (file: UploadFile) => {
56
- form.value.connector_file = file.raw
57
-}
58
-
59
-const validateFile = (rule: any, value: File, callback: any) => {
60
- console.log(value)
61
- if (!value) {
62
- return callback(new Error("Please input a valid File"))
63
- }
64
-
65
- if (value.type.indexOf("yaml") === -1) {
66
- return callback(new Error("Please input a valid File"))
67
- }
68
-
69
- return callback()
70
-}
71
-
72
-const rules = reactive({
73
- connector_file: [{ required: true, validator: validateFile, trigger: "blur" }]
74
-})
75
-
76
-onMounted(() => {
77
- if (formRef.value) {
78
- emit("mounted", formRef.value)
79
- }
80
-})
81
-</script>
82
-
83
-<style scoped lang="scss">
84
-.file-upload-wrap {
85
- width: 100%;
86
-
87
- .el-icon--upload {
88
- margin-bottom: 0px;
89
- }
90
-
91
- :deep() {
92
- .el-upload-dragger {
93
- padding: 20px 10px;
94
- }
95
- }
96
-}
97
-</style>