TUS: Detect and disallow concurrent uploads (#339)

static/app-strings.json

@@ -1303,6 +1303,7 @@
   "Retrying...": "Retrying...",
   "Uploading...": "Uploading...",
   "Creating...": "Creating...",
+  "Stopped. Duplicate session detected.": "Stopped. Duplicate session detected.",
   "Use a URL": "Use a URL",
   "Edit Cover Image": "Edit Cover Image",
   "Cover Image": "Cover Image",

ui/component/webUploadList/internal/web-upload-item.jsx

@@ -66,6 +66,8 @@ export default function WebUploadItem(props: Props) {
             return __('Retrying...');
           case 'error':
             return __('Failed.');
+          case 'conflict':
+            return __('Stopped. Duplicate session detected.');
           default:
             return status;
         }
@@ -130,7 +132,7 @@ export default function WebUploadItem(props: Props) {
         <div className="claim-upload__progress--label">lbry://{params.name}</div>
         <div className={'claim-upload__progress--outer card--inline'}>
           <div className={'claim-upload__progress--inner'} style={{ width: `${progress}%` }}>
-            {resolveProgressStr()}
+            <span className="claim-upload__progress--inner-text">{resolveProgressStr()}</span>
           </div>
         </div>
       </>

ui/scss/component/_claim-list.scss

@@ -375,6 +375,15 @@
 .claim-upload__progress--inner {
   background: var(--color-primary-alt);
   padding: var(--spacing-xxs);
+  height: 2.4rem;
+}
+
+.claim-upload__progress--inner-text {
+  position: absolute;
+  width: 80%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 //

web/setup/publish-v2.js

@@ -48,8 +48,18 @@ export function makeResumableUploadRequest(
       id: new Date().getTime(),
     });
 
+    const urlOptions = {};
+    if (params.uploadUrl) {
+      // Resuming from previous upload. TUS clears the resume fingerprint on any
+      // 4xx error, so we need to use the fixed URL mode instead.
+      urlOptions.uploadUrl = params.uploadUrl;
+    } else {
+      // New upload, so use `endpoint`.
+      urlOptions.endpoint = RESUMABLE_ENDPOINT;
+    }
+
     const uploader = new tus.Upload(file, {
-      endpoint: RESUMABLE_ENDPOINT,
+      ...urlOptions,
       chunkSize: UPLOAD_CHUNK_SIZE_BYTE,
       retryDelays: [0, 5000, 10000, 15000],
       parallelUploads: 1,
@@ -62,11 +72,21 @@ export function makeResumableUploadRequest(
       onShouldRetry: (err, retryAttempt, options) => {
         window.store.dispatch(doUpdateUploadProgress({ params, status: 'retry' }));
         const status = err.originalResponse ? err.originalResponse.getStatus() : 0;
-        return !inStatusCategory(status, 400) || status === STATUS_CONFLICT || status === STATUS_LOCKED;
+        return !inStatusCategory(status, 400);
       },
-      onError: (error) => {
+      onError: (err) => {
+        const status = err.originalResponse ? err.originalResponse.getStatus() : 0;
+        if (status === STATUS_CONFLICT || status === STATUS_LOCKED) {
+          window.store.dispatch(doUpdateUploadProgress({ params, status: 'conflict' }));
+          reject(
+            new Error(
+              `${status}: concurrent upload detected. Uploading the same file from multiple tabs or windows is not allowed.`
+            )
+          );
+        } else {
           window.store.dispatch(doUpdateUploadProgress({ params, status: 'error' }));
-        reject(new Error(error));
+          reject(new Error(err));
+        }
       },
       onProgress: (bytesUploaded, bytesTotal) => {
         const percentage = ((bytesUploaded / bytesTotal) * 100).toFixed(2);