Skip to content

fix(ui): persist folder upload input across page refresh#551

Open
MunemHashmi wants to merge 1 commit intoopenclaw:mainfrom
MunemHashmi:fix/58-upload-folder-input
Open

fix(ui): persist folder upload input across page refresh#551
MunemHashmi wants to merge 1 commit intoopenclaw:mainfrom
MunemHashmi:fix/58-upload-folder-input

Conversation

@MunemHashmi
Copy link

Summary

Fixes #58

After a page refresh on /upload, the file input lost its webkitdirectory attribute and switched from folder selection mode to individual file mode. This made it impossible to upload multi-file skills via the browser after refreshing.

Root cause

The webkitdirectory and directory attributes were set via:

  1. Non-standard JSX props (@ts-expect-error) — React may strip these during hydration
  2. A useEffect([], ...) fallback — doesn't re-fire when React hydrates (rather than fresh-mounts) the component after a page refresh

Fix

Replaced both approaches with a ref callback that imperatively sets webkitdirectory and directory every time the input element is attached to the DOM. This is reliable across initial render, hydration, and re-renders.

Test plan

  • bun run test -- src/__tests__/upload.route.test.tsx — 8/8 pass (existing test marks the input for folder uploads still passes)
  • bun run lint — 0 warnings, 0 errors

…penclaw#58)

Replace the useEffect + useRef approach for setting webkitdirectory/
directory attributes with a ref callback that sets the attributes
every time the input element is mounted. This ensures folder selection
mode persists after page refresh, where React hydration could strip
the non-standard attributes.

Also removes the @ts-expect-error JSX props since the attributes are
now set imperatively via the ref callback.
@vercel
Copy link
Contributor

vercel bot commented Feb 27, 2026

@MunemHashmi is attempting to deploy a commit to the Amantus Machina Team on Vercel.

A member of the Team first needs to authorize it.

@greptile-apps
Copy link
Contributor

greptile-apps bot commented Feb 27, 2026

Greptile Summary

Fixes folder upload input losing webkitdirectory attribute after page refresh by replacing JSX props and useEffect with a ref callback that imperatively sets attributes on every DOM attachment.

  • Removed non-standard JSX attributes (webkitdirectory, directory) with @ts-expect-error
  • Removed useEffect([], ...) that only fired on initial mount, not hydration
  • Introduced setFileInputRef callback that sets attributes via setAttribute whenever the input is attached to the DOM
  • Ensures folder selection mode persists across initial render, hydration, and re-renders
  • All tests pass, no lint errors

Confidence Score: 5/5

  • This PR is safe to merge with no risk
  • The fix correctly addresses the root cause using the recommended React pattern (ref callbacks) for setting non-standard DOM attributes. Tests pass, no lint errors, and the approach is both sound and well-documented with clear comments.
  • No files require special attention

Last reviewed commit: 55100fc

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

Successfully merging this pull request may close these issues.

Publish: Cannot upload a multi-file skill

1 participant