File Upload
Document upload dropzone.
import { FileUpload } from "@/registry/new-york/items/manpowerhub-file-upload/components/file-upload";export function ManpowerhubFileUploadBasic() { return ( <div className="w-full max-w-md p-4"> <FileUpload description="Passport, visa, medical cert. Max 10MB each." /> </div> );}Installation
Section titled “Installation”This installation provides support for all official Shadcn icon libraries. The component is otherwise identical to the non-experimental installation.
Icon support is experimental and may not be fully stable since it uses internal Shadcn APIs.
This component relies on other items which must be installed first.
Copy and paste the following code into your project.
components/ui/file-upload.tsx
import * as React from "react";import { Upload } from "lucide-react";
import { cn } from "@/lib/utils";
export interface FileUploadProps extends Omit< React.ComponentProps<"label">, "title"> { title?: React.ReactNode; description?: React.ReactNode; accept?: string; multiple?: boolean; onFilesSelected?: (files: FileList) => void;}
function FileUpload({ className, title = "Drop files or click to upload", description, accept, multiple, onFilesSelected, ...props}: FileUploadProps) { const inputRef = React.useRef<HTMLInputElement>(null);
return ( <label data-slot="file-upload" className={cn( "block cursor-pointer rounded-[var(--r-sm)] border-[1.5px] border-dashed border-[var(--color-border-strong)] bg-[var(--surface-2)] p-5 text-center transition-colors hover:border-[var(--brand)]", className, )} onDragOver={(e) => { e.preventDefault(); e.stopPropagation(); }} onDrop={(e) => { e.preventDefault(); e.stopPropagation(); if (e.dataTransfer.files.length && onFilesSelected) { onFilesSelected(e.dataTransfer.files); } }} {...props} > <input ref={inputRef} type="file" className="sr-only" accept={accept} multiple={multiple} onChange={(e) => { if (e.target.files?.length && onFilesSelected) { onFilesSelected(e.target.files); } }} /> <Upload className="mx-auto mb-2 size-5 text-[var(--text-3)]" /> <div className="mb-0.5 text-[13px] font-medium text-[var(--text-2)]"> {title} </div> {description ? ( <p className="text-[11.5px] text-[var(--text-3)]">{description}</p> ) : null} </label> );}
export { FileUpload };Update the import paths to match your project setup.
Install the ManpowerHub theme first, then add this file upload:
npx shadcn@latest add @woxcn/manpowerhub-file-upload