UploadFiles.vue
2.38 KB
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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<template>
<div>
<v-text-field
:label="label"
@click="clickInputTag"
v-model="fileName"
append-icon="attach_file"
></v-text-field>
<input
type="file"
style="display: none"
:id="id"
:ref="reference"
accept="image/*"
@change="convertToBase64()"
/>
</div>
</template>
<script >
export default {
props: ["label", "reference", "id", "trigger"],
data() {
return {
fileToLoad: "",
fileName: "",
fileInBase64: ""
};
},
methods: {
clickInputTag() {
this.$refs[this.reference].click();
},
convertToBase64(e) {
//Read File
var selectedFile = document.getElementById(this.id).files;
//Check File is not Empty
if (selectedFile.length > 0) {
// Select the very first file from list
this.fileToLoad = selectedFile[0];
this.fileName = selectedFile[0].name;
// FileReader function for read the file.
var fileReader = new FileReader();
// Onload of file read the file content
let vm = this;
fileReader.onload = function(fileLoadedEvent) {
vm.fileInBase64 = fileLoadedEvent.target.result;
// Print data in console
console.log(vm.fileInBase64);
var str = vm.fileInBase64;
const [baseUrl, requiredUrl] = str.split(/,/);
console.log("required - ", requiredUrl);
let fileData = {
fileName: this.fileName,
fileInBase64: requiredUrl
};
vm.$emit("fileSelected", fileData);
};
// Convert data to base64
fileReader.readAsDataURL(this.fileToLoad);
}
},
resetInput(params) {
// RESET INPUT ELEMENT,fileName and selectedfile array
console.log("reference is - ", this.reference);
this.$refs[this.reference].type = "text";
this.$refs[this.reference].type = "file";
this.fileName = "";
this.fileToLoad;
this.fileInBase64 = null;
let fileData = {
fileName: this.fileName,
fileInBase64: this.fileInBase64
};
vm.$emit("fileSelected", fileData);
}
},
beforeDestroy() {
this.resetInput();
},
computed: {
respondToTrigger() {
this.respondToTrigger = this.trigger;
if ((this.respondToTrigger = "reset")) {
this.resetInput;
}
}
}
};
</script>
<style scoped >
</style>