Skip to content

feat(main-layout): add option to include random suffix in file upload #2725

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.

Sign up for GitHub

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

Merged
omer-topal merged 1 commit into from
Jan 6, 2026
Merged

feat(main-layout): add option to include random suffix in file upload #2725

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion playground/src/layout/main-layout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,11 @@ const MainLayout = ({children, ...rest}) => {
scenarios: scenarios
})
const file = new File([yamlString], `s.yaml`, {type: 'text/x-yaml'});
put("s.yaml", file, {access: 'public', token: process.env.REACT_APP_BLOB_READ_WRITE_TOKEN}).then((result) => {
put("s.yaml", file, {
access: 'public',
token: process.env.REACT_APP_BLOB_READ_WRITE_TOKEN,
addRandomSuffix: true
}).then((result) => {
Comment on lines +63 to +67
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Jan 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 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 -80

Repository: 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.

let fileName = result.url.split('/').pop();
setId(fileName.replace('.yaml', ''))
}).catch((error) => {
Expand Down