How do I use File Upload Field Input in my project?

Copy the FileUploadFieldInput source code from https://opensourceui.in/components/file-upload-field-input, add lib/cn.ts if needed, install clsx tailwind-merge and lucide-react, then import and render the component in your React or Next.js app.

Can I use File Upload Field Input in a commercial project?

Yes. Opensource UI is MIT licensed. You can use FileUploadFieldInput in personal and commercial projects without UI attribution.

Back to Inputs Components / Inputs

File Upload Field Input

Card-style file upload with drag-and-drop zone, browse button, format/size hints, typed file rows, and remove actions.

Preview

Upload document

Drop your file hereDrag & drop or click anywhere

No file selected

PDF, PNG, JPG, JPEG · max 5.0 MB

PDFPNGJPGJPEG

PDF, PNG, or JPG up to 5 MB.

Setup

How to use

Free for personal and commercial use. No UI attribution required. Include the MIT copyright notice when copying component source into your project. Read the MIT license.

1
Run in your terminal:
$npm install clsx tailwind-merge lucide-react
2
Copy lib/cn.ts below. Skip if you already have cn().
3
Copy the code below and create components/inputs/file-upload-field-input.tsx in your project.
4
Import and render:
Example
import { FileUploadFieldInput } from "@/components/inputs/file-upload-field-input";
<FileUploadFieldInput accept=".pdf,.png" multiple maxFiles={3} onFilesChange={setFiles} />

lib/cn.ts

1
2
3
import { cn } from '@/lib/cn';
 
// Full source is available in the repository checkout.

components/inputs/file-upload-field-input.tsx

1
2
// Full source: components/components/inputs/file-upload-field-input.tsx
// The Cloudflare worker does not expose the source tree at request time.

Back to Inputs Components / Inputs

File Upload Field Input

Card-style file upload with drag-and-drop zone, browse button, format/size hints, typed file rows, and remove actions.

Preview

Upload document

Drop your file hereDrag & drop or click anywhere

No file selected

PDF, PNG, JPG, JPEG · max 5.0 MB

PDFPNGJPGJPEG

PDF, PNG, or JPG up to 5 MB.

Setup

How to use

Free for personal and commercial use. No UI attribution required. Include the MIT copyright notice when copying component source into your project. Read the MIT license.

1
Run in your terminal:
$npm install clsx tailwind-merge lucide-react
2
Copy lib/cn.ts below. Skip if you already have cn().
3
Copy the code below and create components/inputs/file-upload-field-input.tsx in your project.
4
Import and render:
Example
import { FileUploadFieldInput } from "@/components/inputs/file-upload-field-input";
<FileUploadFieldInput accept=".pdf,.png" multiple maxFiles={3} onFilesChange={setFiles} />

lib/cn.ts

1
2
3
import { cn } from '@/lib/cn';
 
// Full source is available in the repository checkout.

components/inputs/file-upload-field-input.tsx

1
2
// Full source: components/components/inputs/file-upload-field-input.tsx
// The Cloudflare worker does not expose the source tree at request time.