feat(content-uploader): implement cancel all freeze

src/api/uploads/MultiputUpload.js

@@ -65,6 +65,8 @@ class MultiputUpload extends BaseMultiput {
 
     isResumableUploadsEnabled: boolean;
 
+    isPaused: boolean;
+
     successCallback: Function;
 
     progressCallback: Function;
@@ -134,6 +136,7 @@ class MultiputUpload extends BaseMultiput {
         this.clientId = null;
         this.isResumableUploadsEnabled = false;
         this.numResumeRetries = 0;
+        this.isPaused = false;
     }
 
     /**
@@ -758,6 +761,7 @@ class MultiputUpload extends BaseMultiput {
     shouldComputeDigestForNextPart(): boolean {
         return (
             !this.isDestroyed() &&
+            !this.isPaused &&
             this.numPartsDigestComputing === 0 &&
             this.numPartsNotStarted > 0 &&
             this.numPartsDigestReady < this.config.digestReadahead
@@ -1126,7 +1130,12 @@ class MultiputUpload extends BaseMultiput {
      * @return {boolean}
      */
     canStartMorePartUploads(): boolean {
-        return !this.isDestroyed() && this.numPartsUploading < this.config.parallelism && this.numPartsDigestReady > 0;
+        return (
+            !this.isDestroyed() &&
+            !this.isPaused &&
+            this.numPartsUploading < this.config.parallelism &&
+            this.numPartsDigestReady > 0
+        );
     }
 
     /**
@@ -1259,6 +1268,47 @@ class MultiputUpload extends BaseMultiput {
         this.destroy();
     }
 
+    /**
+     * Pauses an upload in progress without destroying the session. In-flight parts
+     * are reset and paused so the upload can be resumed later via unpause(). The
+     * reported progress is intentionally left untouched so it stays frozen in the UI.
+     *
+     * @return {void}
+     */
+    pause(): void {
+        if (this.isDestroyed() || this.isPaused) {
+            return;
+        }
+
+        this.isPaused = true;
+
+        let nextUploadIndex = this.firstUnuploadedPartIndex;
+        while (this.numPartsUploading > 0) {
+            const part = this.parts[nextUploadIndex];
+            if (part && part.state === PART_STATE_UPLOADING) {
+                part.reset();
+                part.pause();
+                this.numPartsUploading -= 1;
+                this.numPartsDigestReady += 1;
+            }
+            nextUploadIndex += 1;
+        }
+    }
+
+    /**
+     * Resumes a previously paused upload, continuing from where it left off.
+     *
+     * @return {void}
+     */
+    unpause(): void {
+        if (this.isDestroyed() || !this.isPaused) {
+            return;
+        }
+
+        this.isPaused = false;
+        this.processNextParts();
+    }
+
     /**
      * Resolves upload conflict by overwriting or renaming
      *

src/api/uploads/__tests__/MultiputUpload.test.js

@@ -175,15 +175,18 @@ describe('api/uploads/MultiputUpload', () => {
         // upload pipeline full
         // upload pipeline not full and not ended
         // upload pipeline not full and not ended but no digest is ready
+        // paused
         test.each`
-            expected | ended    | numPartsUploading | numPartsDigestReady
-            ${false} | ${true}  | ${1}              | ${undefined}
-            ${false} | ${false} | ${2}              | ${1}
-            ${true}  | ${false} | ${1}              | ${1}
-            ${false} | ${false} | ${1}              | ${0}
-        `('should return correct value:', ({ expected, ended, numPartsUploading, numPartsDigestReady }) => {
+            expected | ended    | paused   | numPartsUploading | numPartsDigestReady
+            ${false} | ${true}  | ${false} | ${1}              | ${undefined}
+            ${false} | ${false} | ${false} | ${2}              | ${1}
+            ${true}  | ${false} | ${false} | ${1}              | ${1}
+            ${false} | ${false} | ${false} | ${1}              | ${0}
+            ${false} | ${false} | ${true}  | ${1}              | ${1}
+        `('should return correct value:', ({ expected, ended, paused, numPartsUploading, numPartsDigestReady }) => {
             // Setup
             multiputUploadTest.destroyed = ended;
+            multiputUploadTest.isPaused = paused;
             multiputUploadTest.numPartsUploading = numPartsUploading;
             multiputUploadTest.numPartsDigestReady = numPartsDigestReady;
             // Execute
@@ -787,6 +790,68 @@ describe('api/uploads/MultiputUpload', () => {
         });
     });
 
+    describe('pause()', () => {
+        beforeEach(() => {
+            multiputUploadTest.numPartsUploading = 2;
+            multiputUploadTest.numPartsDigestReady = 0;
+            multiputUploadTest.firstUnuploadedPartIndex = 0;
+            multiputUploadTest.parts = [
+                { state: PART_STATE_UPLOADING, reset: jest.fn(), pause: jest.fn() },
+                { state: PART_STATE_UPLOADED, reset: jest.fn(), pause: jest.fn() },
+                { state: PART_STATE_UPLOADING, reset: jest.fn(), pause: jest.fn() },
+            ];
+        });
+
+        test('should set isPaused and reset/pause only in-flight parts', () => {
+            multiputUploadTest.pause();
+
+            expect(multiputUploadTest.isPaused).toBe(true);
+            expect(multiputUploadTest.numPartsUploading).toBe(0);
+            expect(multiputUploadTest.numPartsDigestReady).toBe(2);
+            expect(multiputUploadTest.parts[0].pause).toBeCalled();
+            expect(multiputUploadTest.parts[1].pause).not.toBeCalled();
+            expect(multiputUploadTest.parts[2].pause).toBeCalled();
+        });
+
+        test('should do nothing when destroyed', () => {
+            multiputUploadTest.destroyed = true;
+
+            multiputUploadTest.pause();
+
+            expect(multiputUploadTest.isPaused).toBe(false);
+            expect(multiputUploadTest.parts[0].pause).not.toBeCalled();
+        });
+
+        test('should not pause twice', () => {
+            multiputUploadTest.isPaused = true;
+
+            multiputUploadTest.pause();
+
+            expect(multiputUploadTest.parts[0].pause).not.toBeCalled();
+        });
+    });
+
+    describe('unpause()', () => {
+        test('should clear isPaused and resume processing parts', () => {
+            multiputUploadTest.isPaused = true;
+            multiputUploadTest.processNextParts = jest.fn();
+
+            multiputUploadTest.unpause();
+
+            expect(multiputUploadTest.isPaused).toBe(false);
+            expect(multiputUploadTest.processNextParts).toBeCalled();
+        });
+
+        test('should do nothing when not paused', () => {
+            multiputUploadTest.isPaused = false;
+            multiputUploadTest.processNextParts = jest.fn();
+
+            multiputUploadTest.unpause();
+
+            expect(multiputUploadTest.processNextParts).not.toBeCalled();
+        });
+    });
+
     describe('updateProgress()', () => {
         test('should call progressCallback() properly', () => {
             const prevUploadedBytes = 10;
@@ -814,18 +879,21 @@ describe('api/uploads/MultiputUpload', () => {
         // all parts started
         // readahead is full
         // no part computing, there is a part not started and readahead not full
+        // paused
         test.each`
-            expected | ended    | numPartsDigestComputing | numPartsNotStarted | numPartsDigestReady
-            ${false} | ${true}  | ${undefined}            | ${undefined}       | ${undefined}
-            ${false} | ${false} | ${1}                    | ${undefined}       | ${undefined}
-            ${false} | ${false} | ${0}                    | ${0}               | ${undefined}
-            ${false} | ${false} | ${0}                    | ${1}               | ${2}
-            ${true}  | ${false} | ${0}                    | ${1}               | ${1}
+            expected | ended    | paused   | numPartsDigestComputing | numPartsNotStarted | numPartsDigestReady
+            ${false} | ${true}  | ${false} | ${undefined}            | ${undefined}       | ${undefined}
+            ${false} | ${false} | ${false} | ${1}                    | ${undefined}       | ${undefined}
+            ${false} | ${false} | ${false} | ${0}                    | ${0}               | ${undefined}
+            ${false} | ${false} | ${false} | ${0}                    | ${1}               | ${2}
+            ${true}  | ${false} | ${false} | ${0}                    | ${1}               | ${1}
+            ${false} | ${false} | ${true}  | ${0}                    | ${1}               | ${1}
         `(
             'should return correct value',
-            ({ expected, ended, numPartsDigestComputing, numPartsNotStarted, numPartsDigestReady }) => {
+            ({ expected, ended, paused, numPartsDigestComputing, numPartsNotStarted, numPartsDigestReady }) => {
                 // Setup
-                multiputUploadTest.ended = ended;
+                multiputUploadTest.destroyed = ended;
+                multiputUploadTest.isPaused = paused;
                 multiputUploadTest.numPartsDigestComputing = numPartsDigestComputing;
                 multiputUploadTest.numPartsNotStarted = numPartsNotStarted;
                 multiputUploadTest.numPartsDigestReady = numPartsDigestReady;

src/elements/content-uploader/ContentUploader.tsx

@@ -157,6 +157,8 @@ class ContentUploader extends Component<ContentUploaderProps, State> {
 
     isAutoExpanded: boolean = false;
 
+    isCancelAllPaused: boolean = false;
+
     modernizedDismissTimer: ReturnType<typeof setTimeout> | null = null;
 
     isPanelHovered: boolean = false;
@@ -890,6 +892,10 @@ class ContentUploader extends Component<ContentUploaderProps, State> {
     upload = () => {
         const { enableModernizedUploads, isUpgradeModalEnabled, maxFileSize } = this.props;
 
+        if (this.isCancelAllPaused) { 
+            return;
+        }
+
         if (
             maxFileSize &&
             enableModernizedUploads &&
@@ -899,6 +905,7 @@ class ContentUploader extends Component<ContentUploaderProps, State> {
             if (!this.state.isLargeFileWarningModalOpen) {
                 this.setState({ isLargeFileWarningModalOpen: true });
             }
+
             return;
         }
 
@@ -919,6 +926,10 @@ class ContentUploader extends Component<ContentUploaderProps, State> {
         const { enableModernizedUploads, overwrite, rootFolderId } = this.props;
         const { api, file, options } = item;
 
+        if (this.isCancelAllPaused) {
+            return;
+        }
+
         const numItemsUploading = this.itemsRef.current.filter(item_t => item_t.status === STATUS_IN_PROGRESS).length;
 
         if (numItemsUploading >= UPLOAD_CONCURRENCY) {
@@ -1255,6 +1266,23 @@ class ContentUploader extends Component<ContentUploaderProps, State> {
         this.updateViewAndCollection(updatedItems);
     };
 
+    /**
+     * Whether an item uploads through the chunked (multiput) API rather than the
+     * plain oneshot API. This is the same decision getUploadAPI makes when picking
+     * the API instance, and it determines which items can be paused/resumed in place
+     * versus cancelled and restarted from scratch.
+     *
+     * @param {UploadItem} item - The upload item
+     * @return {boolean}
+     */
+    getIsChunkedUpload = (item: UploadItem): boolean => {
+        const { chunked } = this.props;
+        const { file, isFolder } = item;
+        return Boolean(
+            chunked && !isFolder && file && file.size > CHUNKED_UPLOAD_MIN_SIZE_BYTES && isMultiputSupported(),
+        );
+    };
+
     /**
      * Updates item based on its status.
      *
@@ -1263,11 +1291,9 @@ class ContentUploader extends Component<ContentUploaderProps, State> {
      * @return {void}
      */
     onClick = (item: UploadItem) => {
-        const { chunked, isResumableUploadsEnabled, onClickCancel, onClickResume, onClickRetry } = this.props;
-        const { file, status, error } = item;
-        const isChunkedUpload =
-            chunked && !item.isFolder && file.size > CHUNKED_UPLOAD_MIN_SIZE_BYTES && isMultiputSupported();
-        const isResumable = isResumableUploadsEnabled && isChunkedUpload && item.api.sessionId;
+        const { isResumableUploadsEnabled, onClickCancel, onClickResume, onClickRetry } = this.props;
+        const { status, error } = item;
+        const isResumable = isResumableUploadsEnabled && this.getIsChunkedUpload(item) && item.api.sessionId;
 
         switch (status) {
             case STATUS_IN_PROGRESS:
@@ -1338,19 +1364,68 @@ class ContentUploader extends Component<ContentUploaderProps, State> {
     };
 
     /**
-     * Open the Cancel All confirmation modal. Wired as the onCancelAll prop
-     * passed to the modernized uploads manager so the action requires explicit
-     * confirmation before destroying in-progress uploads.
+     * Freeze in-progress uploads while the Cancel All confirmation modal is open.
+     * Chunked uploads are paused so they can resume from the same session; plain
+     * uploads have no partial server state, so they are cancelled in the background
+     * and restarted from scratch if the user chooses to keep uploading. Item status
+     * and progress are intentionally left untouched so the rows stay frozen in place.
+     */
+    pauseUploadsForCancelAll = () => {
+        this.itemsRef.current.forEach(item => {
+            // Folder containers have no partial state and their child files are
+            // tracked as separate queue items handled by this same loop.
+            if (item.status !== STATUS_IN_PROGRESS || item.isFolder) {
+                return;
+            }
+            const { api } = item;
+            if (this.getIsChunkedUpload(item)) {
+                api.pause();
+            } else {
+                api.cancel();
+            }
+        });
+        this.isCancelAllPaused = true;
+    };
+
+    /**
+     * Resume uploads frozen by pauseUploadsForCancelAll when the user dismisses the
+     * modal. Chunked uploads continue from their session; plain uploads (cancelled in
+     * the background) are restarted from scratch. Pending items that never started are
+     * picked up by the trailing upload() call.
+     */
+    resumeUploadsForCancelAll = () => {
+        this.isCancelAllPaused = false;
+        this.itemsRef.current.forEach(item => {
+            if (item.status !== STATUS_IN_PROGRESS || item.isFolder) {
+                return;
+            }
+            if (this.getIsChunkedUpload(item)) {
+                item.api.unpause();
+            } else {
+                this.resetFile(item);
+                this.uploadFile(item);
+            }
+        });
+        this.upload();
+    };
+
+    /**
+     * Open the Cancel All confirmation modal and freeze in-progress uploads. Wired as
+     * the onCancelAll prop passed to the modernized uploads manager so the action
+     * requires explicit confirmation before destroying in-progress uploads.
      */
     handleCancelAllClick = () => {
+        this.pauseUploadsForCancelAll();
         this.setState({ isCancelAllModalOpen: true });
     };
 
     handleCancelAllDismiss = () => {
         this.setState({ isCancelAllModalOpen: false });
+        this.resumeUploadsForCancelAll();
     };
 
     handleCancelAllConfirm = () => {
+        this.isCancelAllPaused = false;
         this.setState({ isCancelAllModalOpen: false });
         this.handleUploadsManagerCancelAll();
     };
@@ -1373,17 +1448,15 @@ class ContentUploader extends Component<ContentUploaderProps, State> {
      * chunked uploads, otherwise restart from scratch. Shared by RetryAll and per-item retry.
      */
     retryUploadsManagerItem = (item: UploadItem) => {
-        const { chunked, isResumableUploadsEnabled, onClickCancel, onClickResume, onClickRetry } = this.props;
-        const { file, api, error } = item;
+        const { isResumableUploadsEnabled, onClickCancel, onClickResume, onClickRetry } = this.props;
+        const { api, error } = item;
         // Name-in-use cannot be resolved by retrying — drop the item like the legacy onClick path.
         if (error?.code === ERROR_CODE_ITEM_NAME_IN_USE) {
             this.removeFileFromUploadQueue(item);
             onClickCancel(item);
             return;
         }
-        const isChunkedUpload =
-            chunked && !item.isFolder && file.size > CHUNKED_UPLOAD_MIN_SIZE_BYTES && isMultiputSupported();
-        const isResumable = isResumableUploadsEnabled && isChunkedUpload && api?.sessionId;
+        const isResumable = isResumableUploadsEnabled && this.getIsChunkedUpload(item) && api?.sessionId;
         if (isResumable) {
             item.bytesUploadedOnLastResume = api.totalUploadedBytes;
             this.resumeFile(item);