feat(main-layout): add option to include random suffix in file upload #2725
Conversation
📝 WalkthroughWalkthroughThe Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~5 minutes Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
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: 1
🤖 Fix all issues with AI Agents
In @playground/src/layout/main-layout.js:
- Around line 63-67: The client is currently calling put("s.yaml", file, {
token: process.env.REACT_APP_BLOB_READ_WRITE_TOKEN, ... }) which embeds the
write token in the bundle; move the upload to a backend endpoint instead. Create
a server route (e.g., POST /api/share) that reads YAML from the request, uses
the server-side env token to call @vercel/blob put (including addRandomSuffix:
true) and returns the shareable URL/ID; then refactor the client code in
main-layout.js to POST the file/YAML to /api/share and consume the returned
URL/ID, removing any use of REACT_APP_BLOB_READ_WRITE_TOKEN from the frontend.
Ensure the backend validates input and only exposes the final URL/ID to the
client.
🧹 Nitpick comments (1)
playground/src/layout/main-layout.js (1)
68-69: Consider more robust extension removal.While the current implementation works, using
.replace('.yaml', '')could potentially remove.yamlfrom other parts of the filename if it appears multiple times (though unlikely with the random suffix format). A more precise approach would remove only the file extension.🔎 Proposed refactor for more precise extension removal
-let fileName = result.url.split('/').pop(); -setId(fileName.replace('.yaml', '')) +const fileName = result.url.split('/').pop(); +setId(fileName.slice(0, -5)) // Remove last 5 chars (".yaml")Or using a more flexible approach:
-let fileName = result.url.split('/').pop(); -setId(fileName.replace('.yaml', '')) +const fileName = result.url.split('/').pop(); +const id = fileName.substring(0, fileName.lastIndexOf('.')); +setId(id)
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
playground/src/layout/main-layout.js
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: Scan Container for Vulnerabilities
- GitHub Check: Analyze (go)
- GitHub Check: Test with Coverage
- GitHub Check: Test with Coverage
| put("s.yaml", file, { | ||
| access: 'public', | ||
| token: process.env.REACT_APP_BLOB_READ_WRITE_TOKEN, | ||
| addRandomSuffix: true | ||
| }).then((result) => { |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
@vercel/blob put method addRandomSuffix option documentation
💡 Result:
Short answer: The @vercel/blob put() accepts an options.addRandomSuffix boolean. When true (the original default) a unique random suffix is appended to the pathname to avoid collisions; when false no suffix is added so the pathname is deterministic. Example:
import { put } from '@vercel/blob';
const blob = await put('avatar.jpg', file, { access: 'public', addRandomSuffix: false });
Notes: Vercel docs show this option and usage. Recent SDK changes (v1.0.0) flipped the default to addRandomSuffix: false, and overwriting behavior now requires allowOverwrite: true. [1][2][3]
Sources:
[1] Vercel Blob docs (put, addRandomSuffix).
[2] Vercel storage GitHub release notes (v1.0.0: default changed).
[3] Vercel blog/community explanation of addRandomSuffix usage.
🏁 Script executed:
# Check the actual file and surrounding context
cat -n playground/src/layout/main-layout.js | head -80Repository: Permify/permify
Length of output: 3504
Move blob upload to backend API to secure the write token.
The REACT_APP_BLOB_READ_WRITE_TOKEN environment variable is embedded in the client-side JavaScript bundle. Anyone inspecting the bundled code can extract this token, exposing write access to your blob storage and enabling arbitrary file uploads, potential storage abuse, and cost overruns.
The addRandomSuffix: true option is correctly supported by @vercel/blob and works as intended. The issue is the token exposure, not the API usage.
Create a backend API endpoint (e.g., /api/share) to handle blob uploads securely:
- Accept YAML content from the client
- Perform the blob upload server-side using the token stored in server environment variables
- Return the shareable URL/ID to the client
This eliminates the exposure of sensitive credentials in the client-side bundle.
🤖 Prompt for AI Agents
In @playground/src/layout/main-layout.js around lines 63 - 67, The client is
currently calling put("s.yaml", file, { token:
process.env.REACT_APP_BLOB_READ_WRITE_TOKEN, ... }) which embeds the write token
in the bundle; move the upload to a backend endpoint instead. Create a server
route (e.g., POST /api/share) that reads YAML from the request, uses the
server-side env token to call @vercel/blob put (including addRandomSuffix: true)
and returns the shareable URL/ID; then refactor the client code in
main-layout.js to POST the file/YAML to /api/share and consume the returned
URL/ID, removing any use of REACT_APP_BLOB_READ_WRITE_TOKEN from the frontend.
Ensure the backend validates input and only exposes the final URL/ID to the
client.
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #2725 +/- ##
=======================================
Coverage 82.56% 82.56%
=======================================
Files 74 74
Lines 8125 8125
=======================================
Hits 6708 6708
Misses 902 902
Partials 515 515 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.