diff --git a/changelog/unreleased/enhancement-warn-user-before-close-browser-when-uploading b/changelog/unreleased/enhancement-warn-user-before-close-browser-when-uploading
new file mode 100644
index 00000000000..cb991c7cc42
--- /dev/null
+++ b/changelog/unreleased/enhancement-warn-user-before-close-browser-when-uploading
@@ -0,0 +1,6 @@
+Enhancement: Warn user before closing browser when upload is in progress
+
+We've added a warning message for the user, if they try to close the browser while upload is in progress.
+
+https://github.com/owncloud/web/pull/10519
+https://github.com/owncloud/web/issues/10500
diff --git a/packages/web-runtime/src/components/UploadInfo.vue b/packages/web-runtime/src/components/UploadInfo.vue
index 434ca225f18..4e7cff88108 100644
--- a/packages/web-runtime/src/components/UploadInfo.vue
+++ b/packages/web-runtime/src/components/UploadInfo.vue
@@ -155,12 +155,12 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, ref, watch, unref } from 'vue'
 import { isUndefined } from 'lodash-es'
 import getSpeed from '@uppy/utils/lib/getSpeed'
 
 import { urlJoin } from '@ownclouders/web-client/src/utils'
-import { useCapabilityStore, useConfigStore } from '@ownclouders/web-pkg'
+import { useConfigStore } from '@ownclouders/web-pkg'
 import {
   formatFileSize,
   UppyResource,
@@ -174,36 +174,65 @@ import { storeToRefs } from 'pinia'
 export default defineComponent({
   components: { ResourceListItem, ResourceIcon, ResourceName },
   setup() {
-    const capabilityStore = useCapabilityStore()
-    const capabilityRefs = storeToRefs(capabilityStore)
     const configStore = useConfigStore()
     const { options: configOptions } = storeToRefs(configStore)
 
+    const showInfo = ref(false) // show the overlay?
+    const infoExpanded = ref(false) // show the info including all uploads?
+    const uploads = ref<Record<any, any>>({}) // uploads that are being displayed via "infoExpanded"
+    const errors = ref({}) // all failed files
+    const successful = ref([]) // all successful files
+    const filesInProgressCount = ref(0) // files (not folders!) that are being processed currently
+    const totalProgress = ref(0) // current uploads progress (0-100)
+    const uploadsPaused = ref(false) // all uploads paused?
+    const uploadsCancelled = ref(false) // all uploads cancelled?
+    const inFinalization = ref(false) // uploads transferred but still need to be finalized
+    const inPreparation = ref(true) // preparation before upload
+    const runningUploads = ref(0) // all uploads (not files!) that are in progress currently
+    const bytesTotal = ref(0)
+    const bytesUploaded = ref(0)
+    const uploadSpeed = ref(0)
+    const filesInEstimation = ref({})
+    const timeStarted = ref(null)
+    const remainingTime = ref(undefined)
+    const disableActions = ref(false) // disables the following actions: pause, resume, retry
+
+    const onBeforeUnload = (e: BeforeUnloadEvent) => {
+      if (unref(runningUploads)) {
+        e.preventDefault()
+      }
+    }
+
+    watch(runningUploads, (val) => {
+      if (val === 0) {
+        return window.removeEventListener('beforeunload', onBeforeUnload)
+      }
+      return window.addEventListener('beforeunload', onBeforeUnload)
+    })
+
     return {
-      configOptions
+      configOptions,
+      showInfo,
+      infoExpanded,
+      uploads,
+      errors,
+      successful,
+      filesInProgressCount,
+      totalProgress,
+      uploadsPaused,
+      uploadsCancelled,
+      inFinalization,
+      inPreparation,
+      runningUploads,
+      bytesTotal,
+      bytesUploaded,
+      uploadSpeed,
+      filesInEstimation,
+      timeStarted,
+      remainingTime,
+      disableActions
     }
   },
-  data: () => ({
-    showInfo: false, // show the overlay?
-    infoExpanded: false, // show the info including all uploads?
-    uploads: {} as Record<any, any>, // uploads that are being displayed via "infoExpanded"
-    errors: {}, // all failed files
-    successful: [], // all successful files
-    filesInProgressCount: 0, // files (not folders!) that are being processed currently
-    totalProgress: 0, // current uploads progress (0-100)
-    uploadsPaused: false, // all uploads paused?
-    uploadsCancelled: false, // all uploads cancelled?
-    inFinalization: false, // uploads transferred but still need to be finalized
-    inPreparation: true, // preparation before upload
-    runningUploads: 0, // all uploads (not files!) that are in progress currently
-    bytesTotal: 0,
-    bytesUploaded: 0,
-    uploadSpeed: 0,
-    filesInEstimation: {},
-    timeStarted: null,
-    remainingTime: undefined,
-    disableActions: false // disables the following actions: pause, resume, retry
-  }),
   computed: {
     uploadDetails() {
       if (!this.uploadSpeed || !this.runningUploads) {
@@ -693,6 +722,7 @@ export default defineComponent({
   .upload-info-danger {
     color: var(--oc-color-swatch-danger-default);
   }
+
   .upload-info-success {
     color: var(--oc-color-swatch-success-default);
   }
diff --git a/packages/web-runtime/tests/unit/components/UploadInfo.spec.ts b/packages/web-runtime/tests/unit/components/UploadInfo.spec.ts
index 29383c5e3e4..515ed7c3964 100644
--- a/packages/web-runtime/tests/unit/components/UploadInfo.spec.ts
+++ b/packages/web-runtime/tests/unit/components/UploadInfo.spec.ts
@@ -1,6 +1,7 @@
 import UploadInfo from '../../../src/components/UploadInfo.vue'
 import { defaultPlugins, shallowMount, defaultComponentMocks } from 'web-test-helpers'
 import { ResourceListItem } from '@ownclouders/web-pkg'
+import { nextTick } from 'vue'
 
 const selectors = {
   overlay: '#upload-info',
@@ -21,150 +22,146 @@ describe('UploadInfo component', () => {
     const overlay = wrapper.find(selectors.overlay)
     expect(overlay.exists()).toBeFalsy()
   })
-  it('should show the component', () => {
-    const { wrapper } = getShallowWrapper({ showInfo: true })
+  it('should show the component', async () => {
+    const { wrapper } = getShallowWrapper()
+    wrapper.vm.showInfo = true
+    await nextTick()
     const overlay = wrapper.find(selectors.overlay)
     expect(overlay.exists()).toBeTruthy()
   })
   describe('title', () => {
-    it('should show that an upload is in progress', () => {
-      const { wrapper } = getShallowWrapper({
-        showInfo: true,
-        filesInProgressCount: 1,
-        runningUploads: 1
-      })
+    it('should show that an upload is in progress', async () => {
+      const { wrapper } = getShallowWrapper()
+      wrapper.vm.showInfo = true
+      wrapper.vm.inPreparation = false
+      wrapper.vm.filesInProgressCount = 1
+      wrapper.vm.runningUploads = 1
+      await nextTick()
+
       const uploadTitle = wrapper.find(selectors.title).text()
       expect(uploadTitle).toBe('1 item uploading...')
     })
-    it('should show that an upload was successful', () => {
-      const { wrapper } = getShallowWrapper({
-        showInfo: true,
-        filesInProgressCount: 0,
-        runningUploads: 0,
-        successful: ['1'],
-        errors: {}
-      })
+    it('should show that an upload was successful', async () => {
+      const { wrapper } = getShallowWrapper()
+      wrapper.vm.showInfo = true
+      wrapper.vm.successful = ['1']
+      await nextTick()
+
       const uploadTitle = wrapper.find(selectors.title).text()
       expect(uploadTitle).toBe('Upload complete')
     })
-    it('should show that an upload failed', () => {
-      const { wrapper } = getShallowWrapper({
-        showInfo: true,
-        filesInProgressCount: 0,
-        runningUploads: 0,
-        errors: [{ name: 'file', type: 'file' }],
-        successful: []
-      })
+    it('should show that an upload failed', async () => {
+      const { wrapper } = getShallowWrapper()
+      wrapper.vm.showInfo = true
+      ;(wrapper.vm.errors = [{ name: 'file', type: 'file' }]), await nextTick()
+
       const uploadTitle = wrapper.find(selectors.title).text()
       expect(uploadTitle).toBe('Upload failed')
     })
-    it('should show that an upload was cancelled', () => {
-      const { wrapper } = getShallowWrapper({
-        showInfo: true,
-        filesInProgressCount: 0,
-        runningUploads: 0,
-        errors: {},
-        successful: [],
-        uploadsCancelled: true
-      })
+    it('should show that an upload was cancelled', async () => {
+      const { wrapper } = getShallowWrapper()
+      wrapper.vm.showInfo = true
+      wrapper.vm.uploadsCancelled = true
+      await nextTick()
+
       const uploadTitle = wrapper.find(selectors.title).text()
       expect(uploadTitle).toBe('Upload cancelled')
     })
-    it('should show that an upload is preparing', () => {
-      const { wrapper } = getShallowWrapper({
-        showInfo: true,
-        filesInProgressCount: 0,
-        runningUploads: 1,
-        inPreparation: true
-      })
+    it('should show that an upload is preparing', async () => {
+      const { wrapper } = getShallowWrapper()
+      wrapper.vm.showInfo = true
+      wrapper.vm.runningUploads = 1
+      wrapper.vm.inPreparation = true
+      await nextTick()
+
       const uploadTitle = wrapper.find(selectors.title).text()
       expect(uploadTitle).toBe('Preparing upload...')
     })
-    it('should show that an upload is being finalized', () => {
-      const { wrapper } = getShallowWrapper({
-        showInfo: true,
-        filesInProgressCount: 1,
-        runningUploads: 1,
-        inFinalization: true,
-        errors: [],
-        successful: []
-      })
+    it('should show that an upload is being finalized', async () => {
+      const { wrapper } = getShallowWrapper()
+      wrapper.vm.showInfo = true
+      wrapper.vm.filesInProgressCount = 1
+      wrapper.vm.runningUploads = 1
+      wrapper.vm.inFinalization = true
+      await nextTick()
+
       const uploadTitle = wrapper.find(selectors.title).text()
       expect(uploadTitle).toBe('Finalizing upload...')
     })
   })
   describe('progress bar', () => {
-    it('should show the progress bar when an upload is in progress', () => {
-      const { wrapper } = getShallowWrapper({
-        showInfo: true,
-        filesInProgressCount: 1,
-        runningUploads: 1
-      })
+    it('should show the progress bar when an upload is in progress', async () => {
+      const { wrapper } = getShallowWrapper()
+      wrapper.vm.showInfo = true
+      wrapper.vm.filesInProgressCount = 1
+      wrapper.vm.runningUploads = 1
+      await nextTick()
+
       const progressBar = wrapper.find(selectors.progress)
       expect(progressBar.exists()).toBeTruthy()
     })
   })
   describe('info', () => {
-    it('should show the number of successful items', () => {
-      const { wrapper } = getShallowWrapper({
-        showInfo: true,
-        filesInProgressCount: 0,
-        runningUploads: 0,
-        errors: {},
-        successful: ['1', '2']
-      })
+    it('should show the number of successful items', async () => {
+      const { wrapper } = getShallowWrapper()
+      wrapper.vm.showInfo = true
+      wrapper.vm.successful = ['1', '2']
+      await nextTick()
+
       const info = wrapper.find(selectors.success).text()
       expect(info).toBe('2 items uploaded')
     })
-    it('should show the number of failed items', () => {
-      const { wrapper } = getShallowWrapper({
-        showInfo: true,
-        filesInProgressCount: 0,
-        runningUploads: 0,
-        errors: [{ name: 'file', type: 'file' }],
-        successful: ['1']
-      })
+    it('should show the number of failed items', async () => {
+      const { wrapper } = getShallowWrapper()
+      wrapper.vm.showInfo = true
+      wrapper.vm.errors = [{ name: 'file', type: 'file' }]
+      wrapper.vm.successful = ['1']
+      await nextTick()
+
       const info = wrapper.find(selectors.error).text()
       expect(info).toBe('1 of 2 items failed')
     })
   })
   describe('details', () => {
-    it('should hide the info by default', () => {
-      const { wrapper } = getShallowWrapper({
-        showInfo: true
-      })
+    it('should hide the info by default', async () => {
+      const { wrapper } = getShallowWrapper()
+      wrapper.vm.showInfo = true
+      await nextTick()
+
       const info = wrapper.find(selectors.info.items)
       expect(info.exists()).toBeFalsy()
     })
-    it('should list all the uploaded files when the info is displayed', () => {
-      const { wrapper } = getShallowWrapper({
-        showInfo: true,
-        infoExpanded: true,
-        uploads: [
-          { name: 'file', type: 'file', meta: { uploadId: '1' } },
-          { name: 'file2', type: 'file', meta: { uploadId: '2' } }
-        ]
-      })
+    it('should list all the uploaded files when the info is displayed', async () => {
+      const { wrapper } = getShallowWrapper()
+      wrapper.vm.showInfo = true
+      wrapper.vm.infoExpanded = true
+      wrapper.vm.uploads = [
+        { name: 'file', type: 'file', meta: { uploadId: '1' } },
+        { name: 'file2', type: 'file', meta: { uploadId: '2' } }
+      ]
+      await nextTick()
+
       const info = wrapper.find(selectors.info.items)
       expect(info.exists()).toBeTruthy()
 
       const uploadedItems = wrapper.findAll(selectors.info.item)
       expect(uploadedItems.length).toBe(2)
     })
-    it('should show a message on the failed uploaded files', () => {
-      const { wrapper } = getShallowWrapper({
-        showInfo: true,
-        infoExpanded: true,
-        uploads: [
-          { name: 'file', type: 'file', meta: { uploadId: '1' } },
-          { name: 'file2', type: 'file', meta: { uploadId: '2' } },
-          { name: 'file3', type: 'file', meta: { uploadId: '3' } }
-        ],
-        errors: {
+    it('should show a message on the failed uploaded files', async () => {
+      const { wrapper } = getShallowWrapper()
+      wrapper.vm.showInfo = true
+      wrapper.vm.infoExpanded = true
+      ;(wrapper.vm.uploads = [
+        { name: 'file', type: 'file', meta: { uploadId: '1' } },
+        { name: 'file2', type: 'file', meta: { uploadId: '2' } },
+        { name: 'file3', type: 'file', meta: { uploadId: '3' } }
+      ]),
+        (wrapper.vm.errors = {
           1: new Error(),
           2: new Error()
-        }
-      })
+        })
+      await nextTick()
+
       const info = wrapper.find(selectors.info.items)
       expect(info.exists()).toBeTruthy()
 
@@ -173,21 +170,21 @@ describe('UploadInfo component', () => {
       expect(infoMessages.at(0).text()).toBe('Unknown error')
       expect(infoMessages.at(0).text()).toBe('Unknown error')
     })
-    it('folder is clickable', () => {
-      const { wrapper } = getShallowWrapper({
-        showInfo: true,
-        infoExpanded: true,
-        uploads: [
-          {
-            name: 'file',
-            type: 'folder',
-            isFolder: true,
-            targetRoute: { params: { driveAliasAndItem: 'some/drive/alias' } },
-            path: '',
-            meta: { uploadId: '1' }
-          }
-        ]
-      })
+    it('folder is clickable', async () => {
+      const { wrapper } = getShallowWrapper()
+      wrapper.vm.showInfo = true
+      wrapper.vm.infoExpanded = true
+      wrapper.vm.uploads = [
+        {
+          name: 'file',
+          type: 'folder',
+          isFolder: true,
+          targetRoute: { params: { driveAliasAndItem: 'some/drive/alias' } },
+          path: '',
+          meta: { uploadId: '1' }
+        }
+      ]
+      await nextTick()
 
       const info = wrapper.find(selectors.info.items)
       expect(info.exists()).toBeTruthy()
@@ -211,18 +208,7 @@ describe('UploadInfo component', () => {
   })
 })
 
-function getShallowWrapper({
-  showInfo = false,
-  infoExpanded = false,
-  uploads = [],
-  filesInProgressCount = 0,
-  runningUploads = 0,
-  successful = [],
-  errors = {},
-  uploadsCancelled = false,
-  inPreparation = false,
-  inFinalization = false
-} = {}) {
+function getShallowWrapper() {
   const mocks = {
     ...defaultComponentMocks()
   }
@@ -230,20 +216,6 @@ function getShallowWrapper({
   return {
     mocks,
     wrapper: shallowMount(UploadInfo, {
-      data() {
-        return {
-          showInfo,
-          infoExpanded,
-          uploads,
-          filesInProgressCount,
-          runningUploads,
-          successful,
-          errors,
-          uploadsCancelled,
-          inPreparation,
-          inFinalization
-        }
-      },
       global: {
         plugins: [...defaultPlugins()],
         mocks