www: filebrowser upload dialog improvements

Show number of bytes transferred. Don't let long filenames overflow the dialog.
marcone · Feb 8, 2024 · 8cb298d · 8cb298d
1 parent fc35675
commit 8cb298d
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 21 deletions.
diff --git a/teslausb-www/html/filebrowser.css b/teslausb-www/html/filebrowser.css
@@ -317,6 +317,7 @@ details > ul.fb-droptarget {
 .fb-dropinfo-line2 {
   position: absolute;
   left: 20px;
+  right: 20px;
   top: 40px;
   height: 30px;
   white-space: nowrap;
@@ -331,6 +332,24 @@ details > ul.fb-droptarget {
   display: none;
 }
 
+.fb-dropinfo-line3 {
+  position: absolute;
+  left: 20px;
+  right: 60px;
+  bottom: 5px;
+  height: 30px;
+  white-space: nowrap;
+  overflow: auto;
+  text-align: left;
+  scroll-behavior: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.fb-dropinfo-line3::-webkit-scrollbar {
+  display: none;
+}
+
 .fb-dropinfo-closebutton {
   position: absolute;
   top: 5px;
@@ -353,8 +372,8 @@ details > ul.fb-droptarget {
 
 .fb-dropinfo-progress {
   position: absolute;
-  left: 8px;
-  width: calc(350px - 16px);
+  left: 20px;
+  width: calc(100% - 28px);
   top: 90px;
 }
 

diff --git a/teslausb-www/html/filebrowser.js b/teslausb-www/html/filebrowser.js
@@ -26,6 +26,7 @@ class FileBrowser {
           <div class="fb-dropinfo-closebutton">&#x2716</div>
           <div class="fb-dropinfo-line2"></div>
           <progress class="fb-dropinfo-progress" value="0" max="100"></progress>
+          <div class="fb-dropinfo-line3"></div>
           <button class="fb-dropinfo-cancel">Cancel</button>
         </div>
       </div>
@@ -173,7 +174,7 @@ class FileBrowser {
     const url = this.downloadURLForSelection().substr(1);
     const name = url.substr(0, url.indexOf(":"));
     const url2 = url.substr(url.indexOf(":") + 1);
-    console.log(`name: ${name}, url: ${url2}`);
+    this.log(`name: ${name}, url: ${url2}`);
 
     var elem = document.createElement('a');
     elem.setAttribute('href', url2);
@@ -828,11 +829,11 @@ class FileBrowser {
   }
 
   hasExternalFiles(ev) {
-    console.log(`${ev.dataTransfer.items.length} items dropped`);
-    console.log(ev.dataTransfer.items.length);
-    console.log(...ev.dataTransfer.items);
-    console.log(ev.dataTransfer);
-    console.log(ev);
+    this.log(`${ev.dataTransfer.items.length} items dropped`);
+    this.log(ev.dataTransfer.items.length);
+    this.log(...ev.dataTransfer.items);
+    this.log(ev.dataTransfer);
+    this.log(ev);
     if (ev.dataTransfer.items.length > 0) {
       return true;
     }
@@ -889,13 +890,8 @@ class FileBrowser {
     p.style.visibility="hidden";
   }
 
-  updateDropInfo(numfiles, totalsize) {
-    var l2 = document.querySelector(".fb-dropinfo-line2");
-    var str = `${numfiles} file`;
-    if (numfiles != 1) {
-      str += "s";
-    }
-    str += ", ";
+  niceNumber(totalsize) {
+    var str = "";
     if (totalsize < 100000) {
       str += `${totalsize} bytes`
     } else if (totalsize < 2000000) {
@@ -905,6 +901,16 @@ class FileBrowser {
     } else {
       str += `${(totalsize / (1024 * 1024 * 1024)).toFixed(2)} GB`
     }
+    return str;
+  }
+
+  updateDropInfo(numfiles, totalsize) {
+    var l2 = document.querySelector(".fb-dropinfo-line2");
+    var str = `${numfiles} file`;
+    if (numfiles != 1) {
+      str += "s";
+    }
+    str += ", " + this.niceNumber(totalsize);
     l2.innerText = str;
 
   }
@@ -958,7 +964,7 @@ class FileBrowser {
       // Use DataTransferItemList interface to access the file(s)
       [...datatransferitems].forEach((item, i) => {
         var entry = item.webkitGetAsEntry();
-        console.log(entry);
+        this.log(entry);
         if (entry != null) {
           queue.push(entry);
         }
@@ -986,7 +992,7 @@ class FileBrowser {
         this.updateDropInfo(fileList.length, totalBytes);
       }
     }
-    console.log(`total size: ${totalBytes}`);
+    this.log(`total size: ${totalBytes}`);
     var l1 = document.querySelector(".fb-dropinfo-line1");
     l1.numitems = fileList.length;
 
@@ -1014,7 +1020,7 @@ class FileBrowser {
     if (fileList.length > 0 && ! this.cancelUpload) {
       var f = fileList.shift();
       var l1 = document.querySelector(".fb-dropinfo-line1");
-      l1.innerText = `${l1.numitems - fileList.length}/${l1.numitems}`;
+      l1.innerText = `File ${l1.numitems - fileList.length} / ${l1.numitems}`;
       var l2 = document.querySelector(".fb-dropinfo-line2");
       l2.innerText = f.name;
       this.uploadFile(destpath, f,
@@ -1029,8 +1035,15 @@ class FileBrowser {
       },
       (e, request) => {
         // progress function
-        var p = document.querySelector(".fb-dropinfo-progress");
+        const p = document.querySelector(".fb-dropinfo-progress");
         p.value += (e.loaded - lastLoaded);
+        const size1 = this.niceNumber(p.value);
+        const size2 = this.niceNumber(p.max);
+        const s = `${size1} / ${size2}`;
+        const l3 = document.querySelector(".fb-dropinfo-line3");
+        if (l3.innerText != s) {
+          l3.innerText = s;
+        }
         lastLoaded = e.loaded;
         if (this.cancelUpload) {
           this.log("cancelling upload");
@@ -1098,7 +1111,7 @@ class FileBrowser {
   }
 
   drop(ev) {
-    console.log(ev);
+    this.log(ev);
     ev.preventDefault();
     ev.target.classList.remove("fb-droptarget");
     if (this.dragged_path == ev.dataTransfer.getData("text/plain")) {

diff --git a/teslausb-www/html/index.html b/teslausb-www/html/index.html
@@ -2667,7 +2667,6 @@
 }
 
 function setCurrentTabName() {
-  console.log("setCurrentTabName");
   const checkedradio = document.querySelector(".tabradiobtn:checked");
   const checkedlabel = document.querySelector(`label[for=${checkedradio.id}]`).textContent;
   const tabname = document.querySelector(".currenttabname");