[$250] The mobile attachment picker on Android web is giving option to record audio and video

[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.13-3
Reproducible in staging?: Y
Reproducible in production?: Y
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: @quinthar
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1721965815025499

Action Performed:

1. Go to staging.new.expensify.com
2. Tap Global +
3. Tap Track > Scan > Attachment picker

Expected Result:

1. On Android native, we don't offer "Take photo" when opening the attachment menu from the camera
2. On Android web, let's really try to just follow the exact same flow as Android native
3. On Android web, let's not ask to take a video or record audio

Actual Result:

Not matching with Android native and giving option to record audio and video for attachment picker

Workaround:

Unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~014aa6bba3d11a7600
• Upwork Job ID: 1818599086364884619
• Last Price Increase: 2024-08-07
• Automatic offers:
• eh2077 | Reviewer | 103436535

Issue Owner

Current Issue Owner: @eh2077

[melvin-bot]

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

[melvin-bot]

@miljakljajic Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[melvin-bot]

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

[melvin-bot]

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

[daledah]

Proposal

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

Not matching with Android native and giving option to record audio and video for attachment picker.

What is the root cause of that problem?

When using AttachmentPicker for scanning here

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

Line 590 in 73ec7f8

<AttachmentPicker>

, we don't limit the file types, so by default it will accept any file types

App/src/components/AttachmentPicker/index.tsx

Line 78 in 73ec7f8

accept={getAcceptableFileTypes(type)}

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

Allow the users of AttachmentPicker to customize the file types that the input will accept, that means the AttachmentPicker will have a new params acceptedFileTypes, which it will pass to input. If acceptedFileTypes exists it will be used, otherwise it will fallback to the existing logic

App/src/components/AttachmentPicker/index.tsx

Line 78 in 73ec7f8

accept={getAcceptableFileTypes(type)}

Then we can pass acceptedFileTypes to AttachmentPicker here

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

Line 590 in 73ec7f8

<AttachmentPicker>

. The list of file types supported is here

App/src/CONST.ts

Line 114 in 73ec7f8

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

We need to construct a string of accepted file types that is compatible with accept prop of the input. Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers

Or a slightly better code design is we pass this list

App/src/CONST.ts

Line 114 in 73ec7f8

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

as is, as acceptedFileTypes, then we have a transformer in AttachmentPicker that will convert it to accept-compatible string

What alternative solutions did you explore? (Optional)

NA

[daledah]

Proposal has a minor update for clarification