Image picker file extension

[s77rt]

Details

• Removed mime-based file extension extraction
• Upgraded react-native-image-picker

Fixed Issues

$ #13938
PROPOSAL: #13938 (comment)

Tests

1. Open any chat
2. Press the "plus" button on the bottom left
3. Press "Add attachment" button
4. Press "Choose document" so that platform-specific file picker opens
5. Select any .docx or or .mov file (sample docx, sample mov)
6. Verify that you can attach the file and that the file gets uploaded successfully

• Verify that no errors appear in the JS console

Offline tests

n/a

QA Steps

1. Open any chat
2. Press the "plus" button on the bottom left
3. Press "Add attachment" button
4. Press "Choose document" so that platform-specific file picker opens
5. Select any .docx file
6. Verify that you can attach the file and that the file gets uploaded successfully

• Verify that no errors appear in the JS console

PR Author Checklist

• I linked the correct issue in the ### Fixed Issues section above
• I wrote clear testing steps that cover the changes made in this PR
  • I added steps for local testing in the Tests section
  • I added steps for the expected offline behavior in the Offline steps section
  • I added steps for Staging and/or Production testing in the QA steps section
  • I added steps to cover failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
  • I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
  • I tested this PR with a High Traffic account against the staging or production API to ensure there are no regressions (e.g. long loading states that impact usability).
• I included screenshots or videos for tests on all platforms
• I ran the tests on all platforms & verified they passed on:
  • Android / native
  • Android / Chrome
  • iOS / native
  • iOS / Safari
  • MacOS / Chrome / Safari
  • MacOS / Desktop
• I verified there are no console errors (if there's a console error not related to the PR, report it or open an issue for it to be fixed)
• I followed proper code patterns (see Reviewing the code)
  • I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick)
  • I verified that comments were added to code that is not self explanatory
  • I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
  • I verified any copy / text shown in the product is localized by adding it to src/languages/* files and using the translation method
    • If any non-english text was added/modified, I verified the translation was requested/reviewed in #expensify-open-source and it was approved by an internal Expensify engineer. Link to Slack message:
  • I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
  • I verified any copy / text that was added to the app is correct English and approved by marketing by adding the Waiting for Copy label for a copy review on the original GH to get the correct copy.
  • I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
  • I verified the JSDocs style guidelines (in STYLE.md) were followed
• If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
• I followed the guidelines as stated in the Review Guidelines
• I tested other components that can be impacted by my changes (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar are working as expected)
• I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
• I verified any variables that can be defined as constants (ie. in CONST.js or at the top of the file that uses the constant) are defined as such
• I verified that if a function's arguments changed that all usages have also been updated correctly
• If a new component is created I verified that:
  • A similar component doesn't exist in the codebase
  • All props are defined accurately and each prop has a /** comment above it */
  • The file is named correctly
  • The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
  • The only data being stored in the state is data necessary for rendering and nothing else
  • For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
  • Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
  • All JSX used for rendering exists in the render method
  • The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions
• If any new file was added I verified that:
  • The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
• If a new CSS style is added I verified that:
  • A similar style doesn't already exist
  • The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)
• If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
• If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
• If a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
• I have checked off every checkbox in the PR author checklist, including those that don't apply to this PR.

Screenshots/Videos

Web

web.mp4

Mobile Web - Chrome

mweb-chrome.mp4

Mobile Web - Safari

mweb-safari.mp4

Desktop

desktop.mp4

iOS

ios.mp4

Android

android.mp4

[melvin-bot]

@aldo-expensify @mollfpr One of you needs to copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

[mollfpr]

Reviewer Checklist

• I have verified the author checklist is complete (all boxes are checked off).
• I verified the correct issue is linked in the ### Fixed Issues section above
• I verified testing steps are clear and they cover the changes made in this PR
  • I verified the steps for local testing are in the Tests section
  • I verified the steps for Staging and/or Production testing are in the QA steps section
  • I verified the steps cover any possible failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
  • I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
• I checked that screenshots or videos are included for tests on all platforms
• I included screenshots or videos for tests on all platforms
• I verified tests pass on all platforms & I tested again on:
  • Android / native
  • Android / Chrome
  • iOS / native
  • iOS / Safari
  • MacOS / Chrome / Safari
  • MacOS / Desktop
• If there are any errors in the console that are unrelated to this PR, I either fixed them (preferred) or linked to where I reported them in Slack
• I verified proper code patterns were followed (see Reviewing the code)
  • I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick).
  • I verified that comments were added to code that is not self explanatory
  • I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
  • I verified any copy / text shown in the product is localized by adding it to src/languages/* files and using the translation method
  • I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
  • I verified any copy / text that was added to the app is correct English and approved by marketing by adding the Waiting for Copy label for a copy review on the original GH to get the correct copy.
  • I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
  • I verified the JSDocs style guidelines (in STYLE.md) were followed
• If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
• I verified that this PR follows the guidelines as stated in the Review Guidelines
• I verified other components that can be impacted by these changes have been tested, and I retested again (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar have been tested & I retested again)
• I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
• I verified any variables that can be defined as constants (ie. in CONST.js or at the top of the file that uses the constant) are defined as such
• If a new component is created I verified that:
  • A similar component doesn't exist in the codebase
  • All props are defined accurately and each prop has a /** comment above it */
  • The file is named correctly
  • The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
  • The only data being stored in the state is data necessary for rendering and nothing else
  • For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
  • Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
  • All JSX used for rendering exists in the render method
  • The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions
• If any new file was added I verified that:
  • The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
• If a new CSS style is added I verified that:
  • A similar style doesn't already exist
  • The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)
• If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
• If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
• If a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
• I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

Screenshots/Videos

Web

14640.Web.mov

Mobile Web - Chrome

14640.mWeb-Chrome.mov

Mobile Web - Safari

14640.mWeb-Safari.mp4

Desktop

14640.Desktop.mov

iOS

14640.iOS.mp4

Android

14640.Android.mov

[mollfpr]

Sending image jpg/jpeg/png on Web/Desktop/Android it's failing from the API, it's also happening on staging. On iOS sending, jpg is working fine.

For the others files, it's working on all platforms.

[mollfpr]

LGTM 👍

Nothings come up as regression on my test—all yours, @aldo-expensify.

[aldo-expensify]

Tested uploading jpg/jpeg/mov in native/web/desktop

LGTM! thanks for the quick work!

[aldo-expensify]

Updated the PR description to include a sample .docx and sample .mov in the QA steps

[OSBotify]

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

[github-actions]

Performance Comparison Report 📊

Significant Changes To Duration

There are no entries

Meaningless Changes To Duration

Show entries

Name	Duration
App start TTI	716.051 ms → 728.012 ms (+11.961 ms, +1.7%)
App start runJsBundle	198.438 ms → 202.258 ms (+3.821 ms, +1.9%)
Open Search Page TTI	608.474 ms → 611.749 ms (+3.274 ms, +0.5%)
App start regularAppStart	0.015 ms → 0.016 ms (+0.001 ms, +5.1%)
App start nativeLaunch	19.968 ms → 19.724 ms (-0.244 ms, -1.2%)

Show details

Name	Duration
App start TTI	Baseline Mean: 716.051 ms Stdev: 30.106 ms (4.2%) Runs: 649.8656599996611 655.8790859999135 675.7745629996061 681.7126409998164 682.6467030001804 692.7016479996964 693.3310420000926 694.4383779997006 694.7757770000026 696.6178689999506 704.5903740003705 705.2604270000011 707.9906339999288 713.232995999977 717.3417950002477 718.6844140002504 720.4621019996703 723.973942999728 724.7172760004178 725.1562670003623 729.8939829999581 731.191205999814 733.1560549996793 734.03125 741.6596860000864 743.6953659998253 746.9152239998803 750.612854000181 757.4892030004412 773.1049509998411 776.6683590002358 Current Mean: 728.012 ms Stdev: 27.482 ms (3.8%) Runs: 682.1572799999267 682.1938100000843 683.1661419998854 683.5047030001879 686.033281000331 695.4566240003332 698.7552030002698 699.1746429996565 710.2309349998832 725.3869719998911 725.6885369997472 726.084254999645 726.7513359999284 729.3566230004653 729.544603000395 730.3419850002974 731.4749649995938 734.6391310002655 735.7006769999862 739.343863000162 740.8376780003309 742.7976869996637 744.1443849997595 744.2485840003937 748.888206999749 754.2099879998714 757.9304489996284 760.6255240002647 773.1533099999651 773.1973719997332 773.3537879996002
App start runJsBundle	Baseline Mean: 198.438 ms Stdev: 17.239 ms (8.7%) Runs: 170 170 176 176 181 184 185 186 188 188 189 191 193 193 193 194 195 199 201 201 201 205 206 206 210 213 218 218 219 225 236 240 Current Mean: 202.258 ms Stdev: 16.238 ms (8.0%) Runs: 176 177 178 182 183 187 188 191 192 192 193 194 198 198 199 200 205 207 208 208 210 210 211 213 214 215 217 224 224 232 244
Open Search Page TTI	Baseline Mean: 608.474 ms Stdev: 16.704 ms (2.7%) Runs: 578.4439300000668 582.4321290003136 585.4932860005647 587.3355719996616 591.0749519998208 591.2904460001737 593.5302329994738 597.8118489999324 600.4745689993724 601.5662439996377 602.4641110002995 602.7657070001587 605.4755049999803 606.4225669996813 607.1724049998447 607.1803389992565 607.7476809993386 609.156697999686 609.984090000391 610.2298179995269 611.7301850002259 612.2485349997878 616.2229819996282 617.9348560003564 619.9975189995021 622.2492680000141 622.4392909994349 632.0048430003226 637.6952719995752 642.1457930002362 649.984375 Current Mean: 611.749 ms Stdev: 16.743 ms (2.7%) Runs: 585.4357500001788 588.3780519999564 588.4714359994978 588.8992510000244 589.8815919999033 590.490438000299 591.0478920005262 592.1377770006657 592.1685390006751 594.1324469996616 604.0053310003132 604.8203529994935 608.3286139992997 609.3647050000727 610.7376299994066 614.4017749996856 614.6552330004051 615.191081000492 615.921590000391 616.6228839997202 616.8224290004 621.5635989997536 621.7370199998841 623.8003340000287 624.170003999956 626.2762050004676 626.374958999455 631.396605999209 634.6042080000043 635.0476899994537 635.2733160005882 635.4444580003619 640.0980230001733
App start regularAppStart	Baseline Mean: 0.015 ms Stdev: 0.001 ms (5.5%) Runs: 0.013631000183522701 0.013712000101804733 0.013957000337541103 0.014078999869525433 0.014282000251114368 0.014283000491559505 0.014322999864816666 0.014362999238073826 0.0143630001693964 0.014485999941825867 0.014526000246405602 0.014527000486850739 0.014566999860107899 0.014607000164687634 0.0147299999371171 0.014770999550819397 0.014770999550819397 0.014770999550819397 0.014810999855399132 0.015014000236988068 0.015217999927699566 0.015259000472724438 0.015584000386297703 0.015625 0.015705999918282032 0.015910000540316105 0.015949999913573265 0.01648000068962574 0.0166830001398921 0.0167239997535944 Current Mean: 0.016 ms Stdev: 0.001 ms (4.9%) Runs: 0.0139979999512434 0.014526000246405602 0.01460800040513277 0.014688999392092228 0.014689000323414803 0.014852000400424004 0.014973999932408333 0.015014000236988068 0.015298999845981598 0.015381000004708767 0.015381000004708767 0.015461999922990799 0.015461999922990799 0.015543999150395393 0.015544000081717968 0.015583999454975128 0.015583999454975128 0.01574699953198433 0.015868999995291233 0.016193999908864498 0.016194000840187073 0.016235999763011932 0.01631700061261654 0.0163569999858737 0.016439000144600868 0.016439000144600868 0.016439000144600868 0.0167239997535944 0.016844999976456165 0.0168869998306036 0.01696799974888563
App start nativeLaunch	Baseline Mean: 19.968 ms Stdev: 2.055 ms (10.3%) Runs: 17 17 18 18 18 18 18 18 18 19 19 19 19 19 19 19 20 20 20 20 21 21 21 21 22 22 23 23 24 24 24 Current Mean: 19.724 ms Stdev: 1.362 ms (6.9%) Runs: 17 18 18 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 20 21 21 21 21 21 21 21 22 22 23

[OSBotify]

🚀 Deployed to staging by https://github.com/aldo-expensify in version: 1.2.63-0 🚀

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

[OSBotify]

🚀 Deployed to production by https://github.com/thienlnam in version: 1.2.63-0 🚀

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