Uplofile is open sourceStar on GitHub

HiddenInput

A hidden input that holds file data for form submissions.

Usage

Include this component to make files available in form submissions:

1import { UplofileRoot, UplofileHiddenInput } from "@/components/ui/uplofile";
2
3export default function HiddenInputDemo() {
4 const handleSubmit = (e: React.FormEvent) => {
5 e.preventDefault();
6 const formData = new FormData(e.target as HTMLFormElement);
7 console.log("Form data:", formData.get("attachments"));
8 };
9
10 return (
11 <form onSubmit={handleSubmit}>
12 <UplofileRoot upload={async () => ({ url: "" })}>
13 {/* ... other components */}
14 <UplofileHiddenInput name="attachments" />
15 </UplofileRoot>
16 <button type="submit">Submit</button>
17 </form>
18 );
19}

Props

PropTypeDescription
namestringForm field name. If not provided, it uses the name from UplofileRoot.