diff options
| -rw-r--r-- | weed/server/filer_ui/filer.html | 84 |
1 files changed, 79 insertions, 5 deletions
diff --git a/weed/server/filer_ui/filer.html b/weed/server/filer_ui/filer.html index 939f3f419..e4dd32f50 100644 --- a/weed/server/filer_ui/filer.html +++ b/weed/server/filer_ui/filer.html @@ -44,6 +44,25 @@ border-radius: 2px; } + .footer { + position: absolute; + bottom: 10px; + right: 10%; + min-width: 30%; + } + + .progress-table { + width: 100%; + } + + .progress-table-file-name { + text-align: right; + } + + .progress-table-percent { + width: 60px; + text-align: right; + } </style> </head> <body> @@ -62,7 +81,7 @@ </a> {{ end }} <label class="button" for="fileElem">Upload</label> - <label class="button" onclick="handleCreateDir()">Create Dir</label> + <label class="button" onclick="handleCreateDir()">New Folder</label> </div> </div> @@ -125,12 +144,14 @@ <br/> <br/> - + <div id="progress-area" class="footer" style="display: none;"> + </div> </div> </body> <script type="text/javascript"> // ************************ Drag and drop ***************** // let dropArea = document.getElementById("drop-area"); + let progressArea = document.getElementById("progress-area"); // Prevent default drag behaviors ;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { @@ -170,18 +191,71 @@ handleFiles(files); } + var uploadList = {}; + function handleFiles(files) { files = [...files]; + files.forEach(startUpload); + renderProgress(); files.forEach(uploadFile); - window.location.reload(); + } + + function startUpload(file, i) { + uploadList[file.name] = {'name': file.name, 'percent': 0, 'finish': false}; + } + + function renderProgress() { + var values = Object.values(uploadList); + var html = '<table class="progress-table">\n'; + for (let i of values) { + html += '<tr>\n<td class="progress-table-file-name">' + i.name + '</td>\n'; + html += '<td class="progress-table-percent">' + i.percent + '% </td>\n</tr>\n'; + } + html += '</table>\n'; + progressArea.innerHTML = html; + if (values.length > 0) { + progressArea.attributes.style.value = ''; + } + console.log('Render Progress', values); + } + + function reportProgress(file, percent) { + var item = uploadList[file] + item.percent = percent; + renderProgress(); + } + + function finishUpload(file) { + uploadList[file]['finish'] = true; + renderProgress(); + var allFinish = true; + for (let i of Object.values(uploadList)) { + if (!i.finish) { + allFinish = false; + break; + } + } + if (allFinish) { + console.log('All Finish'); + window.location.reload(); + } } function uploadFile(file, i) { var url = window.location.href; var xhr = new XMLHttpRequest(); + var fileName = file.name; + xhr.upload.addEventListener('progress', function(e) { + if (e.lengthComputable) { + var percent = Math.ceil((e.loaded / e.total) * 100); + reportProgress(fileName, percent) + } + }); + xhr.upload.addEventListener('loadend', function(e) { + finishUpload(fileName); + }); var formData = new FormData(); - xhr.open('POST', url, false); - + xhr.open('POST', url, true); formData.append('file', file); xhr.send(formData); } |