Increase default XHR timeout and make it configurable

changelog/unreleased/enhancement-xhr-timeout

@@ -0,0 +1,6 @@
+Enhancement: XHR upload timeout
+
+The default timeout for XHR uploads has been increased from 30 to 60 seconds. Also, it can now be configured via the `config.json` file (in ms).
+
+https://github.com/owncloud/web/issues/7900
+https://github.com/owncloud/web/pull/7912

config/config.json.sample-oc10

@@ -14,5 +14,12 @@
     "search",
     "text-editor",
     "draw-io"
-  ]
+  ],
+  "options" : {
+    "upload": {
+      "xhr": {
+        "timeout": 60000
+      }
+    }
+  }
 }

config/config.json.sample-ocis

@@ -30,6 +30,11 @@
       "image/png",
       "image/jpeg",
       "text/plain"
-    ]
+    ],
+    "upload": {
+      "xhr": {
+        "timeout": 60000
+      }
+    }
   }
 }

docs/getting-started.md

@@ -62,6 +62,7 @@ substring of a value of the authenticated user. Examples are `/Shares`, `/{{.Id}
 hovers the row with his mouse. Defaults to `false`.
 - `option.routing` This accepts an object with the following fields to customize the routing behaviour:
   - `options.routing.idBased` Enable or disable fileIds being added to the URL. Defaults to `true` because otherwise e.g. spaces with name clashes can't be resolved correctly. Only disable this if you can guarantee server side that spaces of the same namespace can't have name clashes.   
+- `options.upload.xhr.timeout` Specifies the timeout for XHR uploads in milliseconds.
 
 ### Sentry
 

packages/web-runtime/src/composables/upload/useUpload.ts

@@ -105,6 +105,9 @@ export function useUpload(options: UploadOptions): UploadResult {
         tusMaxChunkSize: unref(tusMaxChunkSize),
         tusHttpMethodOverride: unref(tusHttpMethodOverride),
         tusExtension: unref(tusExtension)
+      }),
+      ...(!isTusSupported && {
+        xhrTimeout: store.getters.configuration?.options?.upload?.xhr?.timeout || 60000
       })
     }
   })

packages/web-runtime/src/services/uppyService.ts

@@ -74,12 +74,13 @@ export class UppyService {
     this.uppy.use(CustomTus, tusPluginOptions as unknown as TusOptions)
   }
 
-  useXhr({ headers }: { headers: () => uppyHeaders }) {
+  useXhr({ headers, xhrTimeout }: { headers: () => uppyHeaders; xhrTimeout: number }) {
     const xhrPluginOptions: XHRUploadOptions = {
       endpoint: '',
       method: 'put',
       headers,
       formData: false,
+      timeout: xhrTimeout,
       getResponseData() {
         return {}
       }