]> code.citadel.org Git - citadel.git/blobdiff - webcit-ng/static/js/view_mail.js
upload.js: when removing an attachment, delete the div
[citadel.git] / webcit-ng / static / js / view_mail.js
index 6c2260020ced461e81a7c76087a51e485ec4d697..d058f470ecf35727d3820f4e455275e6c4c720d2 100644 (file)
@@ -13,8 +13,6 @@ var newmail_notify = {
         NO  : 0,                                                               // do not perform new mail notifications
         YES : 1                                                                        // yes, perform new mail notifications
 };
-var num_attachments = 0;                                                       // number of attachments in current composed msg
-var uploads_in_progress = 0;
 
 
 // This is the async back end for mail_delete_selected()
@@ -374,9 +372,9 @@ function refresh_mail_display() {
        fetch_stat = async() => {
                response = await fetch(url);
                stat = await(response.json());
-               if (stat.room_mtime > room_mtime) {                     // FIXME commented out to force refreshes
+               if (stat.room_mtime > room_mtime) {                     // if modified...
                        room_mtime = stat.room_mtime;
-                       render_mailbox_display(newmail_notify.YES);
+                       render_mailbox_display(newmail_notify.YES);     // ...force a refresh
                }
        }
        fetch_stat();
@@ -514,9 +512,9 @@ function mail_compose(is_quoted, references, quoted_msgnum, m_to, m_cc, m_subjec
                <div class="ctdl-compose-toolbar">
                <span class="ctdl-msg-button" onclick="mail_send_message()"><i class="fa fa-paper-plane" style="color:green"></i> ${_("Send message")} </span>
                <span class="ctdl-msg-button"> ${_("Save to Drafts")} </span>
-               <span class="ctdl-msg-button" onClick="show_or_hide_attachments()"><i class="fa fa-paperclip" style="color:grey"></i> ${_("Attachments:")} <span id="ctdl_num_attachments"> ${num_attachments} </span></span>
+               <span class="ctdl-msg-button" onClick="show_or_hide_upload_window()"><i class="fa fa-paperclip" style="color:grey"></i> ${_("Attachments:")} <span id="ctdl_num_attachments"> ${uploads.length} </span></span>
                <span class="ctdl-msg-button">  ${_("Contacts")} </span>
-               <span class="ctdl-msg-button" onClick="document.getElementById('ctdl-upload').style.display='none';gotoroom(current_room)"><i class="fa fa-trash" style="color:red"></i> ${_("Cancel")} </span>
+               <span class="ctdl-msg-button" onClick="flush_uploads();gotoroom(current_room)"><i class="fa fa-trash" style="color:red"></i> ${_("Cancel")} </span>
                </div>`
        ;
 
@@ -530,131 +528,6 @@ function mail_compose(is_quoted, references, quoted_msgnum, m_to, m_cc, m_subjec
        activate_uploads("ctdl-editor-body");
 }
 
-
-// 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) {
-               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">` + num_attachments + `</span></h1></div>
-                                       <div><h1><i class="fas fa-window-close" style="color:red" onClick="show_or_hide_attachments()"></i></h1></div>
-                               </div>
-                               <br>
-                               <ul id="ctdl-upload_list">
-                                       <li>uploaded file</li>
-                                       <li>another uploaded file</li>
-                                       <li>philez and warez</li>
-                               </ul>
-                               <br>
-                               <div id="drop-area" class="ctdl-upload-drop-area">
-                                       <form class="my-form">
-                                               <p>${_("Drop files here to upload")}</p>
-                                               <input type="file" id="fileElem" multiple accept="*/*" onChange="handle_upload_files(this.files)">
-                                       </form>
-                               </div>
-                       </div>
-               `;
-
-               // activate drag and drop (shamelessly swiped from https://www.smashingmagazine.com/2018/01/drag-drop-file-uploader-vanilla-js/ )
-               //let dropArea = document.getElementById("ctdl-upload");
-               let dropArea = document.getElementById(parent_div);
-               ;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
-                       dropArea.addEventListener(eventName, upload_prevent_defaults, false)
-               })
-               ;["dragenter", "dragover"].forEach(eventName => {
-                       dropArea.addEventListener(eventName, upload_highlight, false)
-               })
-               ;['dragleave', 'drop'].forEach(eventName => {
-                       dropArea.addEventListener(eventName, upload_unhighlight, false)
-               })
-               dropArea.addEventListener('drop', upload_handle_drop, false);
-}
-
-
-// prevent drag and drop events from propagating up through the DOM
-function upload_prevent_defaults(e) {
-       e.preventDefault();
-       e.stopPropagation();
-}
-
-
-function upload_handle_drop(e) {
-       let dt = e.dataTransfer;
-       let files = dt.files;
-       handle_upload_files(files);
-}
-
-
-function handle_upload_files(files) {
-       ([...files]).forEach(upload_file)
-}
-
-
-function upload_file(file) {
-       var url = '/ctdl/a/upload';
-       var xhr = new XMLHttpRequest();
-       var formData = new FormData();
-       xhr.open('POST', url, true);
-      
-       xhr.addEventListener('readystatechange', function(e) {
-               if (xhr.readyState == 4 && xhr.status == 200) {
-                       //document.getElementById("ctdl-upload_list").innerHTML += "<li>succeeeeed</li>";
-                       num_attachments += 1;
-                       document.getElementById("num_attachments").innerHTML = num_attachments;
-
-                       // remove the "uploading in progress" message
-                       let li = document.getElementById("ctdl_uploading_" + uploads_in_progress.toString());
-                       li.parentNode.removeChild(li);
-                       uploads_in_progress -= 1;
-               }
-               else if (xhr.readyState == 4 && xhr.status != 200) {
-                       //document.getElementById("ctdl-upload_list").innerHTML += "<li>EPIC FAIL</li>";
-
-                       // remove the "uploading in progress" message (maybe we should replace it with an error?)
-                       let li = document.getElementById("ctdl_uploading_" + uploads_in_progress.toString());
-                       li.parentNode.removeChild(li);
-                       uploads_in_progress -= 1;
-               }
-       })
-       formData.append('file', file);
-       xhr.send(formData);
-       uploads_in_progress += 1;
-
-       // 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...");
-       document.getElementById("ctdl-upload_list").appendChild(progress);
-}
-
-
-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 */
-}
-      
-function upload_unhighlight(e) {
-       let dropArea = document.getElementById("ctdl-upload");
-       dropArea.classList.remove('highlight')
-}
-
-
-
-// Show or hide the attachments window in the composer
-function show_or_hide_attachments() {
-
-       if (document.getElementById("ctdl-upload").style.display == "block") {
-               document.getElementById("ctdl-upload").style.display = "none";          /* turn it off */
-       }
-       else {
-               document.getElementById("ctdl-upload").style.display = "block";         /* turn it on */
-       }
-}
-
-
 // Called when the user clicks the button to make the hidden "CC" and "BCC" lines appear.
 // It is also called automatically during a Reply when CC is pre-populated.
 function make_cc_bcc_visible() {
@@ -680,6 +553,7 @@ function msm_field(element_name, separator) {
 function mail_send_message() {
 
        document.body.style.cursor = "wait";
+       deactivate_uploads();
        let url = "/ctdl/r/" + escapeHTMLURI(current_room)
                + "/dummy_name_for_new_mail"
                + "?wefw="      + msm_field("ctdl_mc_references", "!")                          // references (if present)
@@ -688,21 +562,20 @@ function mail_send_message() {
                + "&mailcc="    + msm_field("ctdl-compose-cc-field", ",")                       // Cc: (if present)
                + "&mailbcc="   + msm_field("ctdl-compose-bcc-field", ",")                      // Bcc: (if present)
        ;
-       boundary = randomString();
-       body_text =
-               "--" + boundary + "\r\n"
-               + "Content-type: text/html\r\n"
-               + "Content-transfer-encoding: quoted-printable\r\n"
-               + "\r\n"
-               + quoted_printable_encode(
-                       "<html><body>" + document.getElementById("ctdl-editor-body").innerHTML + "</body></html>"
-               ) + "\r\n"
-               + "--" + boundary + "--\r\n"
-       ;
+       if (uploads.length > 0) {
+               url += "&att=";
+               for (let i=0; i<uploads.length; ++i) {
+                       url += uploads[i]["ref"];
+                       if (i != uploads.length - 1) {
+                               url += ",";
+                       }
+               }
+       }
+       body_text = "<html><body>" + document.getElementById("ctdl-editor-body").innerHTML + "</body></html>\r\n";
 
        var request = new XMLHttpRequest();
        request.open("PUT", url, true);
-       request.setRequestHeader("Content-type", "multipart/mixed; boundary=\"" + boundary + "\"");
+       request.setRequestHeader("Content-type", "text/html");
        request.onreadystatechange = function() {
                if (request.readyState == 4) {
                        document.body.style.cursor = "default";
@@ -714,6 +587,9 @@ function mail_send_message() {
                                        }
                                }
 
+                               // successfully saving a message means the attachments are now gone from the server.
+                               uploads = [];
+
                                // After saving the message, go back to the mailbox view.
                                gotoroom(current_room);