|
33 | 33 |
|
34 | 34 | .dropBox {width:100vw; height:100vh; margin-top: -200px; padding-top: 200px;} |
35 | 35 |
|
| 36 | + #uploaddir{ |
| 37 | + background-color: #2E3134; |
| 38 | + font-size:16px; |
| 39 | + font-weight:bold; |
| 40 | + color:#7f858a; |
| 41 | + padding: 40px 50px; |
| 42 | + margin-bottom: 30px; |
| 43 | + } |
| 44 | + |
| 45 | + #uploaddir a{ |
| 46 | + background-color:#007a96; |
| 47 | + padding:12px 26px; |
| 48 | + color:#fff; |
| 49 | + font-size:14px; |
| 50 | + border-radius:2px; |
| 51 | + cursor:pointer; |
| 52 | + margin-top:12px; |
| 53 | + line-height:1; |
| 54 | + margin-left: 10px; |
| 55 | + } |
| 56 | + #selectedDir { |
| 57 | + margin-top:20px; |
| 58 | + } |
36 | 59 | #upload{ |
37 | 60 | font-family:'PT Sans Narrow', sans-serif; |
38 | 61 | background-color:#373a3d; |
|
140 | 163 | position: absolute; |
141 | 164 | } |
142 | 165 |
|
| 166 | + .delete:after{ |
| 167 | + color: #ff0000; |
| 168 | + content: "\2718"; |
| 169 | + } |
| 170 | + |
| 171 | + .uploaded:after{ |
| 172 | + color: #00ff00; |
| 173 | + content: "\2714"; |
| 174 | + } |
| 175 | + |
143 | 176 | #upload ul li span{ |
144 | 177 | width: 15px; |
145 | 178 | height: 12px; |
146 | | - background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAaCAYAAABozQZiAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpFQUY1MzY0QUU3QjdFMjExODE0NkUyMUJBNERDNDk0NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpCOTc5MTBDQ0I3RUYxMUUyOUVBQkNFOURERDIzQkU4NSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpCOTc5MTBDQkI3RUYxMUUyOUVBQkNFOURERDIzQkU4NSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3MiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpFQUY1MzY0QUU3QjdFMjExODE0NkUyMUJBNERDNDk0NyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpFQUY1MzY0QUU3QjdFMjExODE0NkUyMUJBNERDNDk0NyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvX6SiYAAAGjSURBVHjanJRPRMRREMfbNtE19hQlolNdomsRaZUiIlHKdiml7CpFolU6pEOWTUTRJZKIakmHsqQ99UedOiT2lG6xRPSdzFtjGi+/ho99836/78z8Zt7bUN3VfElAKwcRkC/9h/AAPIKmsgDCMNgB3ezvB8m8BQZ4/QkmSVwJbsCcR7gOYrz+Av0gQ2WfgWaGvimphEsgLvwRcEQLypxVLy4KP678cbDnHMqc4GZMiQBU2huX62wWbMqSXLenWeDKW1alr4A13QjZ7YT1AmwDLFhd1KOi0naFf8lVmWYdklHuQTXo8g3eOiT07UOgFXy4zcPB2wpTjAdpcA8iVgbs0yTe8dsi90N3NdEUfifYfwBtPCZn9CzF6wJXlGt8Of3JXCVebAAXfOXIxoTQfVJYlk3n9NgIQGc9LfYpaxRcSzHdkD4jwKoStqujXOy2FUBnzPpGRQHODfErePprzjHVHGf1qom/xCTcVlXkPFMoiocNYQ/PM+MLQOIZJexlUUGsZYBOKaYRPAvhieq0DJCUt45uVZ5LrLXGIQJ0uP8uZ98CDADM9WkEBoK0xwAAAABJRU5ErkJggg==') no-repeat; |
| 179 | + cursor:pointer; |
147 | 180 | position: absolute; |
148 | 181 | top: 34px; |
149 | 182 | right: 33px; |
150 | | - cursor:pointer; |
| 183 | + font-size:18px; |
151 | 184 | } |
152 | 185 |
|
153 | 186 | #upload ul li.working span{ |
|
189 | 222 | var chunkSize = 128; |
190 | 223 | var totalUploaded = 0; |
191 | 224 |
|
192 | | - var tpl = '<li class="working" id="file%filenum%"><div class="chart" id="graph%filenum%" data-percent="0"></div><p>%filename%<i>%filesize%</i></p><span id="fileStatus%filenum%" onclick="DeleteFiles(%filenum%);"></span></li>'; |
| 225 | + var tpl = '<li class="working" id="file%filenum%"><div class="chart" id="graph%filenum%" data-percent="0"></div><p>%filename%<i>%filesize%</i></p><span class="delete" id="fileStatus%filenum%" onclick="DeleteFiles(%filenum%);"></span></li>'; |
193 | 226 |
|
194 | 227 | document.addEventListener("DOMContentLoaded", function() { |
195 | 228 | var dropbox; |
|
200 | 233 | dropbox.addEventListener("drop", drop, false); |
201 | 234 |
|
202 | 235 | UpdateFileList(); |
| 236 | + |
| 237 | + UploadDir("http"); |
203 | 238 | }); |
204 | 239 |
|
205 | 240 | function dragenter(e) { |
|
235 | 270 | var fileNames = {}; |
236 | 271 |
|
237 | 272 | for (var i = 0; i < filesCount; i++) { |
238 | | - fileNames[tfiles[i].name] = i; |
| 273 | + fileNames[uploadDir + tfiles[i].name] = i; |
239 | 274 | } |
240 | 275 |
|
241 | 276 | Keys(fileNames).sort(function(a,b){var c=a.toLowerCase(),d=b.toLowerCase();return c<d?-1:c>d?1:0}).forEach(function(item) { |
242 | 277 | var i = fileNames[item]; |
243 | 278 |
|
244 | | - var append = tpl.replace(/%filename%/g, tfiles[i].name); |
| 279 | + var append = tpl.replace(/%filename%/g, uploadDir + tfiles[i].name); |
245 | 280 | append = append.replace(/%filesize%/g, formatFileSize(tfiles[i].size)); |
246 | 281 | append = append.replace(/%filenum%/g, i); |
247 | 282 |
|
|
380 | 415 | totalUploaded = 0; |
381 | 416 |
|
382 | 417 | if (statusElement) { |
383 | | - statusElement.style["background-position"] = "0 3px"; |
| 418 | + statusElement.classList.add("uploaded"); |
384 | 419 | } |
385 | 420 |
|
386 | 421 | if (currentUploadingFile < files.length) { |
|
396 | 431 | fileUploadRequest = 0; |
397 | 432 | } |
398 | 433 |
|
399 | | - lastRequest = 'upload.lua?cmd=upload&filename=' + file.name + '&filesize=' + file.size + '&len=' + chunkLen + '&offset=' + sendingOffset + '&data=' + filedata; |
| 434 | + lastRequest = 'upload.lua?cmd=upload&filename=' + uploadDir + file.name + '&filesize=' + file.size + '&len=' + chunkLen + '&offset=' + sendingOffset + '&data=' + filedata; |
400 | 435 |
|
401 | 436 | fileUploadRequest.timeout = 5000; |
402 | 437 | fileUploadRequest.open('GET', lastRequest, true); |
|
406 | 441 | fr.readAsArrayBuffer(file); |
407 | 442 | } |
408 | 443 |
|
| 444 | + function UploadDir(dir) { |
| 445 | + if (uploadingInProgress == 0) { |
| 446 | + document.getElementById('dir').innerHTML = "/" + dir; |
| 447 | + uploadDir = dir; |
| 448 | + if (!(uploadDir == "")) { |
| 449 | + uploadDir += "/"; |
| 450 | + } |
| 451 | + } |
| 452 | + } |
| 453 | + |
409 | 454 | function formatFileSize(bytes) { |
410 | 455 | if (typeof bytes !== 'number') { |
411 | 456 | return ''; |
|
494 | 539 |
|
495 | 540 | document.getElementById('fileInfo').innerHTML = ''; |
496 | 541 |
|
497 | | - var tpl = '<li class="working"><p style="left: 30px;">%filenamelink%<i>%filesize%</i></p><span id="fileStatus" onclick="RemoveFile(\'%filename%\');"></span></li>'; |
| 542 | + var tpl = '<li class="working"><p style="left: 30px;">%filenamelink%<i>%filesize%</i></p><span class="delete" id="fileStatus" onclick="RemoveFile(\'%filename%\');"></span></li>'; |
498 | 543 | var tplTotal = '<li class="working"><p style="left: 30px;">Used:<i>%used%</i></p></li><li class="working"><p style="left: 30px;">Free:<i>%free%</i></p></li><li class="working"><p style="left: 30px;">Total:<i>%total%</i></p></li>'; |
499 | 544 |
|
500 | 545 | var append, link; |
501 | 546 |
|
502 | 547 | Keys(fileList).sort(function(a,b){var c=a.toLowerCase(),d=b.toLowerCase();return c<d?-1:c>d?1:0}).forEach(function(item) { |
503 | | - if (!(item.match(/\.lc$/ig))) { |
504 | | - link = item.replace(/\.gz$/g, ''); |
| 548 | + if (!item.match(/\.lc$/ig) && item.match(/^http\//ig)) { |
| 549 | + link = item.replace(/\.gz$/g, '').replace(/^http\//g, ''); |
505 | 550 | append = tpl.replace(/%filenamelink%/g, '<a href="' + link + '" target="_blank">' + item + '</a>'); |
506 | 551 | } |
507 | 552 | else { |
|
549 | 594 | <body> |
550 | 595 | <div id="dropbox" class="dropBox"> |
551 | 596 | <div id="upload"> |
| 597 | + <div id="uploaddir" class="uploadDir"> |
| 598 | + <a onclick='UploadDir("");'>/</a> |
| 599 | + <a onclick='UploadDir("http");'>/http</a> |
| 600 | + <div id="selectedDir">selected Directory: <div id = "dir">bla</div></div></div> |
552 | 601 | <div id="drop"> |
553 | 602 | Drop Here |
554 | 603 |
|
|
0 commit comments