Corrected infinite loading problem if non-image file uploaded for profile image

[PrashantMangukiya]

@thienlnam PR is ready for review.

Details

Whenever non image file uploaded for profile image it will show infinite loading. User can not do anything thereafter, so corrected this problem.

Fixed Issues

$ #5593

Tests | QA Steps

1. Navigate to settings
2. Click on Profile
3. Click on the edit icon in the avatar
4. On the file browser, select to display all files
5. Select a non-image file

When invalid image file uploaded, Now it will show error message as Invalid file. Please try a different image. User will not stuck with loader, and try again with valid image file.

Tested On

• Web
• Mobile Web
• Desktop
• iOS
• Android

Screenshots

Web

Web.mp4

Mobile Web

MobileWeb.mp4

Desktop

Desktop.mp4

iOS

iOS.mov

Android

Android.mp4

[thienlnam]

Looks like you have a JS linting error error Trailing spaces not allowed no-trailing-spaces

[PrashantMangukiya]

Thanks for the message. Removed trailing space. I hope no more JS lint error. Let us wait to finish all checks. Finger crossed.

[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.

[OSBotify]

🚀 Deployed to staging by @thienlnam in version: 1.1.13-3 🚀

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

[OSBotify]

🚀 Deployed to production by @Jag96 in version: 1.1.14-4 🚀

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

[ogumen]

The accessibility issues found in this PR:
Web

1. The issue [med] Keyboard Navigation: Many Pages: Focus not moved/trapped within the opened dialog #5516 is still reproducible.
2. Non-interactive dialog heading is focused with Tab key - failure of WCAG SC 2.4.3
   https://user-images.githubusercontent.com/88733897/142773471-d1734a8a-c438-4e64-8401-9ece760ffd9d.mp4
3. The visual heading is not implemented programmatically as a heading - failure of 1.3.1, similar to [low] JAWS+Chrome: Many Pages: Visual headings are not announced as such #5458
   
4. The visual focus outline for Close button does not meet the minimum color contrast requirements of 3.0:1 - failure of WCAG SC 1.4.11, similar to [low] Color Contrast: Change Password: The focus outline does not meet the contrast ratio of 3:1 #5646
   
5. The "Image upload failed" modal dialog does not have a programmatic label - failure of WCAG SC 1.3.1
   
6. The Close button is announced with no role - failure of WCAG SC 4.1.2, similar to [med] JAWS+Chrome: Many Pages: Multiple buttons announced without labels #5519
   https://user-images.githubusercontent.com/88733897/142773821-11860f4c-1df7-40f5-b15c-95f1cb5331c5.mp4
7. The toast error message disappears too quickly - failure of WCAG SC 2.2.1, similar to [med] Keyboard Navigation: Many Pages: Timing not adjustable for toast messages #5679
   https://user-images.githubusercontent.com/88733897/142773868-db18784e-99ef-4886-a887-b1fba54fe68f.mp4
8. The toast error message is not announced by the screen reader once revealed - failure of WCAG SC 4.1.3, similar to [high] JAWS+Chrome: Many Pages: Error toast messages are not announced #5678
   https://user-images.githubusercontent.com/88733897/142773911-a994667a-43c1-4b9b-9349-0c690cc7283c.mp4
9. The grey on white and white on grey icons do not meet the minimum color contrast requirements of 3.0:1. The grey color is #C6C9CA which gives a contrast ratio of 1.66:1 against white (#FFFFFF) - failure of WCAG SC 1.4.11, similar to [med] Color Contrast: Many Pages: Grey icons against white background fail contrast requirements #5506
   

Android

1. The grey on white and white on grey icons do not meet the minimum color contrast requirements of 3.0:1. The grey color is #C6C9CA which gives a contrast ratio of 1.66:1 against white (#FFFFFF) - failure of WCAG SC 1.4.11
   
2. No button role or label is announced when the "Edit profile picture" button is focused - failure of WCAG SC 4.1.2
   https://user-images.githubusercontent.com/88733897/142774784-417b6df1-0c27-427a-a7d7-d59a30c9526f.mp4
3. The focus is set to the entire page view instead of the first option in the overlay once the bottom overlay opens - failure of WCAG SC 2.4.3
   https://user-images.githubusercontent.com/88733897/142774934-c537b1ea-0b45-44d4-bf24-0deb7bbd3602.mp4
4. The displayed confirmation message when adding or removing a picture is not announced by screen reader - failure of WCAG SC 4.1.3
   https://user-images.githubusercontent.com/88733897/142774997-43842f46-36a7-412c-a6aa-8ff459ad3025.mp4
5. The confirmation message when adding or removing a picture disappears too quickly - failure of WCAG SC 2.2.1
   https://user-images.githubusercontent.com/88733897/142775054-8b72fede-22e4-4500-b1e0-02cbd924fd57.mp4