[Due for payment 2025-11-07] [Due for payment 2025-10-30] [$250] Expense - Scan expense with video as receipt can be created by dropping video to Scan zone

[lanitochka17]

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.2.29-1
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: https://test-management.browserstack.com/projects/2219752/test-runs/TR-1237/41237997/945417200?q=drag&issue_type=jira
Email or phone of affected tester (no customers): jsdoinjsoijsiodj@gmail.com
Issue reported by: Applause - Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Go to workspace chat
3. Click + > Create expense > Scan
4. Drag and drop a video to the Scan RHP
   → Invalid file type error shows up - Expected behavior
5. Close the RHP
6. Drag and drop a video to Scan zone
7. Click Create expense
8. Open the expense thread

Expected Result:

"Invalid file type" error will show up when dropping a video to Scan zone in workspace chat

Actual Result:

User can create a scan expense with video as receipt by dropping a video to Scan zone in workspace chat
There is no "Invalid file type" error
After creating the expense, error shows up in transaction thread

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

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

Platforms Tested:

On which of our officially supported platforms was this issue tested:

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

Screenshots/Videos

Add any screenshot/video evidence

Bug6972307_1760211709021.video_receipt.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021977603641386532131
• Upwork Job ID: 1977603641386532131
• Last Price Increase: 2025-10-27

Issue Owner

Current Issue Owner: @kadiealexander

[melvin-bot]

Triggered auto assignment to @kadiealexander (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[TaduJR]

🚨 Edited by proposal-police: This proposal was edited at 2025-10-13 07:13:05 UTC.

Proposal

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

When a user drags and drops a video file to the Scan zone in a workspace chat, the video is accepted and can be used to create a scan expense. However, videos are not allowed as receipt types. The expected behavior is that an "Invalid file type" error should appear when dropping a video to the Scan zone, similar to what happens when dropping a video in the Scan RHP (Right Hand Panel).

What is the root cause of that problem?

The root cause is that the useFilesValidation hook is initialized with the wrong isValidatingReceipts parameter value in useAttachmentUploadValidation.

The issue occurs in this file:

App/src/pages/home/report/ReportActionCompose/useAttachmentUploadValidation.ts

Line 119 in 89c45c9

const {validateFiles, PDFValidationComponent, ErrorModal} = useFilesValidation(onFilesValidated, false);

The hook is initialized with isValidatingReceipts = false:

const {validateFiles, PDFValidationComponent, ErrorModal} = useFilesValidation(onFilesValidated, false);

This single hook instance is then used for both:

1. Attachment drops (correct - should use false)
2. Receipt/Scan zone drops (WRONG - should use true)

Why this causes the bug:

When isValidatingReceipts = false is passed to useFilesValidation, the validation flow becomes:

1. validateFiles is called with the video file
2. Internally calls isValidFile:

App/src/hooks/useFilesValidation.tsx

Line 118 in 89c45c9

if (error) {

3. Which calls validateAttachment with isValidatingReceipts = false:

App/src/libs/fileDownload/FileUtils.ts

Lines 550 to 566 in 89c45c9

	const validateAttachment = (file: FileObject, isCheckingMultipleFiles?: boolean, isValidatingReceipt?: boolean) => {
	const maxFileSize = isValidatingReceipt ? CONST.API_ATTACHMENT_VALIDATIONS.RECEIPT_MAX_SIZE : CONST.API_ATTACHMENT_VALIDATIONS.MAX_SIZE;
	if (isValidatingReceipt && !isValidReceiptExtension(file)) {
	return isCheckingMultipleFiles ? CONST.FILE_VALIDATION_ERRORS.WRONG_FILE_TYPE_MULTIPLE : CONST.FILE_VALIDATION_ERRORS.WRONG_FILE_TYPE;
	}
	if (!Str.isImage(file.name ?? '') && !hasHeicOrHeifExtension(file) && (file?.size ?? 0) > maxFileSize) {
	return isCheckingMultipleFiles ? CONST.FILE_VALIDATION_ERRORS.FILE_TOO_LARGE_MULTIPLE : CONST.FILE_VALIDATION_ERRORS.FILE_TOO_LARGE;
	}
	if (isValidatingReceipt && (file?.size ?? 0) < CONST.API_ATTACHMENT_VALIDATIONS.MIN_SIZE) {
	return CONST.FILE_VALIDATION_ERRORS.FILE_TOO_SMALL;
	}
	return '';
	};

4. The critical check at line 553 is SKIPPED because isValidatingReceipt is false:

App/src/libs/fileDownload/FileUtils.ts

Lines 553 to 555 in 89c45c9

	if (isValidatingReceipt && !isValidReceiptExtension(file)) {
	return isCheckingMultipleFiles ? CONST.FILE_VALIDATION_ERRORS.WRONG_FILE_TYPE_MULTIPLE : CONST.FILE_VALIDATION_ERRORS.WRONG_FILE_TYPE;
	}

if (isValidatingReceipt && !isValidReceiptExtension(file)) {
    return isCheckingMultipleFiles ? CONST.FILE_VALIDATION_ERRORS.WRONG_FILE_TYPE_MULTIPLE : CONST.FILE_VALIDATION_ERRORS.WRONG_FILE_TYPE;
}

Since the check is skipped, video files pass validation and are allowed to create expenses.

In contrast, the Scan RHP works correctly:

App/src/pages/iou/request/step/IOURequestStepScan/index.tsx

Line 650 in 89c45c9

const {validateFiles, PDFValidationComponent, ErrorModal} = useFilesValidation(setReceiptFilesAndNavigate);

The hook is called with isValidatingReceipts = true (the default), so videos are properly rejected.

Video extensions are NOT in the allowed list:

App/src/CONST/index.ts

Line 264 in 89c45c9

ALLOWED_RECEIPT_EXTENSIONS: ['heif', 'heic', 'jpg', 'jpeg', 'gif', 'png', 'pdf', 'htm', 'html', 'text', 'rtf', 'doc', 'tif', 'tiff', 'msword', 'zip', 'xml', 'message'],

The ALLOWED_RECEIPT_EXTENSIONS array does not include video formats like 'mp4', 'mov', 'avi', etc.

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

We need to use two separate instances of the useFilesValidation hook:

1. One for attachments with isValidatingReceipts = false
2. One for receipts with isValidatingReceipts = true

This follows the hook's intended design pattern where isValidatingReceipts is a configuration parameter set at initialization, not a runtime parameter.

Changes needed in:

https://github.com/Expensify/App/blob/89c45c98a802b6d039a6d36d7afc761083e89212/src/pages/home/report/ReportActionCompose/useAttachmentUploadValidation.ts

Step 1: Add useMemo to imports (line 1):

import {useCallback, useContext, useMemo, useRef} from 'react';

Step 2: Split the unified onFilesValidated callback into two separate callbacks (replace lines 70-117):

const onAttachmentFilesValidated = useCallback(
    (files: FileObject[], dataTransferItems: DataTransferItem[]) => {
        showAttachmentModalScreen(files, dataTransferItems);
    },
    [showAttachmentModalScreen],
);

const onReceiptFilesValidated = useCallback(
    (files: FileObject[], dataTransferItems: DataTransferItem[]) => {
        if (files.length === 0) {
            return;
        }

        if (shouldAddOrReplaceReceipt && transactionID) {
            const source = URL.createObjectURL(files.at(0) as Blob);
            replaceReceipt({transactionID, file: files.at(0) as File, source});
            return;
        }

        const initialTransaction = initMoneyRequest({
            reportID,
            newIouRequestType: CONST.IOU.REQUEST_TYPE.SCAN,
            report,
            parentReport: newParentReport,
            currentDate,
        });

        files.forEach((file, index) => {
            const source = URL.createObjectURL(file as Blob);
            const newTransaction =
                index === 0
                    ? (initialTransaction as Partial<OnyxTypes.Transaction>)
                    : buildOptimisticTransactionAndCreateDraft({
                          initialTransaction: initialTransaction as Partial<OnyxTypes.Transaction>,
                          currentUserPersonalDetails,
                          reportID,
                      });
            const newTransactionID = newTransaction?.transactionID ?? CONST.IOU.OPTIMISTIC_TRANSACTION_ID;
            setMoneyRequestReceipt(newTransactionID, source, file.name ?? '', true);
            setMoneyRequestParticipantsFromReport(newTransactionID, report);
        });
        Navigation.navigate(
            ROUTES.MONEY_REQUEST_STEP_CONFIRMATION.getRoute(
                CONST.IOU.ACTION.CREATE,
                isSelfDM(report) ? CONST.IOU.TYPE.TRACK : CONST.IOU.TYPE.SUBMIT,
                CONST.IOU.OPTIMISTIC_TRANSACTION_ID,
                reportID,
            ),
        );
    },
    [currentDate, currentUserPersonalDetails, newParentReport, report, reportID, shouldAddOrReplaceReceipt, transactionID],
);

Step 3: Replace the single hook instance with two separate instances (replace line 119):

// Separate validation hooks for attachments (isValidatingReceipts=false) and receipts (isValidatingReceipts=true)
const {validateFiles: validateAttachmentFiles, PDFValidationComponent: AttachmentPDFValidationComponent, ErrorModal: AttachmentErrorModal} = useFilesValidation(
    onAttachmentFilesValidated,
    false,
);
const {validateFiles: validateReceiptFiles, PDFValidationComponent: ReceiptPDFValidationComponent, ErrorModal: ReceiptErrorModal} = useFilesValidation(onReceiptFilesValidated, true);

Step 4: Update validateAttachments to use the attachment-specific validation (line 164):

Replace:

attachmentUploadType.current = 'attachment';
validateFiles(fileObjects, filteredItems);

With:

validateAttachmentFiles(fileObjects, filteredItems);

And update the dependency array (line 166):

[isAttachmentPreviewActive, validateAttachmentFiles],

Step 5: Update onReceiptDropped to use the receipt-specific validation (replace lines 179-191):

Replace:

const files = getFilesFromClipboardEvent(e);
const items = Array.from(e.dataTransfer?.items ?? []);

if (shouldAddOrReplaceReceipt && transactionID) {
    const file = files.at(0);
    if (!file) {
        return;
    }

    attachmentUploadType.current = 'receipt';
    validateFiles([file], items);
}

attachmentUploadType.current = 'receipt';
validateFiles(files, items);

With:

const files = getFilesFromClipboardEvent(e);
const items = Array.from(e.dataTransfer?.items ?? []);

validateReceiptFiles(files, items);

And update the dependency array (line 192):

[policy, validateReceiptFiles],

Step 6: Remove the attachmentUploadType ref (line 70) - it's no longer needed:

Delete:

const attachmentUploadType = useRef<'receipt' | 'attachment'>(undefined);

Step 7: Combine the validation components from both hooks (replace lines 195-200):

Replace:

return {
    validateAttachments,
    onReceiptDropped,
    PDFValidationComponent,
    ErrorModal,
};

With:

// Combine PDF validation components from both hooks
const combinedPDFValidationComponent = useMemo(() => {
    const components = [];
    if (AttachmentPDFValidationComponent) {
        components.push(...(Array.isArray(AttachmentPDFValidationComponent) ? AttachmentPDFValidationComponent : [AttachmentPDFValidationComponent]));
    }
    if (ReceiptPDFValidationComponent) {
        components.push(...(Array.isArray(ReceiptPDFValidationComponent) ? ReceiptPDFValidationComponent : [ReceiptPDFValidationComponent]));
    }
    return components.length > 0 ? components : undefined;
}, [AttachmentPDFValidationComponent, ReceiptPDFValidationComponent]);

// Use receipt error modal by default, fall back to attachment error modal
const combinedErrorModal = useMemo(() => ReceiptErrorModal ?? AttachmentErrorModal, [AttachmentErrorModal, ReceiptErrorModal]);

return {
    validateAttachments,
    onReceiptDropped,
    PDFValidationComponent: combinedPDFValidationComponent,
    ErrorModal: combinedErrorModal,
};

[paulnjs]

Proposal

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

• Expense - Scan expense with video as receipt can be created by dropping video to Scan zone

What is the root cause of that problem?

• The issue originates from how we validate files in ReportActionCompose using the validateAttachments function:
  

  App/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx

  Line 483 in 89c45c9

  const {validateAttachments, onReceiptDropped, PDFValidationComponent, ErrorModal} = useAttachmentUploadValidation({

• This function comes from:
  

  App/src/pages/home/report/ReportActionCompose/useAttachmentUploadValidation.ts

  Line 119 in 89c45c9

  const {validateFiles, PDFValidationComponent, ErrorModal} = useFilesValidation(onFilesValidated, false);

• In the above implementation, the isValidatingReceipts parameter is incorrectly passed as false, even when the file is being validated as a receipt.

• As a result, when the validateFiles function is called:

  • App/src/pages/home/report/ReportActionCompose/useAttachmentUploadValidation.ts

    Line 186 in 89c45c9

    validateFiles([file], items);

  • App/src/pages/home/report/ReportActionCompose/useAttachmentUploadValidation.ts

    Line 190 in 89c45c9

    validateFiles(files, items);

  it performs standard file validation instead of the stricter validation required for receipts, allowing unsupported file types like videos.

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

• We should correctly pass the newly introduced isValidatingReceipts parameter through the validation chain to ensure receipt files are properly validated.

• Update the function calls in the following lines to include the isValidatingReceipts argument:

  App/src/pages/home/report/ReportActionCompose/useAttachmentUploadValidation.ts

  Line 186 in 89c45c9

  validateFiles([file], items);

  App/src/pages/home/report/ReportActionCompose/useAttachmentUploadValidation.ts

  Line 190 in 89c45c9

  validateFiles(files, items);

                validateFiles([file], items, true);  // In other places call validateFiles([file], items, false)

• That value will be passed down to

  App/src/hooks/useFilesValidation.tsx

  Line 279 in 89c45c9

  validateAndResizeFiles(files, items ?? []);

validateAndResizeFiles(files, items ?? [], isValidatingReceipts)

, then pass down to

App/src/hooks/useFilesValidation.tsx

Line 191 in 89c45c9

Promise.all(files.map((file, index) => isValidFile(file, items.at(index), files.length > 1).then((isValid) => (isValid ? file : null))))

Promise.all(files.map((file, index) => isValidFile(file, items.at(index), files.length > 1, isValidatingReceipts).then((isValid) => (isValid ? file : null))))

• Finally, that value will be used in

  App/src/hooks/useFilesValidation.tsx

  Line 117 in 89c45c9

  const error = validateAttachment(normalizedFile, isCheckingMultipleFiles, isValidatingReceipts);

  to do the correct validation process

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

NA

What alternative solutions did you explore? (Optional)

[melvin-bot]

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

[melvin-bot]

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

[Burhan-Rashid]

Proposal

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

Expense - Scan expense with video as receipt can be created by dropping video to Scan zone

What is the root cause of that problem?

We have recently updated the default value of the hook to not validate receipts by default here:
852b073

App/src/pages/home/report/ReportActionCompose/useAttachmentUploadValidation.ts

Line 119 in 276a46a

const {validateFiles, PDFValidationComponent, ErrorModal} = useFilesValidation(onFilesValidated, false);

The issue is that we are using the same function validateFiles for validating both receipts and attachments but at the time of hook instialiazation we are passing the value of false to isValidatingReceipts for the hook and after that if we have receipt file as well, it will be passed through the validation logic of attachment and not receipt. And for attachments video files are allowed, so it allows the video files to pass through the validation.

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

We can add a extra optional parameter isValidatingReceiptFiles to the function validateFiles, so that whenever we need to validate receipts, we can check value of the optional parameter first and also we can have a fallback to the default value of the hook parameter which is used during initialization, if the optional parameter is not passed. We need to pass this optional parameter through the chain of functions to finally reach to validateAttachment function where the logic to validate receipts and attachments is finally handled.
We need to add the following changes at the following places:

App/src/hooks/useFilesValidation.tsx

Line 268 in 276a46a

const validateFiles = (files: FileObject[], items?: DataTransferItem[]) => {

const validateFiles = (files: FileObject[], items?: DataTransferItem[], isValidatingReceiptFiles?: boolean) => {

App/src/hooks/useFilesValidation.tsx

Line 279 in 276a46a

validateAndResizeFiles(files, items ?? []);

validateAndResizeFiles(files, items ?? [], isValidatingReceiptFiles);

App/src/hooks/useFilesValidation.tsx

Line 178 in 276a46a

const validateAndResizeFiles = (files: FileObject[], items: DataTransferItem[]) => {

const validateAndResizeFiles = (files: FileObject[], items: DataTransferItem[], isValidatingReceiptFiles?: boolean) => {

App/src/hooks/useFilesValidation.tsx

Line 191 in 276a46a

Promise.all(files.map((file, index) => isValidFile(file, items.at(index), files.length > 1).then((isValid) => (isValid ? file : null))))

Promise.all(files.map((file, index) => isValidFile(file, items.at(index), files.length > 1, isValidatingReceiptFiles).then((isValid) => (isValid ? file : null))))

App/src/hooks/useFilesValidation.tsx

Line 104 in 276a46a

const isValidFile = (originalFile: FileObject, item: DataTransferItem | undefined, isCheckingMultipleFiles?: boolean) => {

const isValidFile = (originalFile: FileObject, item: DataTransferItem | undefined, isCheckingMultipleFiles?: boolean, isValidatingReceiptFiles?: boolean) => {

And here we need to use initial hook value as fallback i.e isValidatingReceipts

App/src/hooks/useFilesValidation.tsx

Line 117 in 276a46a

const error = validateAttachment(normalizedFile, isCheckingMultipleFiles, isValidatingReceipts);

const error = validateAttachment(normalizedFile, isCheckingMultipleFiles, isValidatingReceiptFiles ?? isValidatingReceipts);

And finally pass it true whereever we are validating receipts files:

App/src/pages/home/report/ReportActionCompose/useAttachmentUploadValidation.ts

Line 186 in 276a46a

validateFiles([file], items);

validateFiles([file], items, true);

App/src/pages/home/report/ReportActionCompose/useAttachmentUploadValidation.ts

Line 190 in 276a46a

validateFiles(files, items);

validateFiles([file], items, true);

What alternative solutions did you explore? (Optional)

We could use two hook initialisations one for validating reciepts and one for attachments but i don't think that will be a good practice.
Note for C+ @parasharrajat : Since there are lot of small changes, i have already added my changes to my local branch for testing.
Local branch for testing: https://github.com/Burhan-Rashid/App/tree/fix/72402
Local PR for viewing the diff properly: https://github.com/Burhan-Rashid/App/pull/1/files
Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.