@uppy/xhr-upload: refactor to use fetcher

[Murderlon]

Blocked on #5073

[github-actions]

Diff output files

diff --git a/packages/@uppy/utils/lib/ProgressTimeout.js b/packages/@uppy/utils/lib/ProgressTimeout.js
index 1aa9ffd..83ba907 100644
--- a/packages/@uppy/utils/lib/ProgressTimeout.js
+++ b/packages/@uppy/utils/lib/ProgressTimeout.js
@@ -31,7 +31,7 @@ class ProgressTimeout {
       value: void 0,
     });
     _classPrivateFieldLooseBase(this, _timeout)[_timeout] = timeout;
-    _classPrivateFieldLooseBase(this, _onTimedOut)[_onTimedOut] = timeoutHandler;
+    _classPrivateFieldLooseBase(this, _onTimedOut)[_onTimedOut] = () => timeoutHandler(timeout);
   }
   progress() {
     if (_classPrivateFieldLooseBase(this, _isDone)[_isDone]) return;
diff --git a/packages/@uppy/xhr-upload/lib/index.js b/packages/@uppy/xhr-upload/lib/index.js
index 609c3ad..99e5482 100644
--- a/packages/@uppy/xhr-upload/lib/index.js
+++ b/packages/@uppy/xhr-upload/lib/index.js
@@ -10,12 +10,11 @@ function _classPrivateFieldLooseKey(name) {
 }
 import BasePlugin from "@uppy/core/lib/BasePlugin.js";
 import EventManager from "@uppy/core/lib/EventManager.js";
+import { fetcher } from "@uppy/utils/lib/fetcher";
 import { filterFilesToEmitUploadStarted, filterNonFailedFiles } from "@uppy/utils/lib/fileFilters";
 import isNetworkError from "@uppy/utils/lib/isNetworkError";
 import NetworkError from "@uppy/utils/lib/NetworkError";
-import ProgressTimeout from "@uppy/utils/lib/ProgressTimeout";
 import { internalRateLimitedQueue, RateLimitedQueue } from "@uppy/utils/lib/RateLimitedQueue";
-import { nanoid } from "nanoid/non-secure";
 const packageJson = {
   "version": "3.6.4",
 };
@@ -70,6 +69,7 @@ const defaultOptions = {
     return status >= 200 && status < 300;
   },
 };
+var _getFetcher = _classPrivateFieldLooseKey("getFetcher");
 var _uploadLocalFile = _classPrivateFieldLooseKey("uploadLocalFile");
 var _uploadBundle = _classPrivateFieldLooseKey("uploadBundle");
 var _getCompanionClientArgs = _classPrivateFieldLooseKey("getCompanionClientArgs");
@@ -94,6 +94,10 @@ export default class XHRUpload extends BasePlugin {
     Object.defineProperty(this, _uploadLocalFile, {
       value: _uploadLocalFile2,
     });
+    Object.defineProperty(this, _getFetcher, {
+      writable: true,
+      value: void 0,
+    });
     Object.defineProperty(this, _handleUpload, {
       writable: true,
       value: async fileIDs => {
@@ -145,6 +149,63 @@ export default class XHRUpload extends BasePlugin {
       throw new Error("The `metaFields` option has been renamed to `allowedMetaFields`.");
     }
     this.uploaderEvents = Object.create(null);
+    _classPrivateFieldLooseBase(this, _getFetcher)[_getFetcher] = files => {
+      return async (url, options) => {
+        try {
+          const res = await fetcher(url, {
+            ...options,
+            onTimeout: timeout => {
+              const seconds = Math.ceil(timeout / 1000);
+              const error = new Error(this.i18n("uploadStalled", {
+                seconds,
+              }));
+              this.uppy.emit("upload-stalled", error, files);
+            },
+            onUploadProgress: event => {
+              if (event.lengthComputable) {
+                for (const file of files) {
+                  this.uppy.emit("upload-progress", file, {
+                    uploader: this,
+                    bytesUploaded: event.loaded / event.total * file.size,
+                    bytesTotal: file.size,
+                  });
+                }
+              }
+            },
+          });
+          if (!this.opts.validateStatus(res.status, res.responseText, res)) {
+            throw new NetworkError(res.statusText, res);
+          }
+          const body = this.opts.getResponseData(res.responseText, res);
+          const uploadURL = body[this.opts.responseUrlFieldName];
+          if (typeof uploadURL !== "string") {
+            throw new Error(
+              `The received response did not include a valid URL for key ${this.opts.responseUrlFieldName}`,
+            );
+          }
+          for (const file of files) {
+            this.uppy.emit("upload-success", file, {
+              status: res.status,
+              body,
+              uploadURL,
+            });
+          }
+          return res;
+        } catch (error) {
+          if (error.name === "AbortError") {
+            return undefined;
+          }
+          if (error instanceof NetworkError) {
+            const request = error.request;
+            const customError = buildResponseError(request, this.opts.getResponseError(request.responseText, request));
+            for (const file of files) {
+              this.uppy.emit("upload-error", file, customError);
+            }
+          }
+          throw error;
+        }
+      };
+    };
   }
   getOptions(file) {
     const overrides = this.uppy.getState().xhrUpload;
@@ -238,196 +299,67 @@ export default class XHRUpload extends BasePlugin {
     this.uppy.removeUploader(_classPrivateFieldLooseBase(this, _handleUpload)[_handleUpload]);
   }
 }
-async function _uploadLocalFile2(file, current, total) {
-  const opts = this.getOptions(file);
-  const uploadStarted = Date.now();
-  this.uppy.log(`uploading ${current} of ${total}`);
-  return new Promise((resolve, reject) => {
-    const data = opts.formData ? this.createFormDataUpload(file, opts) : file.data;
-    const xhr = new XMLHttpRequest();
-    const eventManager = new EventManager(this.uppy);
-    this.uploaderEvents[file.id] = eventManager;
-    let queuedRequest;
-    const timer = new ProgressTimeout(opts.timeout, () => {
-      const error = new Error(this.i18n("uploadStalled", {
-        seconds: Math.ceil(opts.timeout / 1000),
-      }));
-      this.uppy.emit("upload-stalled", error, [file]);
-    });
-    const id = nanoid();
-    xhr.upload.addEventListener("loadstart", () => {
-      this.uppy.log(`[XHRUpload] ${id} started`);
+async function _uploadLocalFile2(file) {
+  const events = new EventManager(this.uppy);
+  const controller = new AbortController();
+  const uppyFetch = this.requests.wrapPromiseFunction(async () => {
+    const opts = this.getOptions(file);
+    const fetch = _classPrivateFieldLooseBase(this, _getFetcher)[_getFetcher]([file]);
+    const body = opts.formData ? this.createFormDataUpload(file, opts) : file.data;
+    return fetch(opts.endpoint, {
+      ...opts,
+      body,
+      signal: controller.signal,
     });
-    xhr.upload.addEventListener("progress", ev => {
-      this.uppy.log(`[XHRUpload] ${id} progress: ${ev.loaded} / ${ev.total}`);
-      timer.progress();
-      if (ev.lengthComputable) {
-        this.uppy.emit("upload-progress", this.uppy.getFile(file.id), {
-          uploader: this,
-          uploadStarted,
-          bytesUploaded: ev.loaded,
-          bytesTotal: ev.total,
-        });
-      }
-    });
-    xhr.addEventListener("load", () => {
-      this.uppy.log(`[XHRUpload] ${id} finished`);
-      timer.done();
-      queuedRequest.done();
-      if (this.uploaderEvents[file.id]) {
-        this.uploaderEvents[file.id].remove();
-        this.uploaderEvents[file.id] = null;
-      }
-      if (opts.validateStatus(xhr.status, xhr.responseText, xhr)) {
-        const body = opts.getResponseData(xhr.responseText, xhr);
-        const uploadURL = body == null ? void 0 : body[opts.responseUrlFieldName];
-        const uploadResp = {
-          status: xhr.status,
-          body,
-          uploadURL,
-        };
-        this.uppy.emit("upload-success", this.uppy.getFile(file.id), uploadResp);
-        if (uploadURL) {
-          this.uppy.log(`Download ${file.name} from ${uploadURL}`);
-        }
-        return resolve(file);
-      }
-      const body = opts.getResponseData(xhr.responseText, xhr);
-      const error = buildResponseError(xhr, opts.getResponseError(xhr.responseText, xhr));
-      const response = {
-        status: xhr.status,
-        body,
-      };
-      this.uppy.emit("upload-error", file, error, response);
-      return reject(error);
-    });
-    xhr.addEventListener("error", () => {
-      this.uppy.log(`[XHRUpload] ${id} errored`);
-      timer.done();
-      queuedRequest.done();
-      if (this.uploaderEvents[file.id]) {
-        this.uploaderEvents[file.id].remove();
-        this.uploaderEvents[file.id] = null;
-      }
-      const error = buildResponseError(xhr, opts.getResponseError(xhr.responseText, xhr));
-      this.uppy.emit("upload-error", file, error);
-      return reject(error);
-    });
-    xhr.open(opts.method.toUpperCase(), opts.endpoint, true);
-    xhr.withCredentials = opts.withCredentials;
-    if (opts.responseType !== "") {
-      xhr.responseType = opts.responseType;
+  });
+  events.onFileRemove(file.id, () => controller.abort());
+  events.onCancelAll(file.id, _ref => {
+    let {
+      reason,
+    } = _ref;
+    if (reason === "user") {
+      controller.abort();
     }
-    queuedRequest = this.requests.run(() => {
-      const currentOpts = this.getOptions(file);
-      Object.keys(currentOpts.headers).forEach(header => {
-        xhr.setRequestHeader(header, currentOpts.headers[header]);
-      });
-      xhr.send(data);
-      return () => {
-        timer.done();
-        xhr.abort();
-      };
-    });
-    eventManager.onFileRemove(file.id, () => {
-      queuedRequest.abort();
-      reject(new Error("File removed"));
-    });
-    eventManager.onCancelAll(file.id, _ref => {
-      let {
-        reason,
-      } = _ref;
-      if (reason === "user") {
-        queuedRequest.abort();
-      }
-      reject(new Error("Upload cancelled"));
-    });
   });
+  try {
+    await uppyFetch().abortOn(controller.signal);
+  } catch (error) {
+    if (error.message !== "Cancelled") {
+      throw error;
+    }
+  } finally {
+    events.remove();
+  }
 }
-function _uploadBundle2(files) {
-  return new Promise((resolve, reject) => {
-    const {
-      endpoint,
-    } = this.opts;
-    const {
-      method,
-    } = this.opts;
-    const uploadStarted = Date.now();
-    const optsFromState = this.uppy.getState().xhrUpload;
-    const formData = this.createBundledUpload(files, {
+async function _uploadBundle2(files) {
+  const controller = new AbortController();
+  const uppyFetch = this.requests.wrapPromiseFunction(async () => {
+    var _this$uppy$getState$x;
+    const optsFromState = (_this$uppy$getState$x = this.uppy.getState().xhrUpload) != null ? _this$uppy$getState$x : {};
+    const fetch = _classPrivateFieldLooseBase(this, _getFetcher)[_getFetcher](files);
+    const body = this.createBundledUpload(files, {
       ...this.opts,
-      ...(optsFromState || {}),
-    });
-    const xhr = new XMLHttpRequest();
-    const emitError = error => {
-      files.forEach(file => {
-        this.uppy.emit("upload-error", file, error);
-      });
-    };
-    const timer = new ProgressTimeout(this.opts.timeout, () => {
-      const error = new Error(this.i18n("uploadStalled", {
-        seconds: Math.ceil(this.opts.timeout / 1000),
-      }));
-      this.uppy.emit("upload-stalled", error, files);
+      ...optsFromState,
     });
-    xhr.upload.addEventListener("loadstart", () => {
-      this.uppy.log("[XHRUpload] started uploading bundle");
-      timer.progress();
-    });
-    xhr.upload.addEventListener("progress", ev => {
-      timer.progress();
-      if (!ev.lengthComputable) return;
-      files.forEach(file => {
-        this.uppy.emit("upload-progress", this.uppy.getFile(file.id), {
-          uploader: this,
-          uploadStarted,
-          bytesUploaded: ev.loaded / ev.total * file.size,
-          bytesTotal: file.size,
-        });
-      });
-    });
-    xhr.addEventListener("load", () => {
-      timer.done();
-      if (this.opts.validateStatus(xhr.status, xhr.responseText, xhr)) {
-        const body = this.opts.getResponseData(xhr.responseText, xhr);
-        const uploadResp = {
-          status: xhr.status,
-          body,
-        };
-        files.forEach(file => {
-          this.uppy.emit("upload-success", this.uppy.getFile(file.id), uploadResp);
-        });
-        return resolve();
-      }
-      const error = this.opts.getResponseError(xhr.responseText, xhr) || new NetworkError("Upload error", xhr);
-      emitError(error);
-      return reject(error);
-    });
-    xhr.addEventListener("error", () => {
-      timer.done();
-      const error = this.opts.getResponseError(xhr.responseText, xhr) || new Error("Upload error");
-      emitError(error);
-      return reject(error);
-    });
-    this.uppy.on("cancel-all", function(_temp) {
-      let {
-        reason,
-      } = _temp === void 0 ? {} : _temp;
-      if (reason !== "user") return;
-      timer.done();
-      xhr.abort();
-    });
-    xhr.open(method.toUpperCase(), endpoint, true);
-    xhr.withCredentials = this.opts.withCredentials;
-    if (this.opts.responseType !== "") {
-      xhr.responseType = this.opts.responseType;
-    }
-    const headers = this.opts.headers;
-    Object.keys(headers).forEach(header => {
-      xhr.setRequestHeader(header, headers[header]);
+    return fetch(this.opts.endpoint, {
+      ...this.opts,
+      body,
+      signal: controller.signal,
     });
-    xhr.send(formData);
   });
+  function abort() {
+    controller.abort();
+  }
+  this.uppy.once("cancel-all", abort);
+  try {
+    await uppyFetch().abortOn(controller.signal);
+  } catch (error) {
+    if (error.message !== "Cancelled") {
+      throw error;
+    }
+  } finally {
+    this.uppy.off("cancel-all", abort);
+  }
 }
 function _getCompanionClientArgs2(file) {
   var _file$remote;
@@ -446,9 +378,7 @@ function _getCompanionClientArgs2(file) {
   };
 }
 async function _uploadFiles2(files) {
-  await Promise.allSettled(files.map((file, i) => {
-    const current = i + 1;
-    const total = files.length;
+  await Promise.allSettled(files.map(file => {
     if (file.isRemote) {
       const getQueue = () => this.requests;
       const controller = new AbortController();
@@ -471,7 +401,7 @@ async function _uploadFiles2(files) {
       })();
       return uploadPromise;
     }
-    return _classPrivateFieldLooseBase(this, _uploadLocalFile)[_uploadLocalFile](file, current, total);
+    return _classPrivateFieldLooseBase(this, _uploadLocalFile)[_uploadLocalFile](file);
   }));
 }
 XHRUpload.VERSION = packageJson.version;

[aduh95]

LGTM if tests are green