[$1000] Feature request: Allow for dragging and dropping a receipt file onto the expense without having to first click into the graphic.

[m-natarajan]

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.0.66-3
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?:
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @mallenexpensify
Slack conversation (hyperlinked to channel name): ts_external_expensify_open_source

Action Performed:

1. Create a manual expense
2. On submit expense page attempt to drag and drop a receipt

Expected Result:

User able to drag and drop receipt

Actual Result:

User have to click it first then add the receipt and unable to drag and drop

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Recording.796.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021861562318502187449
• Upwork Job ID: 1861562318502187449
• Last Price Increase: 2025-02-25
• Automatic offers:
• abzokhattab | Contributor | 105129004

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @abzokhattab

[melvin-bot]

Triggered auto assignment to @strepanier03 (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details. Please add this Feature request to a GH project, as outlined in the SO.

[melvin-bot]

⚠️ It looks like this issue is labelled as a New Feature but not tied to any GitHub Project. Keep in mind that all new features should be tied to GitHub Projects in order to properly track external CAP software time ⚠️

[melvin-bot]

Triggered auto assignment to Design team member for new feature review - @shawnborton (NewFeature)

[abzokhattab]

Edited by proposal-police: This proposal was edited at 2024-11-25 22:12:40 UTC.

Proposal

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

Allow for dragging and dropping a receipt file onto the expense without having to first click into the graphic

What is the root cause of that problem?

New Feature

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

we should embed the empty receipt component in the MoneyRequestConfirmationListFooter with DragAndDropProvider and DragAndDropConsumer

App/src/components/MoneyRequestConfirmationListFooter.tsx

Lines 644 to 651 in d5e8710

	<ReceiptEmptyState
	onPress={() =>
	Navigation.navigate(
	ROUTES.MONEY_REQUEST_STEP_SCAN.getRoute(CONST.IOU.ACTION.CREATE, iouType, transactionID, reportID, Navigation.getActiveRouteWithoutParams()),
	)
	}
	/>
	))}

similar to how it's done in the ImportSpreadsheet

App/src/components/ImportSpreadsheet.tsx

Lines 165 to 185 in 8d3f1db

	{({safeAreaPaddingBottomStyle}) => (
	<DragAndDropProvider setIsDraggingOver={setIsDraggingOver}>
	<View style={[styles.flex1, safeAreaPaddingBottomStyle]}>
	<HeaderWithBackButton
	title={translate('spreadsheet.importSpreadsheet')}
	onBackButtonPress={() => Navigation.navigate(backTo)}
	/>
	<View style={[styles.flex1, styles.uploadFileView(isSmallScreenWidth)]}>
	{!(isDraggingOver ?? isDraggingOver) && desktopView}
	<DragAndDropConsumer
	onDrop={(e) => {
	const file = e?.dataTransfer?.files[0];
	if (file) {
	readFile(file);
	}
	}}
	>
	<View style={[styles.fileDropOverlay, styles.w100, styles.h100, styles.justifyContentCenter, styles.alignItemsCenter]}>
	<View style={styles.fileUploadImageWrapper(fileTopPosition)}>

optionally we can move that inside the ReceiptEmptyState itself so that we can have the same behaviour in the money request view as well

• in acheive that we need to add a new prop onDrop that will be called on the drop inside the DragAndDropConsumer
• then when calling the ReceiptEmptyState we should call the same function that is used in the scan (setReceiptAndNavigate) however this function navigates to the confirmation page again as show here which is not needed so to avoid that we can split it into two functions one will return the receipt and the other will set and navigate and we should use set receipt in this case.
• also the same drag and drop stylings can be used from the scan ReceiptDropUI and the drag provider inside the StepScreenDragAndDropWrapper

What alternative solutions did you explore? (Optional)

[mkzie2]

Edited by proposal-police: This proposal was edited at 2024-11-25 22:31:37 UTC.

Proposal

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

User have to click it first then add the receipt and unable to drag and drop

What is the root cause of that problem?

Feature request

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

Replace ScreenWrapper with StepScreenDragAndDropWrapper and use ReceiptDropUI similar to IOURequestStepScan

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

Line 765 in e08c53a

<StepScreenDragAndDropWrapper

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

Lines 774 to 776 in e08c53a

	<View style={[styles.flex1, !Browser.isMobile() && styles.uploadFileView(isSmallScreenWidth)]}>
	{!(isDraggingOver ?? isDraggingOverWrapper) && (Browser.isMobile() ? mobileCameraView() : desktopUploadView())}
	<ReceiptDropUI

1. Add more props for StepScreenDragAndDropWrapper to configure HeaderWithBackButton (threeDotsMenuItems-related)
2. Extract validateReceipt here which returns the error message if any
3. Extract these parts of setReceiptAndNavigate here to util file.

The overall code change might be like this:

<StepScreenDragAndDropWrapper>
  {(isDraggingOverWrapper) => (
    <>
      {isLoading && <FullScreenLoadingIndicator />}
      {!!gpsRequired && <LocationPermissionModal />}
      {!isDraggingOverWrapper && <MoneyRequestConfirmationList />}
      <ReceiptDropUI />
      <ConfirmModal />
    </>
  )}
</StepScreenDragAndDropWrapper>

[shawnborton]

This seems pretty straightforward to me, perhaps we can just reuse the same styles we get when you go to upload a receipt from the Scan flow?

[mkzie2]

Opps. I linked the wrong issue.

[melvin-bot]

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

[melvin-bot]

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

[mallenexpensify]

reuse the same styles we get when you go to upload a receipt from the Scan flow?

yeah, this makes sense and should make things a bit easier.

[melvin-bot]

@shawnborton, @Ollyws, @luacmartins, @mallenexpensify Huh... This is 4 days overdue. Who can take care of this?

[luacmartins]

Should we increase the bounty on this one? We haven't gotten any new proposals in a while

[Ollyws]

@abzokhattab If you could create a new PR we can try and get to the bottom of #55935 there, Thanks.

[melvin-bot]

Upwork job price has been updated to $1000

[shubham1206agra]

Hello @Ollyws @shawnborton @mallenexpensify @luacmartins, I have addressed all issues related to this issue in #53089 (comment) (Please see attached video below). Can I take this issue as a contributor? I can write a formal proposal for this, but it will be similar to other people.

• [HOLD for payment 2025-02-07] [HOLD for payment 2025-02-06] Expense - Pointer has a + icon when drag and drop file on scan and distance confirmation page #55933

Screen.Recording.2025-02-25.at.11.17.12.PM.mov

• [HOLD for payment 2025-02-07] [HOLD for payment 2025-02-06] Expense - App crashes when drag and drop a large PDF file to confirmation page #55934

Screen.Recording.2025-02-25.at.11.13.00.PM.mov

• [HOLD for payment 2025-02-07] [HOLD for payment 2025-02-06] Expense - No "Let it go" screen when drag and drop receipt to replace receipt on confirm page #55935

Screen.Recording.2025-02-25.at.11.14.26.PM.mov

• [HOLD for payment 2025-02-07] [Due for payment 2025-02-06] Expense - No error modal when drag and drop an invalid file to replace current file #55937

Screen.Recording.2025-02-25.at.11.15.55.PM.mov

Screen.Recording.2025-02-25.at.11.10.25.PM.mov

• [HOLD for payment 2025-02-07] [HOLD for payment 2025-02-06] Expense - Can drag & drop image to replace image receipt but not pdf to replace image receipt #55938

Screen.Recording.2025-02-25.at.11.19.39.PM.mov

• [HOLD for payment 2025-02-07] [HOLD for payment 2025-02-06] Expense - Receipt modal is stretched out #55931

[hayes102]

Hello,
I worked on a branch covering the raised bugs, can i submit a proposal? or am i too late?

[melvin-bot]

📣 @hayes102! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[shubham1206agra]

Proposal

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

Allow for dragging and dropping a receipt file onto the expense without having to first click into the graphic

What is the root cause of that problem?

New Feature

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

We will use ReceiptDropUI inside IOURequestStepConfirmation, similar to IOURequestStepScan

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

Line 803 in 7e30096

return (

Result - #53089 (comment)

Note - We will refactor the common code in the util file.

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

NA since this is a UI change

What alternative solutions did you explore? (Optional)

NA

[mallenexpensify]

Hi @hayes102 , welcome!
You can submit a proposal to any issue, generally it's best practice to focus on issues with Help Wanted (link) though, cuz those are 'jobs'. For this one, @shubham1206agra 's proposal will be reviewed before yours. @Ollyws, 👀 above please. Thx

[nkdengineer]

🚨 Edited by proposal-police: This proposal was edited at 2025-02-26 04:46:01 UTC.

Proposal

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

What is the root cause of that problem?

This is a new feature request

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

1. Implement the ReceiptDropUI and DragAndDropProvider in IOURequestStepConfirmation. I think we can do all logics in IOURequestStepConfirmation and use StepScreenDragAndDropWrapper, no need to change the UI in src/components/ReceiptEmptyState.tsx like this PR.

2. When we drag and drop a file, we will reuse this logic but we don't need to include the logic to navigate to confirmation page or skip confirmation, only need to validate the file and update the receipt to transaction. Then the new receipt will be displayed automatically. We will need to implement the error modal like we do in the scan step to display the error

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

Line 490 in ac83517

const setReceiptAndNavigate = (originalFile: FileObject, isPdfValidated?: boolean) => {

3. For these blockers above

• [HOLD for payment 2025-02-07] [HOLD for payment 2025-02-06] Expense - Pointer has a + icon when drag and drop file on scan and distance confirmation page #55933: We need to disable the drag and drop if the transaction is the distance request

• [HOLD for payment 2025-02-07] [HOLD for payment 2025-02-06] Expense - App crashes when drag and drop a large PDF file to confirmation page #55934: Update the correct translation for the error

• [HOLD for payment 2025-02-07] [HOLD for payment 2025-02-06] Expense - No "Let it go" screen when drag and drop receipt to replace receipt on confirm page #55935: We always display ReceiptDropUI if the drag and drop is not disabled

• [HOLD for payment 2025-02-07] [HOLD for payment 2025-02-06] Expense - Can drag & drop image to replace image receipt but not pdf to replace image receipt #55938: My solution doesn't face this bug

• [HOLD for payment 2025-02-07] [HOLD for payment 2025-02-06] Expense - Receipt modal is stretched out #55931: My solution will not change the UI in ReceiptEmptyState so this bug doesn't happen.

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

This is a new UI, no need the test

What alternative solutions did you explore? (Optional)

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.

[github-actions]

⚠️ @nkdengineer 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).

[shubham1206agra]

@Ollyws If you want to test the changes, you can test it here https://github.com/shubham1206agra/App/tree/test-receipt.

[Ollyws]

Thanks @shubham1206agra I will give it a test now.

[Ollyws]

@shubham1206agra's solution looks good and fixes all of the issues with the previous PR so I'd be happy to move forward with that.

[mallenexpensify]

@luacmartins 👀 above. (I see you're assigned here so pinging you cuz if @Ollyws adds 🎀 it was assign an engineer)

[luacmartins]

Thanks! Let's keep this one moving. All yours @shubham1206agra

[luacmartins]

It seems like @lakchote is working on a design doc that touches drag & drop, so tagging him for visibility