fix: add image preview and download link for upload input v3#257
fix: add image preview and download link for upload input v3#257tomrndom wants to merge 3 commits into
Conversation
Signed-off-by: Tomás Castillo <tcastilloboireau@gmail.com>
|
Warning Review limit reached
More reviews will be available in 35 minutes and 27 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 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 configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
📝 WalkthroughWalkthroughThe component enhances the uploaded file display by rendering clickable thumbnail images instead of generic icons. It imports a fallback icon for load failures, derives proper URLs from file metadata, rewrites query parameters for correct rendering, and converts filenames to download links. ChangesUploaded file thumbnail and download rendering
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 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 386-387: The preview/download anchors currently render with
href={src} even when src is empty, producing broken links; update the render
logic in the UploadInputV3 component (the JSX that outputs the <a href={src}
...> preview and download anchors) to conditionally render those <a> elements
only when src is truthy, and otherwise render a non-interactive fallback (e.g.,
a <span> or icon button with no href and appropriate aria-disabled) so the UI
isn’t clickable when no URL exists; apply this gate to both the preview anchor
and the download anchor render paths that reference the src variable.
- Around line 390-391: The onError handler for the image fallback currently sets
e.target.src = file_icon but leaves the same handler in place, risking an
infinite loop if the fallback also fails; update the onError callback used on
the image element (the onError prop in this component) to first remove or
nullify the handler (e.g., e.target.onerror = null or e.currentTarget.onerror =
null) and then set the fallback src, and optionally guard by checking if
e.target.src is already the fallback before assigning to avoid reassigning the
same value.
🪄 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: 95d83902-9a42-48cc-8c43-de00acf18754
📒 Files selected for processing (1)
src/components/inputs/upload-input-v3/index.js
| <a href={src} target="_blank" rel="noreferrer" title="Preview file"> | ||
| <img |
There was a problem hiding this comment.
Avoid rendering preview/download anchors when URL is missing.
Line 386 and Line 399 can render <a> with an empty/undefined href, which creates broken interactive UI (click does nothing). Gate anchors on src and render plain text/icon when absent.
Proposed fix
-<a href={src} target="_blank" rel="noreferrer" title="Preview file">
- <img
- src={previewSrc}
- alt={filename}
- onError={(e) => { e.target.src = file_icon; }}
- style={{ width: 70, height: 70, objectFit: 'contain', display: 'block', borderRadius: 4 }}
- />
-</a>
+{src ? (
+ <a href={src} target="_blank" rel="noreferrer" title="Preview file">
+ <img
+ src={previewSrc}
+ alt={filename}
+ onError={(e) => { e.currentTarget.onerror = null; e.currentTarget.src = file_icon; }}
+ style={{ width: 70, height: 70, objectFit: 'contain', display: 'block', borderRadius: 4 }}
+ />
+ </a>
+) : (
+ <img
+ src={file_icon}
+ alt={filename}
+ style={{ width: 70, height: 70, objectFit: 'contain', display: 'block', borderRadius: 4 }}
+ />
+)}
@@
-<Typography
- component="a"
- href={src}
- target="_blank"
- rel="noreferrer"
- download
+<Typography
+ component={src ? "a" : "span"}
+ href={src || undefined}
+ target={src ? "_blank" : undefined}
+ rel={src ? "noreferrer" : undefined}
+ download={Boolean(src)}Also applies to: 398-403
🤖 Prompt for 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.
In `@src/components/inputs/upload-input-v3/index.js` around lines 386 - 387, The
preview/download anchors currently render with href={src} even when src is
empty, producing broken links; update the render logic in the UploadInputV3
component (the JSX that outputs the <a href={src} ...> preview and download
anchors) to conditionally render those <a> elements only when src is truthy, and
otherwise render a non-interactive fallback (e.g., a <span> or icon button with
no href and appropriate aria-disabled) so the UI isn’t clickable when no URL
exists; apply this gate to both the preview anchor and the download anchor
render paths that reference the src variable.
| onError={(e) => { e.target.src = file_icon; }} | ||
| style={{ width: 70, height: 70, objectFit: 'contain', display: 'block', borderRadius: 4 }} |
There was a problem hiding this comment.
Harden image fallback handler against recursive error loops.
Line 390 sets a fallback src but keeps the same onError. If the fallback asset fails (bad path/CSP), this can repeatedly fire.
Proposed fix
-onError={(e) => { e.target.src = file_icon; }}
+onError={(e) => {
+ e.currentTarget.onerror = null;
+ e.currentTarget.src = file_icon;
+}}🤖 Prompt for 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.
In `@src/components/inputs/upload-input-v3/index.js` around lines 390 - 391, The
onError handler for the image fallback currently sets e.target.src = file_icon
but leaves the same handler in place, risking an infinite loop if the fallback
also fails; update the onError callback used on the image element (the onError
prop in this component) to first remove or nullify the handler (e.g.,
e.target.onerror = null or e.currentTarget.onerror = null) and then set the
fallback src, and optionally guard by checking if e.target.src is already the
fallback before assigning to avoid reassigning the same value.
Signed-off-by: Tomás Castillo <tcastilloboireau@gmail.com>
Signed-off-by: Tomás Castillo <tcastilloboireau@gmail.com>
1 participant
ref: https://app.clickup.com/t/86b9axe92
Signed-off-by: Tomás Castillo tcastilloboireau@gmail.com
Summary by CodeRabbit
Bug Fixes
New Features