[HOLD for payment 2023-01-20] Attachment - Drag and drop of application files throws wrong error message

[kavimuru]

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

---

Action Performed:

1. Login with any account.
2. Choose any report, choose an Application file (Steam, slack,
3. Notice that the validation message says: "Attachment size must be greater than 240 bytes" even the size of attachment is 6MB.

Expected Result:

The attachment modal should show correct message.

Actual Result:

The attachment modal show incorrect message.

Workaround:

Move the validation fileExtension on to the top of isValidFile inside AttachmentModal

Platforms:

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

• MacOS / Chrome and Win chrome

Version Number: 1.2.42-1
Reproducible in staging?: y
Reproducible in production?: y
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos:

Screen.Recording.2022-12-20.at.11.53.12.mov

Recording.1134.mp4

Expensify/Expensify Issue URL:
Issue reported by: @hungvu193
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1671512078960629

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01aecef138c9bc6ea3
• Upwork Job ID: 1612603999422697472
• Last Price Increase: 2023-01-10

[yuwenmemon]

Will take a look at this one.

[muttmuure]

Hm, I tried to replicate this and receive this message:

1. Open staging.new.expensify.com
2. Open chat with matt+1@miamimoore.com
3. Click add attachment
4. Select an application file (e.g. I chose Clipy).
5. The error message is above

[muttmuure]

Are we sure this is replicable?

[yuwenmemon]

@muttmuure Yeah, it's replicable when drag and dropping, not when using the attachment picker:

Kapture.2023-01-09.at.15.37.47.mp4

[yuwenmemon]

Although I think this is just related to the OS's file provided when dragging and dropping vs using the image picker, since both flows hit the same logic:

App/src/components/AttachmentModal.js

Lines 150 to 185 in 4e915a9

	/**
	* @param {Object} file
	* @returns {Boolean}
	*/
	isValidFile(file) {
	if (lodashGet(file, 'size', 0) > CONST.API_ATTACHMENT_VALIDATIONS.MAX_SIZE) {
	this.setState({
	isAttachmentInvalid: true,
	attachmentInvalidReasonTitle: this.props.translate('attachmentPicker.attachmentTooLarge'),
	attachmentInvalidReason: this.props.translate('attachmentPicker.sizeExceeded'),
	});
	return false;
	}
	if (lodashGet(file, 'size', 0) < CONST.API_ATTACHMENT_VALIDATIONS.MIN_SIZE) {
	this.setState({
	isAttachmentInvalid: true,
	attachmentInvalidReasonTitle: this.props.translate('attachmentPicker.attachmentTooSmall'),
	attachmentInvalidReason: this.props.translate('attachmentPicker.sizeNotMet'),
	});
	return false;
	}
	const {fileExtension} = FileUtils.splitExtensionFromFileName(lodashGet(file, 'name', ''));
	if (!_.contains(CONST.API_ATTACHMENT_VALIDATIONS.ALLOWED_EXTENSIONS, fileExtension.toLowerCase())) {
	const invalidReason = `${this.props.translate('attachmentPicker.notAllowedExtension')} ${CONST.API_ATTACHMENT_VALIDATIONS.ALLOWED_EXTENSIONS.join(', ')}`;
	this.setState({
	isAttachmentInvalid: true,
	attachmentInvalidReasonTitle: this.props.translate('attachmentPicker.wrongFileType'),
	attachmentInvalidReason: invalidReason,
	});
	return false;
	}
	return true;
	}

Here's what the get for the App file when using the file picker:

vs. Drag and Drop:

I think a simple solution would be just to check for file type first in this method, since that would give us some consistency when we can't control what receive from the OS/browser (unless we can?)

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to Contributor Plus for review of internal employee PR - @Santhosh-Sellavel (Internal)

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.2.53-0 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Check attachment file type before checking size #14169

If no regressions arise, payment will be issued on 2023-01-20. 🎊

After the hold period, please check if any of the following need payment for this issue, and if so check them off after paying:

• External issue reporter
• Contributor that fixed the issue
• Contributor+ that helped on the issue and/or PR

As a reminder, here are the bonuses/penalties that should be applied for any External issue:

• Merged PR within 3 business days of assignment - 50% bonus
• Merged PR more than 9 business days after assignment - 50% penalty

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@Santhosh-Sellavel / @yuwenmemon] The PR that introduced the bug has been identified. Link to the PR:
• [@Santhosh-Sellavel / @yuwenmemon] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@Santhosh-Sellavel / @yuwenmemon] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@muttmuure] A regression test has been added or updated so that the same bug will not reach production again. Link to the GH issue for creating the test here: https://github.com/Expensify/Expensify/issues/256330

[hungvu193]

I have a question, if my solution (Posted in Workaround of this issue) is also the solution that contributor used to fix this bug, should I rewarded? @yuwenmemon 😂

[mallenexpensify]

@muttmuure can you issue payment and complete the regression test steps today? Also address @hungvu193 's question above. If needed, post in #contributor-plus to discuss, thanks.

[muttmuure]

Will get to this today - I have a lot of other issues to get through but I will make sure this is done before I log off.

[muttmuure]

OK getting to this now

[muttmuure]

Posted a buddy check here https://expensify.slack.com/archives/C01SKUP7QR0/p1674236286387249

[muttmuure]

I've invited @hungvu193 but @Santhosh-Sellavel isn't showing under our company hires

[muttmuure]

Nevermind I've found him from another earlier job

[muttmuure]

You're both invited to apply for the job. Thanks!

[Santhosh-Sellavel]

Applied for the job!

[muttmuure]

Everyone is paid. Great hustle everybody.