Skip to content

feat(content-uploader): implement warning modal for upload items exceeding size limit#4649

Open
olehrybak wants to merge 7 commits into
box:masterfrom
olehrybak:exceeding-file-size-limit-modal
Open

feat(content-uploader): implement warning modal for upload items exceeding size limit#4649
olehrybak wants to merge 7 commits into
box:masterfrom
olehrybak:exceeding-file-size-limit-modal

Conversation

@olehrybak

@olehrybak olehrybak commented Jun 24, 2026

Copy link
Copy Markdown
Contributor

Summary

Added a warning modal that is shown for upload batches that include items that exceed the max size limit (based on the new maxFileSize prop). In case if the modal is shown, uploading is not started for the new files until a user completes the modal action

Summary by CodeRabbit

  • New Features
    • Added optional maxFileSize support to the content uploader.
    • Introduced a large-file warning dialog (with a virtualized oversized-file list) offering “upload the rest” or cancel.
  • Bug Fixes
    • Prevented uploads from starting when oversized pending items exist (modernized uploads), until the dialog is confirmed.
    • Updated modernized panel visibility so it hides when the upload queue is empty.
  • Documentation
    • Added localized, accessible dialog text and labels.
  • Tests
    • Added coverage for gating, add-to-queue behavior, and confirm/cancel queue handling.

@coderabbitai

coderabbitai Bot commented Jun 24, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

  • ▶️ Resume reviews
  • 🔍 Trigger review

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 22ad912e-a962-40a0-b4cb-f6b717ffae37

📥 Commits

Reviewing files that changed from the base of the PR and between 555c1d9 and 31c45c1.

📒 Files selected for processing (2)
  • src/elements/content-uploader/ContentUploader.tsx
  • src/elements/content-uploader/__tests__/ContentUploader.test.js
🚧 Files skipped from review as they are similar to previous changes (2)
  • src/elements/content-uploader/tests/ContentUploader.test.js
  • src/elements/content-uploader/ContentUploader.tsx

Walkthrough

ContentUploader now accepts maxFileSize and can warn about oversize pending files in the modernized upload flow. A new modal, messages, styles, and tests were added for confirming, canceling, and listing files.

Changes

Large File Warning Modal Feature

Layer / File(s) Summary
Modal types, messages, and styles
src/elements/content-uploader/LargeFileWarningModal.tsx, src/elements/content-uploader/messages.ts, src/elements/content-uploader/LargeFileWarningModal.scss
Defines the modal props and file type, adds localized warning text and labels, and styles the warning dialog and file list.
ContentUploader oversize gating and modal wiring
src/elements/content-uploader/ContentUploader.tsx
Adds maxFileSize and modal state, updates queue and upload behavior for oversize pending files, adjusts panel visibility, and renders LargeFileWarningModal.
Modal and upload flow tests
src/elements/content-uploader/__tests__/ContentUploader.test.js, src/elements/content-uploader/__tests__/LargeFileWarningModal.test.tsx
Covers upload gating, queue suppression, confirm/cancel handlers, and modal rendering plus callback behavior.

Sequence Diagram(s)

sequenceDiagram
  participant ContentUploader
  participant upload
  participant LargeFileWarningModal

  ContentUploader->>upload: upload() called
  upload->>upload: check pending files against maxFileSize
  alt oversized pending files exist
    upload->>LargeFileWarningModal: open modal
  else all pending files fit
    upload->>upload: start upload
  end
  LargeFileWarningModal-->>ContentUploader: onConfirm
  ContentUploader->>ContentUploader: remove oversized pending files
  ContentUploader->>upload: start remaining upload
  LargeFileWarningModal-->>ContentUploader: onCancel
  ContentUploader->>ContentUploader: remove all pending files and close modal
Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

  • box/box-ui-elements#4573: Both PRs modify src/elements/content-uploader/ContentUploader.tsx’s modernized upload-item removal path, and this change adds skipAutoUpload to support the large-file warning flow.
  • box/box-ui-elements#4628: Both PRs modify ContentUploader.tsx’s modernized uploads panel lifecycle and visibility logic.

Suggested labels

ready-to-merge

Suggested reviewers

  • jfox-box
  • jpan-box

Poem

🐇 A file too big can pause the hop,
The modal pops before upload stop.
Upload the rest, or cancel the spree—
Tiny files bounce off happily.
The queue stays neat; the bunny smiles free.

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly and concisely describes the main change: a warning modal for uploads that exceed the size limit.
Description check ✅ Passed The description includes a clear summary of the change and aligns with the repository template, which only contains merge instructions.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@olehrybak olehrybak marked this pull request as ready for review June 24, 2026 15:22
@olehrybak olehrybak requested review from a team as code owners June 24, 2026 15:22

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 3

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/elements/content-uploader/ContentUploader.tsx`:
- Around line 1737-1759: The modernized uploads flow is mounting
LargeFileWarningModal even when ContentUploaderProps.maxFileSize is undefined,
but the modal expects a valid number and formats it immediately. Update
ContentUploader.render and the LargeFileWarningModal usage to guard on
maxFileSize being defined before rendering, or make the modal handle an optional
limit internally; use the ContentUploader and LargeFileWarningModal symbols to
locate the affected path.
- Around line 1673-1694: The batch modal handlers in ContentUploader.tsx are
removing items one-by-one through removeFileFromUploadQueue, which can
auto-start uploads before the full batch is pruned. Update
handleLargeFileWarningUploadRest and handleLargeFileWarningCancel to remove the
affected pending/oversize items in a single batch update instead of looping
through the helper, then trigger upload only after the queue mutation is
complete in handleLargeFileWarningUploadRest. Keep the logic localized to these
methods and the queue-management flow around getOversizePendingItems,
removeFileFromUploadQueue, and upload.
- Line 241: The large-file warning gate is still bypassed because some
enqueue/start paths call this.upload directly instead of going through the
shared gated flow. Update ContentUploader so the gating logic lives on the
common “start pending uploads” path used by addFilesToUploadQueue, maybeUpload,
and the success/error/remove callbacks, and ensure any prepopulated file
handling also respects the gate. Replace the remaining direct upload triggers
with the shared pending-upload starter so batch B cannot begin automatically
after the modal is shown.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: b79a44a4-4af4-4034-8860-fd2fdf7aa52a

📥 Commits

Reviewing files that changed from the base of the PR and between 583058c and 8703281.

⛔ Files ignored due to path filters (1)
  • i18n/en-US.properties is excluded by !i18n/**
📒 Files selected for processing (6)
  • src/elements/content-uploader/ContentUploader.tsx
  • src/elements/content-uploader/LargeFileWarningModal.scss
  • src/elements/content-uploader/LargeFileWarningModal.tsx
  • src/elements/content-uploader/__tests__/ContentUploader.test.js
  • src/elements/content-uploader/__tests__/LargeFileWarningModal.test.tsx
  • src/elements/content-uploader/messages.ts

Comment thread src/elements/content-uploader/ContentUploader.tsx Outdated
Comment thread src/elements/content-uploader/ContentUploader.tsx
Comment thread src/elements/content-uploader/ContentUploader.tsx
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant