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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
|
<template>
<div class="mk-uploader">
<ol v-if="uploads.length > 0">
<li v-for="ctx in uploads" :key="ctx.id">
<div class="img" :style="{ backgroundImage: `url(${ ctx.img })` }"></div>
<div class="top">
<p class="name"><fa icon="spinner" pulse/>{{ ctx.name }}</p>
<p class="status">
<span class="initing" v-if="ctx.progress == undefined">{{ $t('waiting') }}<mk-ellipsis/></span>
<span class="kb" v-if="ctx.progress != undefined">{{ String(Math.floor(ctx.progress.value / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }}<i>KB</i> / {{ String(Math.floor(ctx.progress.max / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }}<i>KB</i></span>
<span class="percentage" v-if="ctx.progress != undefined">{{ Math.floor((ctx.progress.value / ctx.progress.max) * 100) }}</span>
</p>
</div>
<progress v-if="ctx.progress != undefined && ctx.progress.value != ctx.progress.max" :value="ctx.progress.value" :max="ctx.progress.max"></progress>
<div class="progress initing" v-if="ctx.progress == undefined"></div>
<div class="progress waiting" v-if="ctx.progress != undefined && ctx.progress.value == ctx.progress.max"></div>
</li>
</ol>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../i18n';
import { apiUrl } from '../../../config';
import getMD5 from '../../scripts/get-md5';
export default Vue.extend({
i18n: i18n('common/views/components/uploader.vue'),
data() {
return {
uploads: []
};
},
methods: {
checkExistence(fileData: ArrayBuffer): Promise<any> {
return new Promise((resolve, reject) => {
const data = new FormData();
data.append('md5', getMD5(fileData));
this.$root.api('drive/files/check_existence', {
md5: getMD5(fileData)
}).then(resp => {
resolve(resp.file);
});
});
},
upload(file: File, folder: any) {
if (folder && typeof folder == 'object') folder = folder.id;
const id = Math.random();
const reader = new FileReader();
reader.onload = (e: any) => {
this.checkExistence(e.target.result).then(result => {
if (result !== null) {
this.$emit('uploaded', result);
return;
}
const ctx = {
id: id,
name: file.name || 'untitled',
progress: undefined,
img: window.URL.createObjectURL(file)
};
this.uploads.push(ctx);
this.$emit('change', this.uploads);
const data = new FormData();
data.append('i', this.$store.state.i.token);
data.append('force', 'true');
data.append('file', file);
if (folder) data.append('folderId', folder);
const xhr = new XMLHttpRequest();
xhr.open('POST', apiUrl + '/drive/files/create', true);
xhr.onload = (e: any) => {
const driveFile = JSON.parse(e.target.response);
this.$emit('uploaded', driveFile);
this.uploads = this.uploads.filter(x => x.id != id);
this.$emit('change', this.uploads);
};
xhr.upload.onprogress = e => {
if (e.lengthComputable) {
if (ctx.progress == undefined) ctx.progress = {};
ctx.progress.max = e.total;
ctx.progress.value = e.loaded;
}
};
xhr.send(data);
})
}
reader.readAsArrayBuffer(file);
}
}
});
</script>
<style lang="stylus" scoped>
.mk-uploader
overflow auto
&:empty
display none
> ol
display block
margin 0
padding 0
list-style none
> li
display grid
margin 8px 0 0 0
padding 0
height 36px
width: 100%
box-shadow 0 -1px 0 var(--primaryAlpha01)
border-top solid 8px transparent
grid-template-columns 36px calc(100% - 44px)
grid-template-rows 1fr 8px
column-gap 8px
box-sizing content-box
&:first-child
margin 0
box-shadow none
border-top none
> .img
display block
background-size cover
background-position center center
grid-column 1 / 2
grid-row 1 / 3
> .top
display flex
grid-column 2 / 3
grid-row 1 / 2
> .name
display block
padding 0 8px 0 0
margin 0
font-size 0.8em
color var(--primaryAlpha07)
white-space nowrap
text-overflow ellipsis
overflow hidden
flex-shrink 1
> [data-icon]
margin-right 4px
> .status
display block
margin 0 0 0 auto
padding 0
font-size 0.8em
flex-shrink 0
> .initing
color var(--primaryAlpha05)
> .kb
color var(--primaryAlpha05)
> .percentage
display inline-block
width 48px
text-align right
color var(--primaryAlpha07)
&:after
content '%'
> progress
display block
background transparent
border none
border-radius 4px
overflow hidden
grid-column 2 / 3
grid-row 2 / 3
z-index 2
&::-webkit-progress-value
background var(--primary)
&::-webkit-progress-bar
background var(--primaryAlpha01)
> .progress
display block
border none
border-radius 4px
background linear-gradient(
45deg,
var(--primaryLighten30) 25%,
var(--primary) 25%,
var(--primary) 50%,
var(--primaryLighten30) 50%,
var(--primaryLighten30) 75%,
var(--primary) 75%,
var(--primary)
)
background-size 32px 32px
animation bg 1.5s linear infinite
grid-column 2 / 3
grid-row 2 / 3
z-index 1
&.initing
opacity 0.3
@keyframes bg
from {background-position: 0 0;}
to {background-position: -64px 32px;}
</style>
|
