"Number of attachments" div name is now variable.

[citadel.git] / webcit-ng / static / js / upload.js

diff --git a/webcit-ng/static/js/upload.js b/webcit-ng/static/js/upload.js
index 39b9d018728861c56630ee84c234aff37003eab8..54713f5dd9c6493564aad330e6a0453d9b3d1911 100644 (file)
--- a/webcit-ng/static/js/upload.js
+++ b/webcit-ng/static/js/upload.js
@@ -8,14 +8,26 @@
 
 var uploads_in_progress = 0;
 var uploads = [] ;                                                             // everything the user has uploaded
+var attachment_counter_divs = [] ;                                             // list of divs containing attachment counters
+
+// Remove the upload window completely (even if it's hidden)
+function deactivate_uploads() {
+        upload_window = document.getElementById('ctdl-upload');
+       if (upload_window) {
+               upload_window.remove();
+       }
+}
 
 
 // Turn the specified div into a place where we can upload.  (Note: permanently changes the drag-and-drop behavior of that div.)
 function activate_uploads(parent_div) {
+
+               attachment_counter_divs = [ "num_attachments" ] ;
+
                document.getElementById(parent_div).innerHTML += `
                        <div class="ctdl-upload" id="ctdl-upload">
                                <div id="ctdl_attachments_title" class="ctdl-compose-attachments-title">
-                                       <div><h1><i class="fa fa-paperclip" style="color:grey"></i>` + _("Attachments:") + ` <span id="num_attachments">` + uploads.length + `</span></h1></div>
+                                       <div><h1><i class="fa fa-paperclip" style="color:grey"></i>` + _("Attachments:") + ` <span id="${attachment_counter_divs[0]}">` + uploads.length + `</span></h1></div>
                                        <div><h1><i class="fas fa-window-close" style="color:red" onClick="show_or_hide_upload_window()"></i></h1></div>
                                </div>
                                <br>
@@ -65,6 +77,31 @@ function handle_upload_files(files) {
 }
 
 
+// update the attachment counter div(s) with the current number of items
+function update_attachment_count() {
+       for (let i = 0; i < attachment_counter_divs.length; ++i) {
+               document.getElementById(attachment_counter_divs[i]).innerHTML = uploads.length;
+       }
+}
+
+
+// Delete an uploaded item from the list
+delete_upload = async(ref) => {
+
+       response = await fetch(
+               "/ctdl/p/" + ref, { method: "DELETE" }
+       );
+
+       if (response.ok) {                                                                      // If the server accepted the delete...
+               var el = document.getElementById(ref);                                          // ...remove it from the screen...
+               el.parentNode.removeChild(el);
+               uploads = uploads.filter((r) => r.ref != ref);                                  // ...remove it from the array...
+               update_attachment_count();
+               // document.getElementById(attachment_counter_divs[0]).innerHTML = uploads.length;      // ...and update our count
+       }
+}
+
+
 function upload_file(file) {
        var url = '/ctdl/p/';
        var xhr = new XMLHttpRequest();
@@ -84,13 +121,17 @@ function upload_file(file) {
                        // Add these uploads to the displayed list
                        j_response.forEach((item) => {
                                let new_upl = document.createElement("li");
-                               new_upl.innerHTML = "Ref: " + item["ref"] + " , Filename: " + item["uploadfilename"] + " , Content-type: " + item["contenttype"] + " , Length: " + item["contentlength"];
+                               new_upl.setAttribute("id", item["ref"]);        // set the element id to the upload reference
+                               new_upl.innerHTML = `<i class="fa-solid fa-circle-xmark" style="color:red" onClick="delete_upload('` + item["ref"] + `')"></i>`
+                               + `&nbsp;`
+                               + item["uploadfilename"] + " (" + item["contenttype"] + ", " + item["contentlength"] + " " + _("bytes") + ")";
                                document.getElementById("ctdl-upload_list").appendChild(new_upl);
-                       });
 
-                       // append it to the global list of uploads
-                       uploads.push(j_response);
-                       document.getElementById("num_attachments").innerHTML = uploads.length;
+                               // append it to the global list of uploads
+                               uploads.push(item);
+                       });
+                       update_attachment_count();
+                       // document.getElementById(attachment_counter_divs[0]).innerHTML = uploads.length;
                }
                else if (xhr.readyState == 4 && xhr.status != 200) {
                        // remove the "uploading in progress" message (there was an error, so just let it disappear)
@@ -107,7 +148,7 @@ function upload_file(file) {
        // Make an "uploading in progress" message appear in the uploads list!
        progress = document.createElement("li");
        progress.setAttribute("id", "ctdl_uploading_" + uploads_in_progress.toString());
-       progress.innerHTML = `<img src="/ctdl/s/images/throbber.gif" /> ` + _("Processing dropped files...");
+       progress.innerHTML = `<img src="/ctdl/s/images/dotcrawl.gif" /> ` + _("Processing dropped files...");
        document.getElementById("ctdl-upload_list").appendChild(progress);
 }
 
@@ -117,7 +158,7 @@ function upload_highlight(e) {
        let dropArea = document.getElementById("ctdl-upload");
        dropArea.classList.add('highlight')
 
-       document.getElementById("ctdl-upload").style.display = "block";         /* also make it appear */
+       document.getElementById("ctdl-upload").style.display = "block";                 // also make it appear
 }
 
 
@@ -132,17 +173,38 @@ function upload_unhighlight(e) {
 function show_or_hide_upload_window() {
 
        if (document.getElementById("ctdl-upload").style.display == "block") {
-               document.getElementById("ctdl-upload").style.display = "none";          /* turn it off */
+               document.getElementById("ctdl-upload").style.display = "none";          // turn it off
        }
        else {
-               document.getElementById("ctdl-upload").style.display = "block";         /* turn it on */
+               document.getElementById("ctdl-upload").style.display = "block";         // turn it on
        }
 }
 
 
+// Helper function for flush_uploads()
+flush_one_upload = async(ref) => {
+       response = await fetch(
+               "/ctdl/p/" + ref, { method: "DELETE" }
+       );
+       // We don't have any interest in the server response.
+}
+
+
 // Flush all uploaded files and close the window
 function flush_uploads() {
-        document.getElementById('ctdl-upload').style.display='none';
-        // FIXME tell the server to delete the files
+        upload_window = document.getElementById('ctdl-upload');
+
+       if (upload_window) {
+               upload_window.style.display='none';
+       }
+
+        // tell the server to delete the files
+       uploads.forEach(u => {
+               flush_one_upload(u.ref);
+       });
         uploads=[];
+       update_attachment_count();
+       // document.getElementById(attachment_counter_divs[0]).innerHTML = uploads.length;
+
+       deactivate_uploads();   // this makes the window get destroyed too
 }