feat: upload input v3 image preview improvement

[priscila-moneo]

ref: https://app.clickup.com/t/86ba8wmgh

Summary by CodeRabbit

• New Features

  • Upload file thumbnails now preview in real-time while uploading, providing instant visual feedback before server processing completes.
  • Thumbnail previews display in the uploaded files list when available, with fallback to default upload icon.

• Improvements

  • Optimized image component loading performance for data URLs, eliminating unnecessary async processing.

[coderabbitai]

Ready to act? Review this PR in Change Stack to turn feedback into patch suggestions you can inspect and refine.

Warning

Review limit reached

@priscila-moneo, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 36 minutes and 16 seconds. Learn how PR review limits work.

Your organization has run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: c7d075d2-2022-49c6-aa53-4789b3a6b8c5

📥 Commits

Reviewing files that changed from the base of the PR and between 4610604 and 32e967f.

📒 Files selected for processing (5)

• src/components/inputs/upload-input-v3/__tests__/upload-input-v3.test.js
• src/components/inputs/upload-input-v3/dropzone-v3.js
• src/components/inputs/upload-input-v3/index.js
• src/components/progressive-img/__tests__/progressive-img.test.js
• src/components/progressive-img/index.js

📝 Walkthrough

Walkthrough

This PR adds thumbnail preview support to the file upload component. DropzoneV3 gains an onThumbnail callback for receiving file preview data; ProgressiveImg is optimized to display data URLs instantly; and UploadInputV3 integrates both to show preview thumbnails during and after upload using local state-managed preview data.

Changes

Thumbnail preview support for file uploads

Layer / File(s)	Summary
DropzoneV3 thumbnail event callback src/components/inputs/upload-input-v3/dropzone-v3.js	onThumbnail prop is added to the component signature and wired into the combined event handlers so the callback is invoked when DropzoneJS fires the thumbnail event, with support for chaining existing eventHandlers.thumbnail.
ProgressiveImg data URL optimization src/components/progressive-img/index.js	data: URLs are now detected and set synchronously without creating an Image object or async loading logic. Cancellation refactored from useRef to a local cancelled flag in the effect cleanup.
UploadInputV3 preview state and callback setup src/components/inputs/upload-input-v3/index.js	New state (filePreviews), refs (pendingPreviewsRef, prevValueRef), and handleThumbnail callback store preview data during upload. DropzoneV3 is wired with the onThumbnail prop. React import updated to include useLayoutEffect.
UploadInputV3 preview lifecycle and parent sync src/components/inputs/upload-input-v3/index.js	Sync logic switches to useLayoutEffect and expands to detect newly added server files, transfer queued local preview dataURLs into the keyed filePreviews map, and clean up pending previews on error or deletion.
UploadInputV3 rendering with thumbnail previews src/components/inputs/upload-input-v3/index.js	Uploading rows display ProgressiveImg thumbnails when previewUrl is present; uploaded files list prefers local session filePreviews[filename] over server preview URLs.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• OpenStackweb/openstack-uicore-foundation#257: Modifies upload-input-v3 to render image thumbnails using ProgressiveImg and manage preview URLs in the uploaded-file list.
• OpenStackweb/openstack-uicore-foundation#200: Updates DropzoneV3 event handler wiring in the same file.

Suggested reviewers

• santipalenque
• smarcet

Poem

🐰 With ears perked up and tail held high,
A thumbnail leaps—no need to wait!
Data URLs show files as they fly,
Local previews celebrate their fate. 🖼️

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'feat: upload input v3 image preview improvement' directly aligns with the main changes: adding thumbnail preview handling to UploadInputV3 and improving preview display in the component.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feature/upload-input-v3-image-preview-improvement

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/components/inputs/upload-input-v3/index.js`:
- Around line 182-194: The current preview assignment uses FIFO shift on
pendingPreviewsRef.current and assumes server-returned value order matches
upload order, causing mis-matches; update the logic to match previews to files
by a stable identifier instead of insertion order: ensure preview entries in
pendingPreviewsRef include the original client filename (e.g.,
preview.originalName or preview.clientFilename) at enqueue time, build a map
from that original name to dataURL, then iterate newFiles (from value) and for
each file try to match by comparing f.filename or f.originalName to the preview
map key (and use a heuristic like contains/endsWith if the server adds
prefixes); assign matched previews into updates and only fall back to shift()
for any remaining unmatched files; update the code paths around
pendingPreviewsRef, newFiles, and setFilePreviews to use this name-based
matching.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 7d9718e3-5485-4d80-a2ed-9b8ff5300c12

📥 Commits

Reviewing files that changed from the base of the PR and between 2539b02 and 4610604.

📒 Files selected for processing (3)

• src/components/inputs/upload-input-v3/dropzone-v3.js
• src/components/inputs/upload-input-v3/index.js
• src/components/progressive-img/index.js