[$125] Attachment - Unable to submit or share large pdf file via native app

[nlemma]

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: V9.1.89-1
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: https://test-management.browserstack.com/projects/2219752/folder/13176721/test-cases/41236970
Email or phone of affected tester (no customers): Slottwo1 7423@gmail.com
Issue reported by: Applause Internal Team
Device used: Redminote 10s android 13 phone
App Component: Chat Report View

Action Performed:

1. Keep app logged in
2. Open a large pdf - send - select expensify app
3. Select a chat
4. Try to submit/ share the file

Expected Result:

User must be able to submit or share file via native app.

Actual Result:

Unable to submit or share large pdf file and error is also not shown when action cannot be performed.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6908020_1754372462452.Screenrecorder-2025-08-05-11-04-32-529.mp4

Bug6908020_1754372836421!LARGE_PDF_FILE__1_.pdf

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021952841206235305205
• Upwork Job ID: 1952841206235305205
• Last Price Increase: 2025-08-05
• Automatic offers:
• rohit9625 | Contributor | 108372807

Issue Owner

Current Issue Owner: @suneox

[melvin-bot]

Triggered auto assignment to @OfstadC (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.

[rohit9625]

Proposal

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

Unable to submit or share any PDF file (either large or small), and the error is also not shown when the action cannot be performed. Also, the attachment preview is not shown at step 4.

What is the root cause of that problem?

When we try to submit or share any PDF file to the chat selected in step 3, the Share button doesn't work, and the Attachment Preview of the PDF file is empty, as can be seen in this screenshot:

It happens because both AttachmentModal(used to show preview) and handleShare(called when tapping Share) function relies on validFilesToUpload state. In this case, the validFilesToUpload === 0 and handleShare returns because of this condition here:

App/src/pages/Share/ShareDetailsPage.tsx

Lines 107 to 110 in 8aca992

	const handleShare = () => {
	if (!currentAttachment || validFilesToUpload.length === 0) {
	return;
	}

And AttachmentModal doesn't show any preview because source(validFilesToUpload.at(0)) doesn't exists:

App/src/pages/Share/ShareDetailsPage.tsx

Lines 212 to 215 in 8aca992

	<AttachmentModal
	headerTitle={fileName}
	source={validFilesToUpload.at(0)?.uri}
	originalFileName={fileName}

Let's see why the validFilesToUpload was empty?
Look at this code block:

App/src/pages/Share/ShareDetailsPage.tsx

Lines 58 to 70 in 8aca992

	const [validFilesToUpload, setValidFilesToUpload] = useState<FileObject[]>([]);
	const {validateFiles} = useFilesValidation(setValidFilesToUpload);
	const report: OnyxEntry<ReportType> = getReportOrDraftReport(reportOrAccountID);
	const displayReport = useMemo(() => getReportDisplayOption(report, unknownUserDetails, reportAttributesDerived), [report, unknownUserDetails, reportAttributesDerived]);
	useEffect(() => {
	if (!currentAttachment || isTextShared || validFilesToUpload.length !== 0) {
	return;
	}
	validateFiles([{name: currentAttachment.id, uri: currentAttachment.content, type: currentAttachment.mimeType}]);
	}, [currentAttachment, isTextShared, validFilesToUpload.length, validateFiles]);

• The validFilesToUpload state updates in the useFilesValidation hook as we pass setValidFilesToUpload to the hook
• The hook returns validateFiles function which is called inside the above useEffect when the ShareDetailsPage mounted, after selecting a chat at step 3
• We pass the currentAttachment to the validateFiles function, and it calls validateAndResizeFiles as the files.length is 1:
  

  App/src/hooks/useFilesValidation.tsx

  Line 278 in afef073

  validateAndResizeFiles(files, items ?? []);

• The validateAndResizeFiles calls isValid for each file, which further calls normalizeFileObject and so on.
• At last, here we get the PDF file after successful validation:
  

  App/src/hooks/useFilesValidation.tsx

  Lines 237 to 241 in afef073

  	.then(({processedFiles, pdfsToLoad}) => {
  	if (pdfsToLoad.length) {
  	validFiles.current = processedFiles;
  	setPdfFilesToRender(pdfsToLoad);
  	} else {

• However, we do not call the proceedWithFilesAction function passed as setValidFilesToUpload from the ShareDetailsPage, like we do for the processedFiles here:
  

  App/src/hooks/useFilesValidation.tsx

  Lines 258 to 262 in afef073

  	} else if (processedFiles.length > 0) {
  	const sortedFiles = sortFilesByOriginalOrder(processedFiles, originalFileOrder.current);
  	proceedWithFilesAction(sortedFiles);
  	resetValidationState();
  	}

Hence, the validFilesToUpload remains empty even though the file was validated, resulting in broken Attachment Preview and Share button not working.

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

To solve the issue, we just need to call the proceedWithFilesAction here:

.then(({processedFiles, pdfsToLoad}) => {
    if (pdfsToLoad.length) {
        validFiles.current = processedFiles;
        setPdfFilesToRender(pdfsToLoad);
        proceedWithFilesAction(pdfsToLoad); // set the validFilesToUpload

However, seeing the complexity of the useFilesValidation hook, we should look for if we need the other checks as we are doing for processedFiles here:

App/src/hooks/useFilesValidation.tsx

Lines 246 to 252 in afef073

	if (collectedErrors.current.length > 0) {
	const uniqueErrors = Array.from(new Set(collectedErrors.current.map((error) => JSON.stringify(error)))).map((errorStr) => JSON.parse(errorStr) as ErrorObject);
	setErrorQueue(uniqueErrors);
	setCurrentErrorIndex(0);
	const firstError = uniqueErrors.at(0);
	if (firstError) {
	setFileError(firstError.error);

But, if we look at the flow of operation for the PDF file, then those checks seems redundant for pdfFilesToRender. Anyways, we can discuss this at the PR phase for sure :)

Results: Now, the Share button works and Attachment Preview is shown.

Screen_recording_20250806_005027.mp4

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

I don't think we have tests for Share flow.

What alternative solutions did you explore? (Optional)

As an alternative, we can make use of the PDFValidationComponent exported from the useFilesValidation hook, as it calls the checkIfAllValidatedAndProceed function when PDF loaded successfully:

App/src/hooks/useFilesValidation.tsx

Lines 328 to 332 in c7c0583

	onLoadSuccess={() => {
	validatedPDFs.current.push(file);
	validFiles.current.push(file);
	checkIfAllValidatedAndProceed();
	}}

Which further calls:

App/src/hooks/useFilesValidation.tsx

Lines 171 to 173 in c7c0583

	const sortedFiles = sortFilesByOriginalOrder(validFiles.current, originalFileOrder.current);
	proceedWithFilesAction(sortedFiles);
	resetValidationState();

We can make these changes at the ShareDetailsPage file:

-     const {validateFiles} = useFilesValidation(setValidFilesToUpload);
+    const {validateFiles, PDFValidationComponent} = useFilesValidation(setValidFilesToUpload);
//  Other code
    </View>
    <SafeAreaView>
+        {PDFValidationComponent}
          <AttachmentModal
              headerTitle={fileName}
              source={validFilesToUpload.at(0)?.uri}
              originalFileName={fileName}
              fallbackSource={FallbackAvatar}
          >

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.

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

@suneox Whoops! This issue is 2 days overdue. Let's get this updated quick!

[suneox]

The alternative solution from @rohit9625 LGTM. We can apply the same approach that's already used in the existing IOU request flow.

🎀 👀 🎀 C+ reviewed