This repository has been archived by the owner on Jan 6, 2023. It is now read-only.
/
input.vue
66 lines (56 loc) · 1.58 KB
/
input.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<template>
<div class="interface-file-upload">
<input
v-if="!value"
ref="file" type="file" class="filepond">
<div v-else>
{{ value }}
</div>
</div>
</template>
<script>
import * as FilePond from "filepond";
import FilePondPluginImagePreview from "filepond-plugin-image-preview";
import FilePondPluginFileEncode from "filepond-plugin-file-encode";
import "filepond/dist/filepond.min.css";
import "filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css";
import mixin from "../../../mixins/interface";
FilePond.registerPlugin(FilePondPluginImagePreview, FilePondPluginFileEncode);
export default {
mixins: [mixin],
mounted() {
this.pond = FilePond.create(this.$refs.file);
this.pond.on("addfile", this.processFile);
},
beforeDestroy() {
this.pond.destroy();
},
methods: {
processFile(e) {
const filePondInput = document.querySelector(
'.interface-file-upload input[type="hidden"][name="filepond"]'
);
const fileInfo = JSON.parse(filePondInput.value);
if (this.options.nameField) {
this.$emit("setfield", {
field: this.options.nameField,
value: e.detail.name
});
}
if (this.options.sizeField) {
this.$emit("setfield", {
field: this.options.sizeField,
value: e.detail.size
});
}
if (this.options.typeField) {
this.$emit("setfield", {
field: this.options.typeField,
value: e.detail.type
});
}
this.$emit("input", fileInfo.data);
}
}
};
</script>