1 // Handle any tasks which require uploading files to the server (such as attachments)
2 // h/t https://www.smashingmagazine.com/2018/01/drag-drop-file-uploader-vanilla-js/ which inspired the design of this module
4 // Copyright (c) 2016-2023 by the citadel.org team
6 // This program is open source software. Use, duplication, or
7 // disclosure are subject to the GNU General Public License v3.
9 var uploads_in_progress = 0;
10 var uploads = [] ; // everything the user has uploaded
13 // Remove the upload window completely (even if it's hidden)
14 function deactivate_uploads() {
15 document.getElementById("ctdl-upload").remove();
19 // Turn the specified div into a place where we can upload. (Note: permanently changes the drag-and-drop behavior of that div.)
20 function activate_uploads(parent_div) {
21 document.getElementById(parent_div).innerHTML += `
22 <div class="ctdl-upload" id="ctdl-upload">
23 <div id="ctdl_attachments_title" class="ctdl-compose-attachments-title">
24 <div><h1><i class="fa fa-paperclip" style="color:grey"></i>` + _("Attachments:") + ` <span id="num_attachments">` + uploads.length + `</span></h1></div>
25 <div><h1><i class="fas fa-window-close" style="color:red" onClick="show_or_hide_upload_window()"></i></h1></div>
28 <ul id="ctdl-upload_list">
31 <div id="drop-area" class="ctdl-upload-drop-area">
32 <form class="ctdl-upload-form">
33 <p>${_("Drop files here to upload")}</p>
34 <input type="file" id="fileElem" multiple accept="*/*" onChange="handle_upload_files(this.files)">
40 // activate drag and drop
41 let dropArea = document.getElementById(parent_div);
42 ;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
43 dropArea.addEventListener(eventName, upload_prevent_defaults, false)
45 ;["dragenter", "dragover"].forEach(eventName => {
46 dropArea.addEventListener(eventName, upload_highlight, false)
48 ;['dragleave', 'drop'].forEach(eventName => {
49 dropArea.addEventListener(eventName, upload_unhighlight, false)
51 dropArea.addEventListener('drop', upload_handle_drop, false);
55 // prevent drag and drop events from propagating up through the DOM
56 function upload_prevent_defaults(e) {
62 function upload_handle_drop(e) {
63 let dt = e.dataTransfer;
65 handle_upload_files(files);
69 function handle_upload_files(files) {
70 ([...files]).forEach(upload_file)
74 function upload_file(file) {
76 var xhr = new XMLHttpRequest();
77 var formData = new FormData();
78 xhr.open('POST', url, true);
80 xhr.addEventListener('readystatechange', function(e) {
81 if (xhr.readyState == 4 && xhr.status == 200) {
82 // remove the "uploading in progress" message
83 let li = document.getElementById("ctdl_uploading_" + uploads_in_progress.toString());
84 li.parentNode.removeChild(li);
85 uploads_in_progress -= 1;
87 // The response body will be a JSON array of completed uploads.
88 var j_response = JSON.parse(xhr.response);
90 // Add these uploads to the displayed list
91 j_response.forEach((item) => {
92 let new_upl = document.createElement("li");
93 // item["ref"] is what we need
94 new_upl.innerHTML = `<i class="fa-solid fa-circle-xmark" style="color:red" onClick="alert('` + item["ref"] + `')"></i>`
96 + item["uploadfilename"] + " (" + item["contenttype"] + ", " + item["contentlength"] + " " + _("bytes") + ")";
97 document.getElementById("ctdl-upload_list").appendChild(new_upl);
99 // append it to the global list of uploads
102 document.getElementById("num_attachments").innerHTML = uploads.length;
104 else if (xhr.readyState == 4 && xhr.status != 200) {
105 // remove the "uploading in progress" message (there was an error, so just let it disappear)
106 let li = document.getElementById("ctdl_uploading_" + uploads_in_progress.toString());
107 li.parentNode.removeChild(li);
108 uploads_in_progress -= 1;
112 formData.append('file', file);
114 uploads_in_progress += 1;
116 // Make an "uploading in progress" message appear in the uploads list!
117 progress = document.createElement("li");
118 progress.setAttribute("id", "ctdl_uploading_" + uploads_in_progress.toString());
119 progress.innerHTML = `<img src="/ctdl/s/images/dotcrawl.gif" /> ` + _("Processing dropped files...");
120 document.getElementById("ctdl-upload_list").appendChild(progress);
124 // called when the user drags a file into the upload area
125 function upload_highlight(e) {
126 let dropArea = document.getElementById("ctdl-upload");
127 dropArea.classList.add('highlight')
129 document.getElementById("ctdl-upload").style.display = "block"; /* also make it appear */
133 // called when the user is no longer dragging a file into the upload area
134 function upload_unhighlight(e) {
135 let dropArea = document.getElementById("ctdl-upload");
136 dropArea.classList.remove('highlight')
140 // Show or hide the attachments window in the composer
141 function show_or_hide_upload_window() {
143 if (document.getElementById("ctdl-upload").style.display == "block") {
144 document.getElementById("ctdl-upload").style.display = "none"; /* turn it off */
147 document.getElementById("ctdl-upload").style.display = "block"; /* turn it on */
152 // Flush all uploaded files and close the window
153 function flush_uploads() {
154 document.getElementById('ctdl-upload').style.display='none';
156 // FIXME tell the server to delete the files
157 uploads.forEach(u => {
162 deactivate_uploads(); // this makes the window get destroyed too