Improve attachment validation on the front-end by tgolen · Pull Request #10118 · Expensify/App

tgolen · 2022-07-26T20:39:14Z

Adds validation for minimum file size and file type.

Fixed Issues

$ #10050

Tests

Upload a file that is too small (less than 240 bytes). Here is one you can use:
Verify that you get a too small error message
Upload an image that is too larger (more than 50 MB). You can download this high-res image from here: https://effigis.com/wp-content/themes/effigis_2014/img/RapidEye_RapidEye_5m_RGB_Altotting_Germany_Agriculture_and_Forestry_2009MAY17_8bits_sub_r_2.jpg
Verify that you get a too big error message
Make a copy of that small file from above and change it's extension to something invalid (like .x) and upload it
Verify that you get a wrong file type error message
Upload proper files and verify they upload properly

Verify that no errors appear in the JS console

QA Steps

Same as tests

Verify that no errors appear in the JS console

Screenshots

Web

Mobile Web

Desktop

iOS

I'm struggling to get iOS running (see slack)

Android

I couldn't really find any way to test the errors because it's difficult to force those kind of size images on the emulator. I tried downloading some images from the web, but I still had trouble finding them to upload into the app.

marcaaron

Nice changes overall and liking the cleanup - found a few style / consistency things.

marcaaron · 2022-07-26T22:01:34Z

+            return;
+        }
+
+        if (file instanceof File) {


Kind of curious whether the File is going to have a size property. Might be good to test on native and log out the value just to be sure (can help with this if you're running into issues).

I can test this out on Android. I'm 100% certain File will always have size, but good to verify anyway.

tgolen · 2022-07-27T14:55:00Z

Updated

marcochavezf · 2022-07-27T19:57:34Z

+        if (!file) {
+            return;
+        }


NAB: I wonder when file is empty and if it's an uncovered edge case.

If it's empty because of an error, I think we should move this condition to isValidFile function and populate attachmentInvalidReasonTitle with this.props.translate('attachmentPicker.attachmentError').

Or just log something using Log.hmmm.

thoughts?

I don't really think it's a valid edge case for file to be empty, but it protects fatal errors in the case that it is. I'd probably be more comfortable removing this condition entirely. We seem to be paranoid about this object, and I'm not 100% why.

Co-authored-by: Marco Chávez <marcochavezf@gmail.com>

marcaaron · 2022-07-28T00:30:44Z

+                    && Str.isPDF(file.name || this.props.translate('attachmentView.unknownFilename'))
+                )
+            )
+        )


This just needs a few more indents and it will be ready for merge

Haha, the logic is already melting my brain :D

OSBotify · 2022-07-28T00:42:15Z

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

OSBotify · 2022-08-01T22:39:30Z

🚀 Deployed to staging by @marcaaron in version: 1.1.87-0 🚀

platform	result
🤖 android 🤖	failure ❌
🖥 desktop 🖥	failure ❌
🍎 iOS 🍎	failure ❌
🕸 web 🕸	failure ❌

OSBotify · 2022-08-04T20:51:33Z

🚀 Deployed to production by @yuwenmemon in version: 1.1.87-9 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

gladiator-1 · 2022-08-09T18:06:52Z

You didn't add video extensions ('mp4,mov,...'), no one can send a video file now, Is it ok?

App/src/CONST.js

Line 17 in 48737f3

    
           ALLOWED_EXTENSIONS: ['jpg', 'jpeg', 'png', 'gif', 'pdf', 'html', 'txt', 'rtf', 'doc', 'docx', 'htm', 'tiff', 'tif', 'xml'],

tgolen · 2022-08-09T22:10:23Z

Hm, that was the list of extensions that the server was preventing. You could try allowing that extension, and then see if the server allows it to be uploaded. In that case, I must have missed a few extensions and can add them. Would you mind trying that out @gladiator-1 ?

gladiator-1 · 2022-08-09T22:26:29Z

@tgolen I tried it in the morning and it worked fine.

tgolen · 2022-08-10T15:46:36Z

OK, I can add mov and mp4 to the list. Any others?

mountiny · 2023-01-23T18:33:46Z

Per the checklist noting, that there was a bug regression coming from this PR (or this took the bug from previous issues). The text of the error messages in modal should have a proper punctuation in the end (the main message of the error, not the title). Keep that in mind for future, thanks! #14200

gadhiyamanan · 2023-07-27T05:29:54Z

            isModalOpen: false,
-            isConfirmModalOpen: false,
+            isAttachmentInvalid: false,
+            attachmentInvalidReasonTitle: null,


We should use empty String for attachmentInvalidReasonTitle because Confirm modal accepts string as title but we pass null which cause in this issue. Fixed it here by providing empty String.

Santhosh-Sellavel · 2023-08-17T18:47:50Z

-                    title={this.props.translate('attachmentPicker.attachmentTooLarge')}
+                    title={this.state.attachmentInvalidReasonTitle}


This change causes a regression #22665. We just reverted back the logic i.e store translationKey in the state instead of value. Translated while passing

tgolen added 11 commits July 26, 2022 13:08

Move the attachment modal callback to a class method

1d02408

Add logic for minimum attachment size

0e22b20

Refactor the callback for displaying the file to upload

f01528c

Move validation to it's own method again

1464dbe

Add error message for image being too small

6c50384

Make title prop not required

c417959

Refactor method signature for getting file extension

37068ea

Add new error for invalid file type

a36809b

Add file types to the error message

057d678

Refactor how the emoji picker is disabled

12ba8cc

Rename argument to be more descriptive

dc45281

tgolen self-assigned this Jul 26, 2022

tgolen requested a review from marcaaron July 26, 2022 20:43

tgolen added 2 commits July 26, 2022 14:54

Add spanish translations

b2db4ba

Remove unnecessary import

daa65af

tgolen marked this pull request as ready for review July 26, 2022 21:26

tgolen requested a review from a team as a code owner July 26, 2022 21:26

melvin-bot Bot requested review from marcochavezf and removed request for a team July 26, 2022 21:27

marcaaron requested changes Jul 26, 2022

View reviewed changes

tgolen added 4 commits July 27, 2022 08:34

Import only the necessary bits of lodash

7d3a441

Clean up logic for getting file extension

439f03f

Add protection for accessing file properties

0e804b2

Rename boolean

d641756

marcochavezf reviewed Jul 27, 2022

View reviewed changes

Comment thread src/components/AttachmentModal.js Outdated

tgolen and others added 2 commits July 27, 2022 14:31

Update src/components/AttachmentModal.js

1cccad3

Co-authored-by: Marco Chávez <marcochavezf@gmail.com>

Update src/components/AttachmentModal.js

414ec0d

Co-authored-by: Marco Chávez <marcochavezf@gmail.com>

marcochavezf approved these changes Jul 27, 2022

View reviewed changes

marcaaron self-requested a review July 28, 2022 00:29

marcaaron approved these changes Jul 28, 2022

View reviewed changes

marcaaron merged commit b4232d8 into main Jul 28, 2022

marcaaron deleted the tgolen-attachment-validation branch July 28, 2022 00:34

OSBotify mentioned this pull request Aug 1, 2022

Deploy Checklist: New Expensify 2022-08-01 #10169

Closed

95 tasks

tgolen mentioned this pull request Aug 12, 2022

Allow video files to be uploaded #10371

Merged

parasharrajat mentioned this pull request Sep 1, 2022

[HOLD for payment 2022-09-16] [$250] The file extension shows up twice in the file name reported by @Tushu17 #10579

Closed

trjExpensify mentioned this pull request Nov 15, 2022

[HOLD for payment 2022-11-16] [$250] [Image] Cant Share attachments between 40-49 mb - reported by @Tushu17 #8235

Closed

mountiny mentioned this pull request Jan 23, 2023

[HOLD for payment 2023-01-30] Inconsistent period at the end of sentences #14200

Closed

6 tasks

hungvu193 mentioned this pull request Jul 23, 2023

[HOLD for payment 2023-08-16][$1000] Attachment ValidationModal texts are not translated to Spanish #22665

Closed

6 tasks

gadhiyamanan reviewed Jul 27, 2023

View reviewed changes

gadhiyamanan mentioned this pull request Jul 27, 2023

[HOLD for checklist] [$1000] Dev: console error on attach large file #21947

Closed

6 tasks

Santhosh-Sellavel reviewed Aug 17, 2023

View reviewed changes

		title={this.props.translate('attachmentPicker.attachmentTooLarge')}
		title={this.state.attachmentInvalidReasonTitle}

Conversation

tgolen commented Jul 26, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Fixed Issues

Tests

QA Steps

Screenshots

Web

Mobile Web

Desktop

iOS

Android

Uh oh!

marcaaron left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

tgolen commented Jul 27, 2022

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

OSBotify commented Jul 28, 2022

Uh oh!

OSBotify commented Aug 1, 2022

Uh oh!

OSBotify commented Aug 4, 2022

Uh oh!

gladiator-1 commented Aug 9, 2022

Uh oh!

tgolen commented Aug 9, 2022

Uh oh!

gladiator-1 commented Aug 9, 2022

Uh oh!

tgolen commented Aug 10, 2022

Uh oh!

mountiny commented Jan 23, 2023

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

8 participants

tgolen commented Jul 26, 2022 •

edited

Loading