[MEDIUM] [Image][$1000] Improve NewDot image uploading experience, add large file support

[chiragsalian]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Action Performed:

1. Upload an image in App

Expected Result:

The image should be grayed (opacity 0.6 i.e., chatItemUnsentMessage) until its uploaded and once its uploaded it should not show the white thumbnail with loader

and instead continue showing the local thumbnail or show the final image immediately.

Actual Result:

1. The local image is being uploaded and we see the local thumbnail,
   
2. The local image has finished uploading and now we attempt to render it which first shows up a white thumbnail with loader
   
3. The render completes and we see the uploaded image
   

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platform:

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number: 1.1.76
Reproducible in staging?: Y
Reproducible in production?: Y
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1654262165566879

View all open jobs on GitHub

cc @michaelhaxhiu, @cead22, @kidroca.

Issue Owner

Current Issue Owner: @deetergp

[melvin-bot]

Triggered auto assignment to @MitchExpensify (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[MitchExpensify]

Upwork Job

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @parasharrajat (Exported)

[melvin-bot]

Triggered auto assignment to @deetergp (Exported), see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[parasharrajat]

Good change. I agree.

[JosueEchandiaAsto]

Proposal

Opacity can be added to the preview image, but loading later. It would be better to keep it, because it is the loading that all the images have when a url is received and it is being loaded.

This spinner while loading the image is better to keep it.

Sin.titulo.mp4

Add a style:

App/src/styles/styles.js

Lines 326 to 328 in 72ed0e5

	opacityImageLoading: {
	opacity: 0.6,
	},

App/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js

Lines 52 to 58 in 72ed0e5

	<ThumbnailImage
	previewSourceURL={previewSource}
	style={[styles.webViewStyles.tagStyles.img, styles.opacityImageLoading]}
	isAuthTokenRequired={isAttachment}
	imageWidth={imageWidth}
	imageHeight={imageHeight}
	/>

Result

Simulator.Screen.Recording.-.iPhone.13.-.2022-06-15.at.05.37.50.mp4

[parasharrajat]

@JosueEchandiaAsto Thanks for the proposal. But as you are a new contributor and have already been assigned two 2 tasks, you will have to wait before applying to new tasks.

Contribution policy: https://github.com/Expensify/App/blob/main/CONTRIBUTING.md#payment-for-contributions

New contributors are limited to working on one job at a time, however experienced contributors may work on numerous jobs simultaneously.

[JosueEchandiaAsto]

@parasharrajat Both tasks have already been completed and have been merged. Do I need to complete any additional steps in those tasks?

[parasharrajat]

Oh, I see. I will review your proposal shortly.

[parasharrajat]

@JosueEchandiaAsto Your proposal does not meet the requirements.

It would be better to keep it, because it is the loading that all the images have when a url is received and it is being loaded.This spinner while loading the image is better to keep it.

Why should we keep the loader?

Idea is to show the same thumbnail when the image is loading even after the server URL is received. When the image is fully loaded from the URL show the final image.

[deetergp]

@deetergp are you working on those?

I will look into these later today.

[deetergp]

I was not able to get into this this week but will jump in it first thing when I'm back on Tuesday.

[melvin-bot]

@deetergp, @kidroca, @trjExpensify, @parasharrajat, @marktoman Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[deetergp]

Still have not had a chance to look into this deeper. Hoping to do so tomorrow.

[melvin-bot]

@deetergp, @kidroca, @trjExpensify, @parasharrajat, @marktoman Eep! 4 days overdue now. Issues have feelings too...

[deetergp]

Will try to get to this later today!

[melvin-bot]

@deetergp, @kidroca, @trjExpensify, @parasharrajat, @marktoman Whoops! This issue is 2 days overdue. Let's get this updated quick!

[deetergp]

In response to this comment calling for back-end changes to allow data-attribute-id, I believe I figured out where we are stripping it from AddAttachment & AddTextAndAttachment and how to add it back. @kidroca do you have a WIP PR that I could use to test these back end changes?

[melvin-bot]

@deetergp, @kidroca, @trjExpensify, @parasharrajat, @marktoman Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[parasharrajat]

@deetergp Looks like you like cooking. This link takes to a recipe.

---

@deetergp
There is a draft from @kidroca #47184 which does not have any changes to attach attachment-id to the HTML tags. But it seems we will add those in Report.getUploadingAttachmentHtml function. Maybe use a dummy value for now to test your changes.

[parasharrajat]

@kidroca Could you please start implementing your changes as per #9402 (comment)? We can use #47184 if you want to.

[parasharrajat]

Bump @kidroca

[melvin-bot]

@deetergp, @kidroca, @trjExpensify, @parasharrajat, @marktoman 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

[deetergp]

Rebump @kidroca

[parasharrajat]

@trjExpensify Can we do something to ping @kidroca for pending changes?

[melvin-bot]

@deetergp, @kidroca, @trjExpensify, @parasharrajat, @marktoman Eep! 4 days overdue now. Issues have feelings too...

[deetergp]

@deetergp Looks like you like cooking. This link takes to a recipe.

Haha, yes I was cooking. Dish turned out to be pretty tasty too!

This is the comment from @kidroca I had intended meant to link to #9402 (comment) since Github has decided to bury it.