@uppy/xhr-upload: migrate to TS

[Murderlon]

No description provided.

[github-actions]

Diff output files

diff --git a/packages/@uppy/xhr-upload/lib/index.js b/packages/@uppy/xhr-upload/lib/index.js
index 9152ae8..a864f43 100644
--- a/packages/@uppy/xhr-upload/lib/index.js
+++ b/packages/@uppy/xhr-upload/lib/index.js
@@ -9,7 +9,7 @@ function _classPrivateFieldLooseKey(name) {
   return "__private_" + id++ + "_" + name;
 }
 import BasePlugin from "@uppy/core/lib/BasePlugin.js";
-import EventManager from "@uppy/utils/lib/EventManager";
+import EventManager from "@uppy/core/lib/EventManager.js";
 import { filterFilesToEmitUploadStarted, filterNonFailedFiles } from "@uppy/utils/lib/fileFilters";
 import isNetworkError from "@uppy/utils/lib/isNetworkError";
 import NetworkError from "@uppy/utils/lib/NetworkError";
@@ -40,6 +40,33 @@ function setTypeInBlob(file) {
   const dataWithUpdatedType = file.data.slice(0, file.data.size, file.meta.type);
   return dataWithUpdatedType;
 }
+const defaultOptions = {
+  endpoint: "",
+  formData: true,
+  fieldName: "file",
+  method: "post",
+  allowedMetaFields: null,
+  responseUrlFieldName: "url",
+  bundle: false,
+  headers: {},
+  timeout: 30 * 1000,
+  limit: 5,
+  withCredentials: false,
+  responseType: "",
+  getResponseData(responseText) {
+    return JSON.parse(responseText);
+  },
+  getResponseError(_, response) {
+    let error = new Error("Upload error");
+    if (isNetworkError(response)) {
+      error = new NetworkError(error, response);
+    }
+    return error;
+  },
+  validateStatus(status) {
+    return status >= 200 && status < 300;
+  },
+};
 var _uploadLocalFile = _classPrivateFieldLooseKey("uploadLocalFile");
 var _uploadBundle = _classPrivateFieldLooseKey("uploadBundle");
 var _getCompanionClientArgs = _classPrivateFieldLooseKey("getCompanionClientArgs");
@@ -47,7 +74,11 @@ var _uploadFiles = _classPrivateFieldLooseKey("uploadFiles");
 var _handleUpload = _classPrivateFieldLooseKey("handleUpload");
 export default class XHRUpload extends BasePlugin {
   constructor(uppy, _opts) {
-    super(uppy, _opts);
+    super(uppy, {
+      ...defaultOptions,
+      fieldName: _opts.bundle ? "files[]" : "file",
+      ..._opts,
+    });
     Object.defineProperty(this, _uploadFiles, {
       value: _uploadFiles2,
     });
@@ -94,44 +125,7 @@ export default class XHRUpload extends BasePlugin {
     });
     this.type = "uploader";
     this.id = this.opts.id || "XHRUpload";
-    this.title = "XHRUpload";
     this.defaultLocale = locale;
-    const defaultOptions = {
-      formData: true,
-      fieldName: _opts.bundle ? "files[]" : "file",
-      method: "post",
-      allowedMetaFields: null,
-      responseUrlFieldName: "url",
-      bundle: false,
-      headers: {},
-      timeout: 30 * 1000,
-      limit: 5,
-      withCredentials: false,
-      responseType: "",
-      getResponseData(responseText) {
-        let parsedResponse = {};
-        try {
-          parsedResponse = JSON.parse(responseText);
-        } catch (err) {
-          uppy.log(err);
-        }
-        return parsedResponse;
-      },
-      getResponseError(_, response) {
-        let error = new Error("Upload error");
-        if (isNetworkError(response)) {
-          error = new NetworkError(error, response);
-        }
-        return error;
-      },
-      validateStatus(status) {
-        return status >= 200 && status < 300;
-      },
-    };
-    this.opts = {
-      ...defaultOptions,
-      ..._opts,
-    };
     this.i18nInit();
     if (internalRateLimitedQueue in this.opts) {
       this.requests = this.opts[internalRateLimitedQueue];
@@ -141,6 +135,9 @@ export default class XHRUpload extends BasePlugin {
     if (this.opts.bundle && !this.opts.formData) {
       throw new Error("`opts.formData` must be true when `opts.bundle` is enabled.");
     }
+    if (this.opts.bundle && typeof this.opts.headers === "function") {
+      throw new Error("`opts.headers` can not be a function when the `bundle: true` option is set.");
+    }
     if ((_opts == null ? void 0 : _opts.allowedMetaFields) === undefined && "metaFields" in this.opts) {
       throw new Error("The `metaFields` option has been renamed to `allowedMetaFields`.");
     }
@@ -173,10 +170,11 @@ export default class XHRUpload extends BasePlugin {
   addMetadata(formData, meta, opts) {
     const allowedMetaFields = Array.isArray(opts.allowedMetaFields) ? opts.allowedMetaFields : Object.keys(meta);
     allowedMetaFields.forEach(item => {
-      if (Array.isArray(meta[item])) {
-        meta[item].forEach(subItem => formData.append(item, subItem));
+      const value = meta[item];
+      if (Array.isArray(value)) {
+        value.forEach(subItem => formData.append(item, subItem));
       } else {
-        formData.append(item, meta[item]);
+        formData.append(item, value);
       }
     });
   }
@@ -239,6 +237,7 @@ export default class XHRUpload extends BasePlugin {
 }
 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;
@@ -262,6 +261,7 @@ async function _uploadLocalFile2(file, current, total) {
       if (ev.lengthComputable) {
         this.uppy.emit("upload-progress", file, {
           uploader: this,
+          uploadStarted,
           bytesUploaded: ev.loaded,
           bytesTotal: ev.total,
         });
@@ -349,6 +349,7 @@ function _uploadBundle2(files) {
     const {
       method,
     } = this.opts;
+    const uploadStarted = Date.now();
     const optsFromState = this.uppy.getState().xhrUpload;
     const formData = this.createBundledUpload(files, {
       ...this.opts,
@@ -376,17 +377,18 @@ function _uploadBundle2(files) {
       files.forEach(file => {
         this.uppy.emit("upload-progress", file, {
           uploader: this,
+          uploadStarted,
           bytesUploaded: ev.loaded / ev.total * file.size,
           bytesTotal: file.size,
         });
       });
     });
-    xhr.addEventListener("load", ev => {
+    xhr.addEventListener("load", () => {
       timer.done();
-      if (this.opts.validateStatus(ev.target.status, xhr.responseText, xhr)) {
+      if (this.opts.validateStatus(xhr.status, xhr.responseText, xhr)) {
         const body = this.opts.getResponseData(xhr.responseText, xhr);
         const uploadResp = {
-          status: ev.target.status,
+          status: xhr.status,
           body,
         };
         files.forEach(file => {
@@ -394,8 +396,7 @@ function _uploadBundle2(files) {
         });
         return resolve();
       }
-      const error = this.opts.getResponseError(xhr.responseText, xhr) || new Error("Upload error");
-      error.request = xhr;
+      const error = this.opts.getResponseError(xhr.responseText, xhr) || new NetworkError("Upload error", xhr);
       emitError(error);
       return reject(error);
     });
@@ -418,17 +419,19 @@ function _uploadBundle2(files) {
     if (this.opts.responseType !== "") {
       xhr.responseType = this.opts.responseType;
     }
-    Object.keys(this.opts.headers).forEach(header => {
-      xhr.setRequestHeader(header, this.opts.headers[header]);
+    const headers = this.opts.headers;
+    Object.keys(headers).forEach(header => {
+      xhr.setRequestHeader(header, headers[header]);
     });
     xhr.send(formData);
   });
 }
 function _getCompanionClientArgs2(file) {
+  var _file$remote;
   const opts = this.getOptions(file);
   const allowedMetaFields = Array.isArray(opts.allowedMetaFields) ? opts.allowedMetaFields : Object.keys(file.meta);
   return {
-    ...file.remote.body,
+    ...((_file$remote = file.remote) == null ? void 0 : _file$remote.body),
     protocol: "multipart",
     endpoint: opts.endpoint,
     size: file.data.size,
@@ -441,7 +444,7 @@ function _getCompanionClientArgs2(file) {
 }
 async function _uploadFiles2(files) {
   await Promise.allSettled(files.map((file, i) => {
-    const current = parseInt(i, 10) + 1;
+    const current = i + 1;
     const total = files.length;
     if (file.isRemote) {
       const getQueue = () => this.requests;

[Murderlon]

Removed uploader as it's used nowhere.

[aduh95]

It might be used by users – it might have been added as a response to a user request. You also added uploadStarted?

[Murderlon]

I can't be typed properly but maybe we should leave it was any and ts-expect-error. I added uploadStarted because it was a bug that it was not present.

[Murderlon]

the same as ev.target.status but now TS is happy

[Murderlon]

added a new error instead of a runtime crash.

[Murderlon]

not sure what this type is supposed to be and why we have it in files and uppy state.

[aduh95]

There's a CI failure, otherwise LGTM

[aduh95]

Is is OK make that change in a separate PR as it's very likely going to be a pain for AWS as well?

[Murderlon]

If you think this PR is ready to go I can also just merge it in here? If it's blocking and not approved I can do separate PR.

[aduh95]

Just to be sure, we're getting rid of the title property on the none-UIPlugins plugins, correct?

[Murderlon]

Indeed, title was just a copy paste mistake on non-UI plugins.