7fcc1e23a0d728ecbd075342576d1b989829eecb
chmalee
  Tue Apr 9 11:21:10 2024 -0700
Make progress meter work with tus uploads, fix typo in error checks and abort functions

diff --git src/hg/js/hgMyData.js src/hg/js/hgMyData.js
index 0b11d29..2859570 100644
--- src/hg/js/hgMyData.js
+++ src/hg/js/hgMyData.js
@@ -111,31 +111,31 @@
         let btnRow = document.getElementById("chooseAndSendFilesRow");
         if (btnRow.lastChild.textContent === "Cancel all") {
             btnRow.removeChild(btnRow.lastChild);
         }
         togglePickStateMessage(true);
     }
 
     function addCancelAllButton() {
         let btnRow = document.getElementById("chooseAndSendFilesRow");
         let newBtn = newButton("Cancel all");
         newBtn.addEventListener("click", (e) => {
             while (uiState.pendingQueue.length > 0) {
                 let [req, f] = uiState.pendingQueue.pop();
                 // we only need to abort requests that haven't finished yet
                 if (req._req !== null) {
-                    if (_req._xhr.readyState != XMLHttpRequest.DONE) {
+                    if (req._req._xhr.readyState != XMLHttpRequest.DONE) {
                         req.abort(true);
                     }
                 }
                 let li = liForFile(f);
                 if (li !== null) {
                     // the xhr event handlers should handle this but just in case
                     li.removeChild(li.lastChild);
                 }
             }
         });
         btnRow.appendChild(newBtn);
     }
 
     function makeNewProgMeter(fileName) {
         // create a progress meter for this filename
@@ -183,43 +183,53 @@
                 }
             }
             // remove the file from the list the user can see
             let li = document.getElementById(req.name+"#li");
             li.parentNode.removeChild(li);
             if (uiState.pendingQueue.length === 0) {
                 removeCancelAllButton();
             }
             const d = new Date(req.lastModified);
             newReqObj = {"createTime": d.toJSON(), "name": req.name, "size": req.size};
             addNewUploadedFileToTable(newReqObj);
         };
 
         let onError = function(err) {
             removeCancelAllButton();
+            if (err.originalResponse !== null) {
                 alert(err.originalResponse._xhr.responseText);
+            } else {
+                alert(err);
+            }
+        };
+
+        let onProgress = function(bytesSent, bytesTotal) {
+            this.updateProgress((bytesSent / bytesTotal) * 100);
         };
 
         for (let f in uiState.toUpload) {
             file = uiState.toUpload[f];
             if (useTus) {
+                let progMeter = makeNewProgMeter(file.name);
                 let tusOptions = {
                     endpoint: tusdServer,
                     metadata: {
                         filename: file.name,
                         fileType: file.type,
                         fileSize: file.size
                     },
+                    onProgress: onProgress.bind(progMeter),
                     onBeforeRequest: onBeforeRequest,
                     onSuccess: onSuccess.bind(null, file),
                     onError: onError,
                     retryDelays: [1000],
                 };
                 // TODO: get the uploadUrl from the tusd server
                 // use a pre-create hook to validate the user
                 // and get an uploadUrl
                 let tusUpload = new tus.Upload(file, tusOptions);
                 uiState.pendingQueue.push([tusUpload, file]);
                 tusUpload.start();
             } else {
                 // make a new XMLHttpRequest for each file, if tusd-tusclient not supported
                 new sendFile(file);
             }
@@ -323,31 +333,31 @@
             pendingDeletes[endpoint] = xhr;
             this.xhr = xhr;
             this.xhr.open("DELETE", endpoint, true);
             this.xhr.send();
             deleteFileFromTable(rowIx, fname);
             delete pendingDeletes[endpoint];
         }
     }
 
     function viewInGenomeBrowser(rowIx, fname) {
         // redirect to hgTracks with this track as a custom track
         if (typeof uiState.userUrl !== "undefined" && uiState.userUrl.length > 0) {
             bigBedExts = [".bb", ".bigBed", ".vcf.gz", ".vcf", ".bam", ".bw", ".bigWig"];
             let i;
             for (i = 0; i < bigBedExts.length; i++) {
-                if (fname.toLowerCase().endsWith(bigBedExts[i])) {
+                if (fname.toLowerCase().endsWith(bigBedExts[i].toLowerCase())) {
                     // TODO: tusd should return this location in it's response after
                     // uploading a file and then we can look it up somehow, the cgi can
                     // write the links directly into the html directly for prev uploaded files maybe?
                     window.location.assign("../cgi-bin/hgTracks?db=hg38&hgt.customText=" + uiState.userUrl + fname);
                     return false;
                 }
             }
         }
     }
 
     function addNewUploadedFileToTable(req) {
         // req is an object with properties of an uploaded file, make a new row
         // for it in the filesTable
         let table = null;
         if ($.fn.dataTable.isDataTable("#filesTable")) {