[$250] Drag and Drop - Incorrect error shown at first attemp to upload +30 images

[jponikarchuk]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.3.55-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: https://test-management.browserstack.com/projects/2219752/test-runs/TR-17112/folder/13177085/41237997/1317000044?sort=%2Bidentifier
Email or phone of affected tester (no customers): jsat+8abr@applausemail.com
Issue reported by: Applause Internal Team
Bug source: Regression TC Execution
Device used: Macbook Pro/iOS 13.7.8
App Component: Other

Action Performed:

1. Launch Expensify App
2. Log in with valid credentials
3. Navigate to a 1:1 chat
4. Drag multiple images files (32 files) at once from your local machine and hover it over the chat area
5. Drop the images in the "Add attachments" zone

Expected Result:

"Some files can't be uploaded" modal displayed with text "You can upload up to 30 receipts at a time. Any extras won't be uploaded."

Actual Result:

An incorrect error modal is shown when try to upload more than 30 images

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari

Screenshots/Videos

Video.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @eh2077

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022042170885304839006
• Upwork Job ID: 2042170885304839006
• Last Price Increase: 2026-04-09

[MelvinBot]

Proposal

What is the root cause of that problem?

A React state race condition in useFilesValidation.tsx:105-108. When >30 files are dropped, validateFiles calls setIsValidatingMultipleFiles(true) at line 297, but React batches state updates — the value doesn't change until the next render. Immediately after, setErrorAndOpenModal is called at line 304, which reads the stale isValidatingMultipleFiles (still false) from the closure and creates the error object as {error: MAX_FILE_LIMIT_EXCEEDED, isValidatingMultipleFiles: false}.

In FileUtils.ts:718, getFileValidationErrorText only returns the correct "Some files can't be uploaded" message when isValidatingMultipleFiles is true. Since it's false, the code falls through to the generic default at line 780, showing "Attachment error" / "An error occurred while selecting a corrupted attachment" with only a "Close" button.

On the second attempt it works correctly because the state is now true from the first call's batched update.

What changes do you think we should make in order to solve the problem?

In setErrorAndOpenModal (useFilesValidation.tsx:105-108), accept an optional isMultipleFiles parameter that overrides the state value. Then in validateFiles, pass the locally computed validationState.isValidatingMultipleFiles (which is already correct at line 294) when calling setErrorAndOpenModal at line 304.

This way the error object uses the already-computed local value instead of waiting on the React state update. All other callers of setErrorAndOpenModal that don't pass the parameter will continue to use the state value as before.

What alternative solutions did you explore? (Optional)

An alternative is to use a ref alongside the state variable to track isValidatingMultipleFiles synchronously, but that adds unnecessary complexity since the correct value is already available as a local variable at the call site.

---

Next Steps for Contributor+ team: Reply with @MelvinBot implement this to create a draft PR, @MelvinBot <your feedback> to refine this analysis, or explain why you are rejecting Melvin's proposal.

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @eh2077 (External)

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~022042170885304839006

[MobileMage]

Proposal

Please re-state the problem that we are trying to solve in this issue.

When a user drags and drops more than 30 files at once into the chat area, an incorrect generic "Attachment error" modal is shown instead of the expected "Some files can't be uploaded" modal explaining the 30-receipt limit.

What is the root cause of that problem?

In useFilesValidation, the validateFiles function computes a validationState object that includes isValidatingMultipleFiles: true when more than one file is dropped. It then calls setIsValidatingMultipleFiles(validationState.isValidatingMultipleFiles) to update React state, immediately followed by setErrorAndOpenModal(...) which constructs the error object using the isValidatingMultipleFiles state variable from the current closure. Because React state updates are asynchronous, that state variable still holds its previous value (false) at the time the error object is assembled. The resulting FileValidationError therefore has isValidatingMultipleFiles: false, so getFileValidationErrorText falls through to the single-file switch block, which has no case for MAX_FILE_LIMIT_EXCEEDED and returns the generic "Attachment error" text instead of "Some files can't be uploaded."

App/src/hooks/useFilesValidation.tsx

Lines 299 to 308 in 441332c

	if (files.length > CONST.API_ATTACHMENT_VALIDATIONS.MAX_FILE_LIMIT) {
	filesToValidate.current = files.slice(0, CONST.API_ATTACHMENT_VALIDATIONS.MAX_FILE_LIMIT);
	if (items) {
	dataTransferItemList.current = items.slice(0, CONST.API_ATTACHMENT_VALIDATIONS.MAX_FILE_LIMIT);
	}
	setErrorAndOpenModal(CONST.FILE_VALIDATION_ERRORS.MAX_FILE_LIMIT_EXCEEDED);
	} else {
	validateAndResizeFiles(files, items ?? [], validationState);
	}
	};

What changes do you think we should make in order to solve the problem?

setErrorAndOpenModal should be replaced by an inline call that uses validationState.isValidatingMultipleFiles directly — the value we already have at hand — rather than reading the stale React state. This ensures the error object is built with the correct isValidatingMultipleFiles value regardless of when the state flush occurs.

App/src/hooks/useFilesValidation.tsx

Lines 105 to 108 in 441332c

	const setErrorAndOpenModal = (error: ValueOf<typeof CONST.FILE_VALIDATION_ERRORS>) => {
	setFileError({error, isValidatingMultipleFiles});
	setIsErrorModalVisible(true);
	};

- const setErrorAndOpenModal = (error: ValueOf<typeof CONST.FILE_VALIDATION_ERRORS>) => {
-     setFileError({error, isValidatingMultipleFiles});
-     setIsErrorModalVisible(true);
- };

  // Inside validateFiles, when MAX_FILE_LIMIT is exceeded:
  if (files.length > CONST.API_ATTACHMENT_VALIDATIONS.MAX_FILE_LIMIT) {
      filesToValidate.current = files.slice(0, CONST.API_ATTACHMENT_VALIDATIONS.MAX_FILE_LIMIT);
      if (items) {
          dataTransferItemList.current = items.slice(0, CONST.API_ATTACHMENT_VALIDATIONS.MAX_FILE_LIMIT);
      }
-     setErrorAndOpenModal(CONST.FILE_VALIDATION_ERRORS.MAX_FILE_LIMIT_EXCEEDED);
+     setFileError({error: CONST.FILE_VALIDATION_ERRORS.MAX_FILE_LIMIT_EXCEEDED, isValidatingMultipleFiles: validationState.isValidatingMultipleFiles});
+     setIsErrorModalVisible(true);
  } else {

The setErrorAndOpenModal helper is only used in the MAX_FILE_LIMIT_EXCEEDED branch, so it can be removed entirely. All other error paths inside validateAndResizeFiles already push errors into collectedErrors.current with the correct isValidatingMultipleFiles from the validationState parameter, so they are unaffected.

What alternative solutions did you explore? (Optional)

N/A

[abbasifaizan70]

Proposal

Please re-state the problem that we are trying to solve in this issue.

When a user drags and drops more than 30 files at once into the chat area, an incorrect generic "Attachment error" modal is shown instead of the expected "Some files can't be uploaded" modal explaining the 30-receipt limit.

What is the root cause of that problem?

When uploading more than 30 files, validateFiles() correctly detects the limit breach, but it builds the modal error payload using isValidatingMultipleFiles from React state. At that exact moment, the state update from setIsValidatingMultipleFiles(...) is not guaranteed to be applied yet, so the modal can be created as a single-file error.

App/src/hooks/useFilesValidation.tsx

Lines 105 to 108 in 441332c

	const setErrorAndOpenModal = (error: ValueOf<typeof CONST.FILE_VALIDATION_ERRORS>) => {
	setFileError({error, isValidatingMultipleFiles});
	setIsErrorModalVisible(true);
	};

App/src/hooks/useFilesValidation.tsx

Lines 292 to 305 in 441332c

	const validationState: ValidationState = {
	isValidatingReceipts: validationOptions?.isValidatingReceipts ?? DEFAULT_IS_VALIDATING_RECEIPTS,
	isValidatingMultipleFiles: files.length > 1,
	};
	setIsValidatingReceipts(validationState.isValidatingReceipts);
	setIsValidatingMultipleFiles(validationState.isValidatingMultipleFiles);
	if (files.length > CONST.API_ATTACHMENT_VALIDATIONS.MAX_FILE_LIMIT) {
	filesToValidate.current = files.slice(0, CONST.API_ATTACHMENT_VALIDATIONS.MAX_FILE_LIMIT);
	if (items) {
	dataTransferItemList.current = items.slice(0, CONST.API_ATTACHMENT_VALIDATIONS.MAX_FILE_LIMIT);
	}
	setErrorAndOpenModal(CONST.FILE_VALIDATION_ERRORS.MAX_FILE_LIMIT_EXCEEDED);
	} else {

Because that isValidatingMultipleFiles flag can be false in fileError, getFileValidationErrorText() skips the multi-file branch (which contains maxFileLimitExceeded) and falls back to a generic/incorrect modal path.

App/src/libs/fileDownload/FileUtils.ts

Lines 718 to 739 in 441332c

	if (validationError.isValidatingMultipleFiles) {
	switch (validationError.error) {
	case CONST.FILE_VALIDATION_ERRORS.WRONG_FILE_TYPE:
	return {
	title: translate('attachmentPicker.someFilesCantBeUploaded'),
	reason: translate('attachmentPicker.unsupportedFileType', validationError.fileType ?? ''),
	};
	case CONST.FILE_VALIDATION_ERRORS.FILE_TOO_LARGE:
	return {
	title: translate('attachmentPicker.someFilesCantBeUploaded'),
	reason: translate('attachmentPicker.sizeLimitExceeded', maxSize / 1024 / 1024),
	};
	case CONST.FILE_VALIDATION_ERRORS.FOLDER_NOT_ALLOWED:
	return {
	title: translate('attachmentPicker.attachmentError'),
	reason: translate('attachmentPicker.folderNotAllowedMessage'),
	};
	case CONST.FILE_VALIDATION_ERRORS.MAX_FILE_LIMIT_EXCEEDED:
	return {
	title: translate('attachmentPicker.someFilesCantBeUploaded'),
	reason: translate('attachmentPicker.maxFileLimitExceeded'),
	};

What changes do you think we should make in order to solve the problem?

We should make the max-limit modal rely on the synchronous validationState.isValidatingMultipleFiles value instead of the asynchronous React state value. This guarantees MAX_FILE_LIMIT_EXCEEDED is always treated as a multi-file validation error for 32-file drops and consistently shows the expected copy.

App/src/hooks/useFilesValidation.tsx

Lines 105 to 108 in 441332c

	const setErrorAndOpenModal = (error: ValueOf<typeof CONST.FILE_VALIDATION_ERRORS>) => {
	setFileError({error, isValidatingMultipleFiles});
	setIsErrorModalVisible(true);
	};

    const setErrorAndOpenModal = (error: ValueOf<typeof CONST.FILE_VALIDATION_ERRORS>, isValidatingMultipleFilesForError = isValidatingMultipleFiles) => {
        setFileError({error, isValidatingMultipleFiles: isValidatingMultipleFilesForError});
        setIsErrorModalVisible(true);
    };

App/src/hooks/useFilesValidation.tsx

Lines 299 to 305 in 441332c

	if (files.length > CONST.API_ATTACHMENT_VALIDATIONS.MAX_FILE_LIMIT) {
	filesToValidate.current = files.slice(0, CONST.API_ATTACHMENT_VALIDATIONS.MAX_FILE_LIMIT);
	if (items) {
	dataTransferItemList.current = items.slice(0, CONST.API_ATTACHMENT_VALIDATIONS.MAX_FILE_LIMIT);
	}
	setErrorAndOpenModal(CONST.FILE_VALIDATION_ERRORS.MAX_FILE_LIMIT_EXCEEDED);
	} else {

if (files.length > CONST.API_ATTACHMENT_VALIDATIONS.MAX_FILE_LIMIT) {
    filesToValidate.current = files.slice(0, CONST.API_ATTACHMENT_VALIDATIONS.MAX_FILE_LIMIT);
    if (items) {
        dataTransferItemList.current = items.slice(0, CONST.API_ATTACHMENT_VALIDATIONS.MAX_FILE_LIMIT);
    }
    setErrorAndOpenModal(CONST.FILE_VALIDATION_ERRORS.MAX_FILE_LIMIT_EXCEEDED, validationState.isValidatingMultipleFiles);
}

Demo

Screen.Recording.2026-04-09.at.2.31.47.PM.mov

[github-actions]

⚠️ @abbasifaizan70 Thanks for your proposal. Please update it to follow the proposal template, as proposals are only reviewed if they follow that format (note the mandatory sections).

[wildan-m]

🚫 Duplicated proposal withdrawn by 🤖 ProposalPolice.

[github-actions]

⚠️ @wildan-m Your proposal is a duplicate of an already existing proposal and has been automatically withdrawn to prevent spam. Please review the existing proposals before submitting a new one.