[$250] Editing a message with an image attached before image loading completed never loads the attachments

[m-natarajan]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 1.4.74-4
Reproducible in staging?: y
Reproducible in production?: y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @jliexpensify
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1715827355076719

Action Performed:

1. Write a message, then upload an image
2. Immediately click Edit (as image is still uploading)
3. Add more letters to the message and save

Expected Result:

Image attachment is loaded

Actual Results:

Image never uploads, and instead shows uploading attachment

Workaround:

unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Recording.74.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01737e481166a622be
• Upwork Job ID: 1791515161526546432
• Last Price Increase: 2024-09-26

Issue Owner

Current Issue Owner: @hungvu193

[melvin-bot]

Triggered auto assignment to @twisterdotcom (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01737e481166a622be

[melvin-bot]

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

[hungvu193]

Waiting for proposals

[beodw]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Editing a message with an image attached before image loading completed never loads the attachments

What is the root cause of that problem?

In the network tab we can see that the AddTextAndAttachement endpoint returns 200 but after the UpdateComment is called the returned data to merge with onyx does not contain the html with . This seems to be a backend thing. The call to UpdateComment seems to erase the uploaded file if it is not done uploading.

Screen.Recording.2024-05-18.at.14.30.03.mp4

What changes do you think we should make in order to solve the problem?

There are a few options:

1. We can decide to temporarily prevent editing a comment when the file is uploading but this goes against the offline first principle of the app.
2. Another thing we can do is to make the network call to UploadComment only occurs after the file has finished uploading to the backend and the attachment has rendered while preemptively updating the UI with the new comment. @hungvu193

What alternative solutions did you explore? (Optional)

This could alternatively be prevented on the backend.

[hungvu193]

Thanks for your proposal @beodw
I personally think this should be handled in the BE.

Cc @jliexpensify

[dominictb]

@hungvu193 This cannot be fixed in the back-end because the back-end won't be able to know if the Uploading attachment... actually represents an "uploading attachment" or if the user manually changes the text to Uploading attachment...

Proposal

Please re-state the problem that we are trying to solve in this issue.

1. Write a message, then upload an image
2. Immediately click Edit (as image is still uploading)
3. Add more letters to the message and save
   -> Image never uploads, and instead shows uploading attachment

What is the root cause of that problem?

When we edit the message, we will send

Text
Uploading attachment...

as HTML to the back-end, so the back-end assumes that we want to change the text as such and updates the comment to

Text
Uploading attachment...

Without considering that the Uploading attachment... is an uploading attachment and should be replaced by the image HTML

What changes do you think we should make in order to solve the problem?

When we receives the response from the back-end of AddTextAndAttachment command, after applying the successData:

• Extract the image HTML part that's present in the request response
• Look for UpdateComment commands that are still in the request queue
• If there's the Uploading attachment... text at the end of the message data of those UpdateComment commands, replace them with the image HTML in the first step
• Optionally update the report action message data in Onyx to replace Uploading attachment... with image HTML too

Another optional improvement is we can make the Uploading attachment... more specific, like Uploading Filename.jpg attachment... so that we can uniquely identify the file name from the image HTML and replace the correct Uploading Filename.jpg attachment... text with it.

The above changes will make sure the sequence of commands we send to the back-end in this case is the same as when the user edits the comment after the image is completely uploaded and shown (in this case the UpdateComment command sent will have the

Text
<img ...>

content)

What alternative solutions did you explore? (Optional)

NA

[beodw]

@dominictb when we are uploading an attachment the form payload has a binary file included which is one way the backend may differentiate it from updating the command to update a request. @hungvu193 thoughts on this?

[hungvu193]

There's an on going discussion here, I'm gonna wait for it.
For me, BE will know exactly when attachment was uploaded and in the meantime if there was any UpdateComment was called, we should return attachment + text instead. I also prefer the way Slack handle this case (only edit the text, leave attachment alone), but yeah let wait for this discussion.

[melvin-bot]

This issue has not been updated in over 15 days. @twisterdotcom, @hungvu193 eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[hungvu193]

Still holding

[melvin-bot]

@twisterdotcom, @hungvu193, this Monthly task hasn't been acted upon in 6 weeks; closing.

If you disagree, feel encouraged to reopen it -- but pick your least important issue to close instead.

[dominictb]

@twisterdotcom The discussion this issue was held on was done a long time ago, could you help reopen the issue and add Daily label?

Thanks

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[melvin-bot]

@twisterdotcom, @hungvu193 Huh... This is 4 days overdue. Who can take care of this?

[hungvu193]

On it today.

[hungvu193]

With new UI, I don't think we can reproduce this issue:

Screen.Recording.2024-10-01.at.11.09.47.mov

Feel free to close @twisterdotcom