@utsuk/file-upload

React file upload component with button and drag-and-drop modes.

Install (consumer app)

npm install @utsuk/file-upload

Peer dependencies:

• react >= 18
• react-dom >= 18

Import styles

The package publishes a default theme stylesheet.

import "@utsuk/file-upload/styles";

Basic usage (presigned upload)

import { FileUpload } from "@utsuk/file-upload";
import "@utsuk/file-upload/styles";

export function UploadPanel() {
  return (
    <FileUpload
      accepted_file_types={[".pdf", ".jpg", ".png"]}
      allow_multiple
      background_upload
      upload_url={process.env.NEXT_PUBLIC_PRESIGN_URL}
      drag_drop
      on_upload_progress={(file, percent) => console.log(file.name, percent)}
      on_all_uploads_complete={(results, errors) => console.log({ results, errors })}
    />
  );
}

Key props

• accepted_file_types: string[] | "*" (required)
• allow_multiple: allow multi-select and multi-upload
• background_upload: when true, starts uploading automatically after selection
• upload_url: server endpoint for POST /presign
• upload_headers: object or async function returning headers (invoked per attempt, including retries)
• upload_concurrency: max simultaneous uploads (default 3)
• upload_retry: { max_attempts, initial_delay_ms } (default 3 attempts / 1000ms)
• abort_on_remove: abort in-flight XHR on remove (default true)
• image_constraints: { min/max width/height, aspect_ratio } (client-side only in v1)
• style / class_names: token theming + additive class hooks

Local development (this monorepo)

From utsuk-file-upload/:

corepack pnpm nx build file-upload
corepack pnpm nx test file-upload
corepack pnpm nx typecheck file-upload