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>
}
+// 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();
// Add these uploads to the displayed list
j_response.forEach((item) => {
let new_upl = document.createElement("li");
- // item["ref"] is what we need
- new_upl.innerHTML = `<a href="xxx">❌</a>`
+ 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>`
+ + ` `
+ 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)
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
}
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
}