A versatile file upload component that enables users to upload files through drag-and-drop or file browsing. It supports multiple files with customizable validation, file size limits, and image previews.
Drag and drop your images here, or click to browse.
1"use client";
2
3import { FileUploader } from "@/components/component-x/file-upload";
4import { useState } from "react";
5
6export function FileUploaderPreview() {
7const [files, setFiles] = useState<File[]>([]);
8
9return (
10 <div className="w-full h-full overflow-y-auto p-4">
11 <FileUploader
12 value={files}
13 onChange={setFiles}
14 label="Upload images"
15 description="Drag and drop your images here, or click to browse."
16 accept="image/*"
17 maxFiles={5}
18 />
19 </div>
20);
21}
22Run the following command to add the component:
npx cx add file-uploader