Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Image action/edit buttons are disabled/grayed when uploading large images #7871

Open
esseb opened this issue Nov 25, 2024 · 1 comment
Open

Comments

@esseb
Copy link

esseb commented Nov 25, 2024

Describe the bug
Image action/edit buttons are disabled/grayed when uploading large images (more than 500kB), no matter how long I wait. The action/edit buttons appear when reloading Sanity Studio with F5.

To Reproduce
Steps to reproduce the behavior:

  1. Create a new document or edit an existing document with an image field
  2. Upload an image that is more than 500kB
    • Preferable closer to 2.5MB when first testing since the exact size the error starts to occur is a bit fluid
    • You can use the PNG image from this zip file
    • If you try to reupload the exact same image the bug is not reproducible, I guess Sanity Studio detects the same image has already been uploaded and skips some image processing work so it finishes in less than 5 seconds
  3. Wait 5 seconds
    • See the "Additional context" below for why I specify to wait 5 seconds
  4. Look at the image action/edit buttons in the top right corner of the image field

Expected behavior
The image edit buttons should appear and not be disabled.

Actual behavior
The image preview appears but the image action/edit buttons are still disabled/grayed out even after waiting 5+ seconds.

When this bug occurs I see this error in the devtools console:

chunk-5BU2CV2I.js?v=c7e887fc:110133 Final error after retries, asset not found in documentPreviewStore: Error: No asset found in documentPreviewStore with id: image-a206369e57fa30dbcbab082679f65d4747d43f7a-1732x1210-png
    at chunk-5BU2CV2I.js?v=c7e887fc:110126:15
    at chunk-5BU2CV2I.js?v=c7e887fc:33266:17
    at OperatorSubscriber2._this._next (chunk-5BU2CV2I.js?v=c7e887fc:30264:9)
    at Subscriber2.next (chunk-5BU2CV2I.js?v=c7e887fc:29967:12)
    at chunk-5BU2CV2I.js?v=c7e887fc:33267:27
    at OperatorSubscriber2._this._next (chunk-5BU2CV2I.js?v=c7e887fc:30264:9)
    at Subscriber2.next (chunk-5BU2CV2I.js?v=c7e887fc:29967:12)
    at Observable2._subscribe (chunk-5BU2CV2I.js?v=c7e887fc:31450:18)
    at Observable2._trySubscribe (chunk-5BU2CV2I.js?v=c7e887fc:30165:19)
    at chunk-5BU2CV2I.js?v=c7e887fc:30159:115

Screenshots
A screenshot of the image edit buttons when this bug occurs:
Screenshot 2024-11-25 at 10 07 15

A screenshot of the image edit buttons when this bug does not occur (they appear when reloading Sanity Studio with F5):
Screenshot 2024-11-25 at 10 07 32

Which versions of Sanity are you using?

@sanity/cli (global)          3.64.2 (latest: 3.64.3)
@sanity/cli                   3.60.0 (latest: 3.64.3)
@sanity/color-input            3.1.2 (latest: 4.0.1)
@sanity/components            2.14.0 (up to date)
@sanity/eslint-config-studio   4.0.0 (up to date)
@sanity/image-url              1.1.0 (up to date)
@sanity/locale-nb-no          1.1.15 (up to date)
@sanity/production-preview    2.35.3 (up to date)
@sanity/rich-date-input        3.0.4 (up to date)
@sanity/ui                    2.8.24 (up to date)
@sanity/vision                3.64.2 (latest: 3.64.3)
sanity                        3.64.2 (latest: 3.64.3)

What operating system are you using?
macOS Sonoma 14.6.1

Which versions of Node.js / npm are you running?

10.5.2
v20.13.1

Additional context
The image action/edit buttons appear after reloading the page with f5.

The bug seems to occur when images are about 500kB or larger, but this is not entirely consistent, I've seen it happen for images around 400kB also. The error was first reported for large PNG images with transparency around 2.5MB in size, but I can reproduce the bug with JPG images also if the file size is 500kB or larger.

The error I see in the devtools console is from here:

/**
* In some cases when uploading large media file we are getting an stale `null` response from content lake when fetching the reference that was just uploaded,
* making the UI not to react as it should.
* This retry logic is added to handle the case where the asset is not found in the initial fetch to the documentPreviewStore but it will eventually be found,
* because the asset has been just added.
* It has the downside that if this is being used to check if an asset exists, it will retry 5 times before returning null.
*/

This indicates there is an attempt to work around this issue with 5 retries and a 1 second timeout, which does not help in my case.

Security issue?
No.

@esseb
Copy link
Author

esseb commented Dec 3, 2024

I retested this issue again today to see if this could be the cause of another issue I'm seeing when publishing. I could still reproduce the issue today but only every 8th or large image I tried to upload. I was able to reproduce it 4 times. Same configuration as when I originally reported this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant