diff --git a/seahub/api2/endpoints/cancel_zip_task.py b/seahub/api2/endpoints/cancel_zip_task.py
index e644b5910e..54dcf17125 100644
--- a/seahub/api2/endpoints/cancel_zip_task.py
+++ b/seahub/api2/endpoints/cancel_zip_task.py
@@ -33,4 +33,4 @@ class CancelZipTaskView(APIView):
             error_msg = 'Internal Server Error'
             return api_error(status.HTTP_500_INTERNAL_SERVER_ERROR, error_msg)
 
-        return Response()
+        return Response({'success': True})
diff --git a/seahub/templates/view_shared_dir.html b/seahub/templates/view_shared_dir.html
index 0620cb908b..096f7256cd 100644
--- a/seahub/templates/view_shared_dir.html
+++ b/seahub/templates/view_shared_dir.html
@@ -207,7 +207,8 @@ $('.shared-dir-zip, .download-dir').on('click', function (e) {
     var cur_download_dir_path;
     var interval,
         zip_token,
-        queryZipProgress;
+        queryZipProgress,
+        cancelZipTask;
     var packagingTip = "{% trans "Packaging..." %}";
     var $tip = $('<p></p>');
 
@@ -242,13 +243,35 @@ $('.shared-dir-zip, .download-dir').on('click', function (e) {
         });
     };
 
+    cancelZipTask = function() {
+        $.ajax({
+            url: '{% url 'api-v2.1-cancel-zip-task' %}',
+            type: 'POST',
+            dataType: 'json',
+            data: {'token': zip_token},
+            beforeSend: prepareCSRFToken,
+            success: function() {
+                // do nothing
+            },
+            error: function(xhr) {
+                // do nothing
+            }
+        });
+    };
+
     $.ajax({
         url: '{% url 'api-v2.1-share-link-zip-task' %}' + '?share_link_token=' + share_link_token + '&path=' + encodeURIComponent(cur_download_dir_path),
         cache: false,
         dataType: 'json',
         success: function(data) {
             zip_token = data['zip_token'];
-            $tip.html(packagingTip).modal();
+            $tip.html(packagingTip).modal({
+                onClose: function() {
+                    clearInterval(interval); // stop querying the progress
+                    cancelZipTask();
+                    $.modal.close();
+                }
+            });
             $('#simplemodal-container').css({'width':'auto'});
             queryZipProgress();
             interval = setInterval(queryZipProgress, 1000);
diff --git a/static/scripts/common.js b/static/scripts/common.js
index 5f6d4adb86..b7a9416138 100644
--- a/static/scripts/common.js
+++ b/static/scripts/common.js
@@ -1058,14 +1058,18 @@ define([
                 });
             };
 
-            var cancelZipTask = function(){
+            var cancelZipTask = function() {
                 $.ajax({
-                    url: _this.getUrl({name: 'cancel_zip_task'}) + '?token=' + zip_token,
-                    success: function(date) {
-                        clearInterval(interval);
+                    url: _this.getUrl({name: 'cancel_zip_task'}),
+                    type: 'POST',
+                    dataType: 'json',
+                    data: {'token': zip_token},
+                    beforeSend: _this.prepareCSRFToken,
+                    success: function() {
+                        // do nothing
                     },
                     error: function(xhr) {
-                        _this.ajaxErrorHandler(xhr);
+                        // do nothing
                     }
                 });
             };
@@ -1083,9 +1087,14 @@ define([
                 dataType: 'json',
                 success: function(data) {
                     zip_token = data['zip_token'];
-                    $tip.html(packagingTip).modal();
+                    $tip.html(packagingTip).modal({
+                        onClose: function() {
+                            clearInterval(interval); // stop querying the progress
+                            cancelZipTask();
+                            $.modal.close();
+                        }
+                    });
                     $('#simplemodal-container').css({'width':'auto'});
-                    $('.simplemodal-close').click(function(){ cancelZipTask(); });
                     queryZipProgress();
                     interval = setInterval(queryZipProgress, 1000);
                 },