App: Improve UX when pasting images and there is an error
If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!
Expected Result:
Text/image gets pasted
Actual Result:
Alert pops up which is bad UX
Action Performed:
When copy/pasting something from Slack into E.cash, there is an alert() being used when there is an error pasting images. Not only is it invasive to the UX (you have to click to make it go away), but it prevents anything from getting pasted.
Suggestion:
- Don’t use an alert and use something more appropriate if there is indeed something that the user needs to know (maybe an error message down by the compose field).
- Allow the rest of the text to be pasted if something fails with images being pasted (I think this just means not calling e.preventDefault() ).
Code is here
Workaround:
Upload images directly in E.cash
Platform:
Web Desktop App
Version Number: 1.0.28-0
Notes/Photos/Videos: 
Expensify/Expensify Issue URL: https://github.com/Expensify/Expensify/issues/160750
Upwork job: https://www.upwork.com/jobs/~0103d5a375d57f66de
About this issue
- Original URL
- State: closed
- Created 3 years ago
- Comments: 17 (13 by maintainers)
Nice one! I just got back from vacay and it looks like you’re officially hired in Upwork, so thanks a ton for pushing forward from here.
@JmillsExpensify Growls have landed Thanks to https://github.com/Expensify/Expensify.cash/issues/2812. We can proceed with this issue. PR will be added soon. 🥳
Is the plan to eventually move this into a custom growl? If so, should we just hold off and wait until the custom growls are in place? We’ll hopefully be able to put a job up for them shortly as we just finished mocks for them.
Agreed with Nikki! As far as I know we don’t have any growls that fade in/out, so a static error message makes more sense here.
@parasharrajat, I’m not sure we even need to animate anything here. @Expensify/design do you have any input on whether we’d want the error message to fade out or something similar in this case?
We do have simple, static error messages throughout the product that are displayed when something has gone awry, I think following that existing precedent makes sense. If we don’t do want to do any fading out maybe the error can be removed when they next interact with the compose box.
@JmillsExpensify, I believe our current plan is to build a custom toast library instead of implementing a third party lib. I know @shawnborton has been working on the general design for that over in https://github.com/Expensify/Expensify/issues/159930. cc: @marcaaron since I know we’ve talked about toasts/growls before.
Since we don’t want to use a lib for toasts, @parasharrajat perhaps you could implement a simpler solution by displaying an error message somewhere when this occurs (perhaps down by the compose field)? We have several areas already in E.cash where we display errors and don’t use alerts.