[MDS-5405] Minespace: Fixed file upload 401 error for large files (#2615

) * MDS-5405 Fixed 401 error when uploading large file through minespace * MDS-5363 Updated yarn.lock --------- Co-authored-by: simensma-fresh <[email protected]>
bcgov · Aug 2, 2023 · 6a93019 · 6a93019
1 parent d04486e
commit 6a93019
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 53 deletions.
diff --git a/services/minespace-web/package.json b/services/minespace-web/package.json
@@ -75,7 +75,7 @@
     "reselect": "4.0.0",
     "sass": "1.63.6",
     "sass-loader": "13.3.2",
-    "tus-js-client": "1.8.0"
+    "tus-js-client": "3.1.0"
   },
   "devDependencies": {
     "@babel/core": "7.15.0",

diff --git a/services/minespace-web/src/components/common/FileUpload.js b/services/minespace-web/src/components/common/FileUpload.js
@@ -8,7 +8,7 @@ import { invert, uniq } from "lodash";
 import "filepond/dist/filepond.min.css";
 import FilePondPluginFileValidateSize from "filepond-plugin-file-validate-size";
 import FilePondPluginFileValidateType from "filepond-plugin-file-validate-type";
-import tus from "tus-js-client";
+import * as tus from "tus-js-client";
 import { ENVIRONMENT } from "@mds/common";
 import { APPLICATION_OCTET_STREAM } from "@common/constants/fileTypes";
 import { createRequestHeader } from "@common/utils/RequestHeaders";
@@ -97,7 +97,14 @@ class FileUpload extends React.Component {
             filename: fileToUpload.name,
             filetype: fileToUpload.type || APPLICATION_OCTET_STREAM,
           },
-          headers: createRequestHeader().headers,
+          onBeforeRequest: (req) => {
+            // Set authorization header on each request to make use
+            // of the new token in case of a token refresh was performed
+            var xhr = req.getUnderlyingObject();
+            const { headers } = createRequestHeader();
+
+            xhr.setRequestHeader("Authorization", headers.Authorization);
+          },
           onError: (err) => {
             try {
               err.response = JSON.parse(err.originalRequest.response);
@@ -116,7 +123,9 @@ class FileUpload extends React.Component {
                   duration: 10,
                 });
               }
-              this.props.onError(file && fileToUpload.name ? fileToUpload.name : "", err);
+              if (this.props.onError) {
+                this.props.onError(file && fileToUpload.name ? fileToUpload.name : "", err);
+              }
             } catch (err) {
               notification.error({
                 message: `Failed to upload the file: ${err}`,

diff --git a/yarn.lock b/yarn.lock
@@ -2489,7 +2489,7 @@ __metadata:
     ts-jest: 24.3.0
     ts-loader: 8.4.0
     ts-node: 10.9.1
-    tus-js-client: 1.8.0
+    tus-js-client: 3.1.0
     typescript: 4.7.4
     url-loader: 2.3.0
     webpack: 5.88.1
@@ -6339,13 +6339,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"buffer-from@npm:^0.1.1":
-  version: 0.1.2
-  resolution: "buffer-from@npm:0.1.2"
-  checksum: 50a1fa5da97d2081b7d945483c8967d3b89a096fa585eb55000bb2100e827c647c9370280ec9bd057da8f9fa5abc1d3b764228851a31fa8a67f659f70c0052d8
-  languageName: node
-  linkType: hard
-
 "buffer@npm:^5.2.1, buffer@npm:^5.6.0":
   version: 5.7.1
   resolution: "buffer@npm:5.7.1"
@@ -9861,7 +9854,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"extend@npm:^3.0.2, extend@npm:~3.0.2":
+"extend@npm:~3.0.2":
   version: 3.0.2
   resolution: "extend@npm:3.0.2"
   checksum: a50a8309ca65ea5d426382ff09f33586527882cf532931cb08ca786ea3146c0553310bda688710ff61d7668eba9f96b923fe1420cdf56a2c3eaf30fcab87b515
@@ -13393,13 +13386,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"js-base64@npm:^2.4.9":
-  version: 2.6.4
-  resolution: "js-base64@npm:2.6.4"
-  checksum: 5f4084078d6c46f8529741d110df84b14fac3276b903760c21fa8cc8521370d607325dfe1c1a9fbbeaae1ff8e602665aaeef1362427d8fef704f9e3659472ce8
-  languageName: node
-  linkType: hard
-
 "js-base64@npm:^3.7.2":
   version: 3.7.5
   resolution: "js-base64@npm:3.7.5"
@@ -17322,16 +17308,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"proper-lockfile@npm:^2.0.1":
-  version: 2.0.1
-  resolution: "proper-lockfile@npm:2.0.1"
-  dependencies:
-    graceful-fs: ^4.1.2
-    retry: ^0.10.0
-  checksum: 3cadc4fb7139e521df5ef63b54693fa26b22ad130728f32e768c4a360791ba3ba294b0ad389388ba91db89e34895ecad16a67a02202302cb7e42216f3c906526
-  languageName: node
-  linkType: hard
-
 "proper-lockfile@npm:^4.1.2":
   version: 4.1.2
   resolution: "proper-lockfile@npm:4.1.2"
@@ -19179,13 +19155,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"retry@npm:^0.10.0":
-  version: 0.10.1
-  resolution: "retry@npm:0.10.1"
-  checksum: 133ef7c2028bcb09544a6fb9bed9f8266fffeaf72c855f73c2918ace9ef2abd7ccba03744564bcd1a8e948ed70518f8970852f46e649f9e3db6fefb0148cda35
-  languageName: node
-  linkType: hard
-
 "retry@npm:^0.12.0":
   version: 0.12.0
   resolution: "retry@npm:0.12.0"
@@ -21225,21 +21194,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tus-js-client@npm:1.8.0":
-  version: 1.8.0
-  resolution: "tus-js-client@npm:1.8.0"
-  dependencies:
-    buffer-from: ^0.1.1
-    combine-errors: ^3.0.3
-    extend: ^3.0.2
-    js-base64: ^2.4.9
-    lodash.throttle: ^4.1.1
-    proper-lockfile: ^2.0.1
-    url-parse: ^1.4.3
-  checksum: 2841cee1e4b8717b52a355eb63b9db0fc3af045e0c7c6389435175a417edeeefa89ca41e76c1bd11b53a71a87dcccc47b30bd1c035e16c1c9bede6e24ea93042
-  languageName: node
-  linkType: hard
-
 "tus-js-client@npm:3.1.0":
   version: 3.1.0
   resolution: "tus-js-client@npm:3.1.0"
@@ -21615,7 +21569,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"url-parse@npm:^1.4.3, url-parse@npm:^1.5.7":
+"url-parse@npm:^1.5.7":
   version: 1.5.10
   resolution: "url-parse@npm:1.5.10"
   dependencies: