[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 contributors@expensify.com 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.

[NJ-2020]

@deetergp AddAttachment command, I only upload an image without any text

[parasharrajat]

Ooo today, please expect the update tomorrow.

[NJ-2020]

I've a better a idea regarding the first point versioning the sources here:

So when A upload an image for example the remoteVersion will be 1 and if the A update the image again the BE needs to update the remoteVersion to 2 so when other uses see the image we will update the cached/local source to the new image

My new idea is:

• Let's remove all versioning properties, so for the attachment_key we will only have 2 properties, localSource & remoteSource
• The remoteSource will be image src taken from BE when the user upload an attachment and this value will not a file or blob url
• If we use this new idea, we will not need any attachment changes inside the BE, meaning the attachment key will only change on local onyx only
• When someone change the attachment, we can compare to the img.src updated from BE to remoteSource if it's different then we will update it and cache it

Wdyt?

cc: @parasharrajat

[melvin-bot]

@deetergp, @trjExpensify, @parasharrajat Huh... This is 4 days overdue. Who can take care of this?

[parasharrajat]

That looks good.

[NJ-2020]

Waiting an update from @deetergp

[deetergp]

I wasn't able to get to this today, but I'll try to get you a good answer tomorrow morning.

[trjExpensify]

Any luck, Scott?

[NJ-2020]

@deetergp Any updates?

[melvin-bot]

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

[deetergp]

My apologies gang, I've been pretty tied up on other projects. I'll try to get you an answer later today.

[NJ-2020]

@deetergp Any updates?

[melvin-bot]

@deetergp, @trjExpensify, @parasharrajat Huh... This is 4 days overdue. Who can take care of this?

[NJ-2020]

Waiting an update from @deetergp

[deetergp]

Apologies for the delay on this, I've had a number of time sensitive things on my plate lately. Will try to figure it out tomorrow.

[deetergp]

This will be top of my todos tomorrow morning!

[deetergp]

Okay I think I understand why you weren't getting an attachmentID @NJ-2020

I cannot test this because when I passed the attachmentID param to the BE, the BE does not return img tag with data-attachment-id attribute, I've tried using attachment-id, files: [{file, attachmentID: rand64()}] but still all didn't work

It's counterintuitive, to be sure, but NewDot currently only supports single image uploads, so despite attachments/files being an array, you can only add one. The attachmentID is a separate parameter that you send alongside files. Does that make sense?

[NJ-2020]

@deetergp I've tried using these 3 request body params, but none of them is working:

reportID,
...otherParams
file,
attachmentID

reportID,
...otherParams
file,
files: [{ file: file }]
attachmentID

reportID,
...otherParams
file,
files: [{ file: file, attachmentID }]

Could you please give an example what type of body request params should be sent to BE from the FE?