@uppy/xhr-upload: add `'upload-stalled'` event (#4247)

* @uppy/xhr-upload: add`'upload-stalled'` event

* Apply suggestions from code review

Co-authored-by: Merlijn Vos <merlijn@soverin.net>

* Add example

* Update website/src/docs/core.md

Co-authored-by: Merlijn Vos <merlijn@soverin.net>

* Update website/src/docs/core.md

* add bundle error and update locales

* add info message and update docs

* add French translation

* Update website/src/docs/core.md

* fixup! Update website/src/docs/core.md

---------

Co-authored-by: Merlijn Vos <merlijn@soverin.net>

packages/@uppy/core/src/Uppy.js

@@ -972,6 +972,19 @@ class Uppy {
       }
     })
 
+    let uploadStalledWarningRecentlyEmitted
+    this.on('upload-stalled', (error, files) => {
+      const { message } = error
+      const details = files.map(file => file.meta.name).join(', ')
+      if (!uploadStalledWarningRecentlyEmitted) {
+        this.info({ message, details }, 'warning', this.opts.infoTimeout)
+        uploadStalledWarningRecentlyEmitted = setTimeout(() => {
+          uploadStalledWarningRecentlyEmitted = null
+        }, this.opts.infoTimeout)
+      }
+      this.log(`${message} ${details}`.trim(), 'warning')
+    })
+
     this.on('upload', () => {
       this.setState({ error: null })
     })

packages/@uppy/locales/src/fr_FR.js

@@ -125,6 +125,7 @@ fr_FR.strings = {
   uploadComplete: 'Téléchargement terminé',
   uploadFailed: 'Le téléchargement a échoué',
   uploadPaused: 'Téléchargement mis en pause',
+  uploadStalled: 'Téléchargement bloqué depuis %{seconds} secondes. Il est peut-être nécessaire de recommencer l\'opération.',
   uploadXFiles: {
     '0': 'Télécharger %{smart_count} fichier',
     '1': 'Télécharger %{smart_count} fichiers',

packages/@uppy/xhr-upload/src/index.js

@@ -230,11 +230,8 @@ export default class XHRUpload extends BasePlugin {
       let queuedRequest
 
       const timer = new ProgressTimeout(opts.timeout, () => {
-        xhr.abort()
-        queuedRequest.done()
-        const error = new Error(this.i18n('timedOut', { seconds: Math.ceil(opts.timeout / 1000) }))
-        this.uppy.emit('upload-error', file, error)
-        reject(error)
+        const error = new Error(this.i18n('uploadStalled', { seconds: Math.ceil(opts.timeout / 1000) }))
+        this.uppy.emit('upload-stalled', error, [file])
       })
 
       const id = nanoid()
@@ -516,10 +513,8 @@ export default class XHRUpload extends BasePlugin {
       }
 
       const timer = new ProgressTimeout(this.opts.timeout, () => {
-        xhr.abort()
-        const error = new Error(this.i18n('timedOut', { seconds: Math.ceil(this.opts.timeout / 1000) }))
-        emitError(error)
-        reject(error)
+        const error = new Error(this.i18n('uploadStalled', { seconds: Math.ceil(this.opts.timeout / 1000) }))
+        this.uppy.emit('upload-stalled', error, files)
       })
 
       xhr.upload.addEventListener('loadstart', () => {

packages/@uppy/xhr-upload/src/locale.js

@@ -1,6 +1,6 @@
 export default {
   strings: {
     // Shown in the Informer if an upload is being canceled because it stalled for too long.
-    timedOut: 'Upload stalled for %{seconds} seconds, aborting.',
+    uploadStalled: 'Upload has not made any progress for %{seconds} seconds. You may want to retry it.',
   },
 }

website/src/docs/core.md

@@ -946,6 +946,23 @@ uppy.on('upload-error', (file, error, response) => {
 })
 ```
 
+### `upload-stalled`
+
+Fired when an upload has not received any progress in some time (in `@uppy/xhr-upload`, the delay is defined by the `timeout` option). Use this event to display a message on the UI to tell the user they might want to retry the upload.
+
+```js
+uppy.on('upload-stalled', (error, files) => {
+  console.log('upload seems stalled', error, files)
+  const noLongerStalledEventHandler = (file) => {
+    if (files.includes(file)) {
+      console.log('upload is no longer stalled')
+      uppy.off('upload-progress', noLongerStalledEventHandler)
+    }
+  }
+  uppy.on('upload-progress', noLongerStalledEventHandler)
+})
+```
+
 ### `upload-retry`
 
 Fired when an upload has been retried (after an error, for example).

website/src/docs/xhr-upload.md

@@ -209,9 +209,9 @@ function getResponseError (responseText, response) {
 
 The field name containing a publically accessible location of the uploaded file in the response data returned by [`getResponseData()`](#getResponseData-responseText-response).
 
-### `timeout: 30 * 1000`
+### `timeout: 30_000`
 
-When no upload progress events have been received for this amount of milliseconds, assume the connection has an issue and abort the upload.
+When no upload progress events have been received for this amount of milliseconds, send a `'upload-stalled'` event.
 Note that unlike the [`XMLHttpRequest.timeout`][XHR.timeout] property, this is a timer between progress events: the total upload can take longer than this value.
 Set to `0` to disable this check.