|
@@ -7,7 +7,7 @@
|
7
|
7
|
type="file"
|
8
|
8
|
accept=".jpeg, .jpg, .gif, .png"
|
9
|
9
|
value="Upload Photo"
|
10
|
|
- style="width: 0px;height: 0px;overflow: hidden;"
|
|
10
|
+ style="width: 0px; height: 0px; overflow: hidden"
|
11
|
11
|
name="images[]"
|
12
|
12
|
@change="imagesAdd"
|
13
|
13
|
:multiple="allowMultiple"
|
|
@@ -27,13 +27,22 @@
|
27
|
27
|
@change="updateList(i)"
|
28
|
28
|
:disabled="!mayEdit"
|
29
|
29
|
/>
|
30
|
|
- <label v-if="allowMultiple" for="checkbox" style="margin: 10px;">Main Image</label>
|
31
|
|
- <img :src="img" style="height:200px; width:150px; object-fit: cover;" />
|
|
30
|
+ <label v-if="allowMultiple" for="checkbox" style="margin: 10px"
|
|
31
|
+ >Main Image</label
|
|
32
|
+ >
|
|
33
|
+ <img
|
|
34
|
+ :src="img"
|
|
35
|
+ style="height: 200px; width: 150px; object-fit: cover"
|
|
36
|
+ />
|
32
|
37
|
<br />
|
33
|
38
|
<!-- <span class="input-group-text" align="center" style="width:150px" @click="removeImage(key)">
|
34
|
39
|
<eva-icon name="trash-2-outline" fill="#60CBEB"></eva-icon>Delete
|
35
|
40
|
</span>-->
|
36
|
|
- <button v-if="mayEdit" class="imageDeleteButton" @click="removeImage(i)">
|
|
41
|
+ <button
|
|
42
|
+ v-if="mayEdit"
|
|
43
|
+ class="imageDeleteButton"
|
|
44
|
+ @click="removeImage(i)"
|
|
45
|
+ >
|
37
|
46
|
<i class="fa fa-trash"></i>
|
38
|
47
|
</button>
|
39
|
48
|
</div>
|
|
@@ -48,14 +57,14 @@ export default {
|
48
|
57
|
loadedImages: Function,
|
49
|
58
|
mayEdit: { type: Boolean, default: () => true },
|
50
|
59
|
allowMultiple: { type: Boolean, default: () => true },
|
51
|
|
- savedImages: { type: Array, default: () => [] }
|
|
60
|
+ savedImages: { type: Array, default: () => [] },
|
52
|
61
|
},
|
53
|
62
|
data() {
|
54
|
63
|
return {
|
55
|
64
|
images: {},
|
56
|
65
|
image: [],
|
57
|
66
|
imagesDefault: [],
|
58
|
|
- maxSavedIndex: 0
|
|
67
|
+ maxSavedIndex: 0,
|
59
|
68
|
};
|
60
|
69
|
},
|
61
|
70
|
// Commented out for now.
|
|
@@ -76,9 +85,9 @@ export default {
|
76
|
85
|
const files = e.target.files || e.dataTransfer.files;
|
77
|
86
|
|
78
|
87
|
for (let i = 0; i < files.length; i++) {
|
79
|
|
- if (files[i].size > 1048576) {
|
|
88
|
+ if (files[i].size > 2097152) {
|
80
|
89
|
alert(
|
81
|
|
- "One or more of your images are over 1 mb size. Please ensure that all your files are under 1 mb in size."
|
|
90
|
+ "One or more of your images are over 2 mb size. Please ensure that all your files are under 2 mb in size."
|
82
|
91
|
);
|
83
|
92
|
return;
|
84
|
93
|
}
|
|
@@ -97,7 +106,7 @@ export default {
|
97
|
106
|
const reader = new FileReader();
|
98
|
107
|
var vm = this;
|
99
|
108
|
|
100
|
|
- reader.onload = e => {
|
|
109
|
+ reader.onload = (e) => {
|
101
|
110
|
vm.image.push(e.target.result);
|
102
|
111
|
};
|
103
|
112
|
reader.readAsDataURL(file[i]);
|
|
@@ -127,7 +136,7 @@ export default {
|
127
|
136
|
}
|
128
|
137
|
this.$emit("DefaultImage", index);
|
129
|
138
|
}
|
130
|
|
- }
|
|
139
|
+ },
|
131
|
140
|
},
|
132
|
141
|
watch: {
|
133
|
142
|
savedImages: {
|
|
@@ -142,9 +151,9 @@ export default {
|
142
|
151
|
this.maxSavedIndex = i;
|
143
|
152
|
}
|
144
|
153
|
}
|
145
|
|
- }
|
146
|
|
- }
|
147
|
|
- }
|
|
154
|
+ },
|
|
155
|
+ },
|
|
156
|
+ },
|
148
|
157
|
};
|
149
|
158
|
</script>
|
150
|
159
|
|