feat: renterd warn active uploads

.changeset/friendly-nails-marry.md

@@ -0,0 +1,5 @@
+---
+'renterd': minor
+---
+
+The browser now warns the user if they have active uploads and try to close the tab.

apps/renterd/contexts/filesManager/uploads.tsx

@@ -23,6 +23,7 @@ import { MultipartUpload } from '../../lib/multipartUpload'
 import { MiBToBytes } from '@siafoundation/units'
 import { useMutate } from '@siafoundation/react-core'
 import { useRedundancySettings } from '../../hooks/useRedundancySettings'
+import { useWarnActiveUploadsOnClose } from './useWarnActiveUploadsOnClose'
 
 const maxConcurrentUploads = 5
 const maxConcurrentPartsPerUpload = 5
@@ -280,6 +281,9 @@ export function useUploads({ activeDirectoryPath }: Props) {
     [uploadsMap]
   )
 
+  // Abort local uploads when the browser tab is closed
+  useWarnActiveUploadsOnClose({ uploadsMap })
+
   return {
     uploadFiles,
     uploadsMap,

apps/renterd/contexts/filesManager/useWarnActiveUploadsOnClose.tsx

@@ -0,0 +1,30 @@
+import { useEffect } from 'react'
+import { UploadsMap } from './types'
+
+export function useWarnActiveUploadsOnClose({
+  uploadsMap,
+}: {
+  uploadsMap: UploadsMap
+}) {
+  useEffect(() => {
+    const activeUploads = Object.values(uploadsMap).filter(
+      (upload) => upload.uploadStatus === 'uploading'
+    )
+
+    const warnUserAboutActiveUploads = (event: BeforeUnloadEvent) => {
+      if (activeUploads.length > 0) {
+        const message = `Warning, closing the tab will abort all ${activeUploads.length} active uploads.`
+        event.returnValue = message // Legacy method for cross browser support
+        return message // Chrome requires returnValue to be set
+      }
+    }
+
+    if (activeUploads.length > 0) {
+      window.addEventListener('beforeunload', warnUserAboutActiveUploads)
+    }
+
+    return () => {
+      window.removeEventListener('beforeunload', warnUserAboutActiveUploads)
+    }
+  }, [uploadsMap])
+}