Upload Button

A shadcn-styled button that opens the file picker for single- or multi-file uploads.

Preview

"use client";import { UploadButton } from "@dimah-s3/ui";export function UploadButtonDemo() {  return (    <UploadButton      objectKey={(file) => `demo/${Date.now()}-${file.name}`}      maxFiles={5}      concurrentFiles={2}      accept={["image/*", ".pdf", ".txt"]}      maxFileSize={25 * 1024 * 1024}      label="Upload files"      toast={true}      showStatus={true}      tooltipText="Upload up to 5 files"    />  );}

Install

npm i @dimah-s3/ui shadcn

app/globals.css

@import "shadcn/tailwind.css";
@import "@dimah-s3/ui/styles.css";

/* + shadcn theme variables */

shadcn theme variables must be in globals.css.

Mount the toaster once in your root layout:

app/layout.tsx

import { Toaster } from "@dimah-s3/ui";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Toaster />
      </body>
    </html>
  );
}

Already using shadcn toast for your own messages? Mount both — rename one import (Toaster as DimahToaster). They are independent; your code keeps import { toast } from "@/components/ui/toast" and toast.add({ … }).

Props

Prop

Type

accept and maxFileSize are enforced client-side only. Always enforce the same limits in upload.presignGuard on the server.

Button appearance

UploadButton, DownloadButton, ProgressDownloadButton, and DeleteButton share optional shadcn button props:

Prop	Description
`variant`	shadcn button variant (defaults vary per component)
`size`	shadcn button size (`default` if omitted)
`buttonClassName`	Extra classes on the trigger button

<UploadButton variant="secondary" size="sm" objectKey="uploads/file" />
<DownloadButton variant="ghost" objectKey="uploads/report.pdf" />
<DeleteButton variant="outline" objectKey="uploads/report.pdf" />

Headless alternative

Use useUploadControls when you need full control over the UI.

Preview

Install

Props

Button appearance

Headless alternative

On this page