Skip to content

Commit c7ecd8f

Browse files
marjune163marjune163
committed
feat(tpls): add upload progress bar
1 parent ab6c123 commit c7ecd8f

File tree

7 files changed

+91
-19
lines changed

7 files changed

+91
-19
lines changed

‎.editorconfig‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ root = true
33
[*]
44
end_of_line = lf
55
insert_final_newline = true
6-
max_line_length = 120
6+
max_line_length = 140
77
indent_style = tab
88
indent_size = 4
99
charset = utf-8

‎src/tpl/asset/main.css‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -175,6 +175,7 @@ em {
175175
display: none;
176176
content: '';
177177
position: absolute;
178+
z-index: 1;
178179
left: 0;
179180
top: 0;
180181
right: 0;
@@ -195,9 +196,24 @@ em {
195196
}
196197

197198
.upload button {
199+
position: relative;
198200
margin-top: 0.5em;
199201
}
200202

203+
.upload button span {
204+
position: relative;
205+
}
206+
207+
.upload button .progress {
208+
position: absolute;
209+
left: 0;
210+
top: 0;
211+
bottom: 0;
212+
width: 0;
213+
opacity: 0.5;
214+
background: #c9c;
215+
}
216+
201217
.archive {
202218
margin: 1em;
203219
overflow: hidden;

‎src/tpl/asset/main.css.go‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -146,6 +146,7 @@ position: relative;
146146
display: none;
147147
content: '';
148148
position: absolute;
149+
z-index: 1;
149150
left: 0;
150151
top: 0;
151152
right: 0;
@@ -163,8 +164,21 @@ width: 100%;
163164
box-sizing: border-box;
164165
}
165166
.upload button {
167+
position: relative;
166168
margin-top: 0.5em;
167169
}
170+
.upload button span {
171+
position: relative;
172+
}
173+
.upload button .progress {
174+
position: absolute;
175+
left: 0;
176+
top: 0;
177+
bottom: 0;
178+
width: 0;
179+
opacity: 0.5;
180+
background: #c9c;
181+
}
168182
.archive {
169183
margin: 1em;
170184
overflow: hidden;

‎src/tpl/asset/main.js‎

Lines changed: 31 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
(function () {
2+
var strUndef = 'undefined';
3+
24
var classNone = 'none';
35
var classHeader = 'header';
4-
var leavingEvent = typeof window.onpagehide !== 'undefined' ? 'pagehide' : 'beforeunload';
6+
var leavingEvent = typeof window.onpagehide !== strUndef ? 'pagehide' : 'beforeunload';
57

68
var Enter = 'Enter';
79
var Escape = 'Escape';
@@ -470,7 +472,7 @@
470472
}
471473
}
472474

473-
if (typeof fileInput.webkitdirectory === 'undefined') {
475+
if (typeof fileInput.webkitdirectory === strUndef) {
474476
addClass(uploadType, classNone);
475477
return;
476478
}
@@ -581,23 +583,32 @@
581583
return;
582584
}
583585

584-
var btnSubmit = form.querySelector('.submit');
586+
var btnSubmit = form.querySelector('.submit') || form.querySelector('input[type=submit]');
585587
if (!btnSubmit) {
586588
return;
587589
}
588590

591+
var elProgress = btnSubmit.querySelector('.progress');
592+
589593
function onComplete() {
594+
if (elProgress) {
595+
elProgress.style.width = '';
596+
}
590597
btnSubmit.disabled = false;
591598
}
592599

593600
function onLoad() {
594601
location.reload();
595602
}
596603

597-
form.addEventListener('submit', function (e) {
598-
e.stopPropagation();
599-
e.preventDefault();
604+
function onProgress(e) {
605+
if (e.lengthComputable) {
606+
var percent = 100 * e.loaded / e.total;
607+
elProgress.style.width = percent + '%';
608+
}
609+
}
600610

611+
function uploadProgressively() {
601612
var files = Array.prototype.slice.call(fileInput.files);
602613
if (!files.length) {
603614
return;
@@ -614,13 +625,24 @@
614625
});
615626

616627
var xhr = new XMLHttpRequest();
617-
xhr.addEventListener('error', onComplete);
618-
xhr.addEventListener('load', onComplete);
619-
xhr.addEventListener('load', onLoad);
628+
xhr.upload.addEventListener('error', onComplete);
629+
xhr.upload.addEventListener('abort', onComplete);
630+
xhr.upload.addEventListener('load', onComplete);
631+
xhr.upload.addEventListener('load', onLoad);
632+
if (elProgress) {
633+
xhr.upload.addEventListener('progress', onProgress);
634+
}
620635

621636
xhr.open(form.method, form.action);
622637
xhr.send(parts);
623638
btnSubmit.disabled = true;
639+
}
640+
641+
form.addEventListener('submit', function (e) {
642+
e.stopPropagation();
643+
e.preventDefault();
644+
645+
uploadProgressively();
624646
});
625647
}
626648

‎src/tpl/asset/main.js.go‎

Lines changed: 27 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,10 @@ package asset
22

33
const mainJs = `
44
(function () {
5+
var strUndef = 'undefined';
56
var classNone = 'none';
67
var classHeader = 'header';
7-
var leavingEvent = typeof window.onpagehide !== 'undefined' ? 'pagehide' : 'beforeunload';
8+
var leavingEvent = typeof window.onpagehide !== strUndef ? 'pagehide' : 'beforeunload';
89
var Enter = 'Enter';
910
var Escape = 'Escape';
1011
var Esc = 'Esc';
@@ -420,7 +421,7 @@ e.target.click();
420421
break;
421422
}
422423
}
423-
if (typeof fileInput.webkitdirectory === 'undefined') {
424+
if (typeof fileInput.webkitdirectory === strUndef) {
424425
addClass(uploadType, classNone);
425426
return;
426427
}
@@ -515,19 +516,27 @@ function enableUploadProgress() { // also fix Safari upload filename has no path
515516
if (!FormData) {
516517
return;
517518
}
518-
var btnSubmit = form.querySelector('.submit');
519+
var btnSubmit = form.querySelector('.submit') || form.querySelector('input[type=submit]');
519520
if (!btnSubmit) {
520521
return;
521522
}
523+
var elProgress = btnSubmit.querySelector('.progress');
522524
function onComplete() {
525+
if (elProgress) {
526+
elProgress.style.width = '';
527+
}
523528
btnSubmit.disabled = false;
524529
}
525530
function onLoad() {
526531
location.reload();
527532
}
528-
form.addEventListener('submit', function (e) {
529-
e.stopPropagation();
530-
e.preventDefault();
533+
function onProgress(e) {
534+
if (e.lengthComputable) {
535+
var percent = 100 * e.loaded / e.total;
536+
elProgress.style.width = percent + '%';
537+
}
538+
}
539+
function uploadProgressively() {
531540
var files = Array.prototype.slice.call(fileInput.files);
532541
if (!files.length) {
533542
return;
@@ -542,12 +551,21 @@ parts.append(formName, file);
542551
}
543552
});
544553
var xhr = new XMLHttpRequest();
545-
xhr.addEventListener('error', onComplete);
546-
xhr.addEventListener('load', onComplete);
547-
xhr.addEventListener('load', onLoad);
554+
xhr.upload.addEventListener('error', onComplete);
555+
xhr.upload.addEventListener('abort', onComplete);
556+
xhr.upload.addEventListener('load', onComplete);
557+
xhr.upload.addEventListener('load', onLoad);
558+
if (elProgress) {
559+
xhr.upload.addEventListener('progress', onProgress);
560+
}
548561
xhr.open(form.method, form.action);
549562
xhr.send(parts);
550563
btnSubmit.disabled = true;
564+
}
565+
form.addEventListener('submit', function (e) {
566+
e.stopPropagation();
567+
e.preventDefault();
568+
uploadProgressively();
551569
});
552570
}
553571
enableAddDir();

‎src/tpl/page.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@
3737
<form method="POST" action="{{.SubItemPrefix}}?upload" enctype="multipart/form-data">
3838
<input type="file" name="file" multiple="multiple" class="file"/>
3939
<button type="submit" class="submit">
40+
<span class="progress"></span>
4041
<span class="if-enabled">Upload</span><span class="if-disabled">Uploading ...</span>
4142
</button>
4243
</form>

‎src/tpl/page.html.go‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ const pageTplStr = `
4545
<form method="POST" action="{{.SubItemPrefix}}?upload" enctype="multipart/form-data">
4646
<input type="file" name="file" multiple="multiple" class="file"/>
4747
<button type="submit" class="submit">
48+
<span class="progress"></span>
4849
<span class="if-enabled">Upload</span><span class="if-disabled">Uploading ...</span>
4950
</button>
5051
</form>

0 commit comments

Comments
 (0)