Paste Upload Area
A wrapper component that enables file uploads via paste events.
Preview
Installation
npx shadcn@latest add @better-upload/paste-upload-areaCopy and paste the following code into your project.
import type { UploadHookControl } from '@better-upload/client';
type PasteUploadAreaProps = {
children: React.ReactNode;
control: UploadHookControl<true>;
metadata?: Record<string, unknown>;
uploadOverride?: (
...args: Parameters<UploadHookControl<true>['upload']>
) => void;
// Add any additional props you need.
};
export function PasteUploadArea({
children,
control: { upload, isPending },
metadata,
uploadOverride,
}: PasteUploadAreaProps) {
return (
<div
onPasteCapture={(e) => {
const files = e.clipboardData.files;
if (files.length > 0 && !isPending) {
if (uploadOverride) {
uploadOverride(files, { metadata });
} else {
upload(files, { metadata });
}
}
}}
>
{children}
</div>
);
}Update the import paths to match your project setup.
Usage
The <PasteUploadArea /> component should be used with the useUploadFiles hook.
'use client';
import { useUploadFiles } from '@better-upload/client';
import { PasteUploadArea } from '@/components/ui/paste-upload-area';
export function Uploader() {
const { control, isPending } = useUploadFiles({
route: 'images',
});
return (
<PasteUploadArea control={control}>
<input placeholder="Paste to upload" disabled={isPending} />
</PasteUploadArea>
);
}Files pasted within any child element of the component will be uploaded to the desired route.
Props
Prop
Type
Default