Added zipping indicator

web/SystemAO/file_system/file_explorer.html

@@ -1104,10 +1104,12 @@
             <div class="uploadList" id="uploadProgressList">
               
             </div>
+            <br>
+            <!-- 
             <div class="clearallButton">
                 <a onclick="clearAllUploadTask();">Clear All</a>
             </div>
-            
+            -->
         </div>
 
            
@@ -2831,7 +2833,24 @@
                     $(".fileObject.selected").each(function(){
                         fileList.push($(this).attr("filepath"));
                     });
-                    console.log(fileList);
+                    console.log("Zipping: ", fileList);
+
+                    //Add a display for file compression
+                    var fileCount = $(".fileObject.selected").length;
+                    
+                    var displayString = "Zipping " + fileCount + " files";
+                    if (fileCount == 1){
+                        //Use the filename as task name
+                        displayString = "Zipping " + $(".fileObject.selected").attr("filename");
+                    }
+         
+                    var taskUUID = appendUploadFileItem(displayString, -1);
+                    $("#uploadTab").show();
+
+                    //Set the progress bar to intermediate mode
+                    let targetTaskDisplayObject =  getUploadTaskByID(taskUUID);
+                    targetTaskDisplayObject.find(".progress").addClass("preparing");
+
                     //Zip the file or folder
                     $.ajax({
                         url: "../../system/file_system/zipHandler",
@@ -2839,11 +2858,46 @@
                         method: "POST",
                         success: function(data){
                             if (data.error !== undefined){
-                                alert(data.error);
+                                //Error
+                                targetTaskDisplayObject.find(".progress").removeClass("preparing").removeClass("primary").addClass("negative");
+                               
+                                msgbox("remove",data.error);
                             }else{
                                 //Zip completed.
+                                targetTaskDisplayObject.find(".progress").removeClass("preparing").removeClass("primary").addClass("positive");
+
+                                //Open the zip file
                                 window.open("../../media?file=" + data + "&download=true");
                             }
+
+                           
+                            targetTaskDisplayObject.find(".bar").css("width", "100%");
+
+                            //Hide the taskbar after 5 secs
+                            setTimeout(function(){
+                                //Fade out this task
+                                $(targetTaskDisplayObject).fadeOut('fast',
+                                    function(){
+                                        $(this).remove();
+                                        if ($(".uploadTask").length == 0){
+                                            $("#uploadTab").hide();
+                                        }
+                                    }
+                                );
+                               
+                            }, 3000);
+                            
+                        }, 
+                        error: function(){
+                            targetTaskDisplayObject.find(".progress").removeClass("preparing").removeClass("primary").addClass("negative");
+                            targetTaskDisplayObject.find(".bar").css("width", "100%");
+                            msgbox("remove","Zipping failed due to unknown reason");
+
+                            setTimeout(function(){
+                                if ($(".uploadTask").length == 0){
+                                    $("#uploadTab").hide();
+                                }
+                            }, 3000);
                         }
                     });
                     
@@ -4612,9 +4666,26 @@
             ctrlHold = !ctrlHold;
         }
 
+        function getUploadTaskByID(taskUUID){
+            var task = undefined;
+            $("#uploadTab").find(".uploadTask").each(function(){
+                if ($(this).attr("taskid") == taskUUID){
+                    task = $(this);
+                }
+            });
+
+            return task;
+        }
+
         function appendUploadFileItem(filename, filesize){
             var newuuid = uuidv4();
-            var humanReadableFilesize = bytesToSize(filesize);
+            var humanReadableFilesize = 0;
+            if (filesize < 0){
+                humanReadableFilesize = "Unknown Size"
+            }else{
+                humanReadableFilesize = bytesToSize(filesize);
+            }
+            
             $("#uploadProgressList").append(`<div class="uploadTask" taskID="${newuuid}">
                 <p style="width: calc(100% - 15px);">${filename} (${humanReadableFilesize})</p>
                 <div class="ts tiny primary progress" style="margin-top:-12px;">