Abort (kinda)

templates/progress

@@ -56,6 +56,18 @@
             margin-top: 10px;
             word-wrap: break-word;
         }
+        #abort-button {
+            background-color: #f44336;
+            color: white;
+            border: none;
+            padding: 10px 15px;
+            margin-top: 10px;
+            border-radius: 4px;
+            cursor: pointer;
+        }
+        #abort-button:hover {
+            background-color: #d32f2f;
+        }
         @media (max-width: 600px) {
             body {
                 padding: 10px;
@@ -84,6 +96,7 @@
         </div>
         <div id="currentFile"></div>
     </div>
+    <button id="abort-button" onclick="abortDownload()">Abort Download</button>
     <script>
         function updateProgress() {
             fetch('/progress?filename={{.Filename}}', {
@@ -103,6 +116,17 @@
                 });
         }
         updateProgress();
+
+        function abortDownload() {
+            fetch('/abort?filename={{.Filename}}', { method: 'POST' })
+                .then(response => {
+                    if (response.ok) {
+                        alert('Abort signal sent. The download will stop soon.');
+                    } else {
+                        alert('Failed to abort the download.');
+                    }
+                });
+        }
     </script>
 </body>
 </html>