FileUpload

A file dropzone driven by seed-design's headless engine, so the behaviour is theirs by construction rather than reimplemented: drag state, typed rejection reasons, and a per-file status of pending / uploading / success / error. Controlled or uncontrolled, the same way every other crisp component is.

The copy and type are measured — "No files" at 16/20 weight 600, the hint line at 14/20 weight 500 — and the dashed boundary is crisp's own measured affordance from the sidebar's "New list" control, added here because the dropzone is only part of its surrounding surface, not the whole drop target.

Installation

npm install @crisp-ui-kit/crisp

Props

FileUploadItem

One row of FileUpload's own accepted-file list (crisp#965), exported on its own: FileUpload internally only lists File objects from the current browser session, so a caller with already-persisted attachments (fetched from a server, never a real File) has no acceptedFileEntries to hand it and renders this identical row for its own list instead. Omit onRemove for a non-removable row.

Examples

Persisted attachments

icon and href/download/onClick (carrot-systems/crisp#1043) are both opt-in and both absent from FileUpload's own session list above — pass them when the row is a real, already-uploaded attachment instead.

Upload states

status is whatever you set it to: the engine hands you updateFileEntryStatus in onFileAccept so the component reflects your transfer, rather than pretending to own it.

Usage

import { FileUpload } from "@crisp-ui-kit/crisp";

<FileUpload
  accept="image/*"
  maxFiles={5}
  maxFileSize={5_000_000}
  onFileAccept={(entries, { updateFileEntryStatus }) => {
    for (const entry of entries) {
      upload(entry.file, {
        onProgress: (progress) =>
          updateFileEntryStatus(entry.id, { status: "uploading", progress }),
        onDone: () => updateFileEntryStatus(entry.id, { status: "success" }),
        onError: () => updateFileEntryStatus(entry.id, { status: "error" }),
      });
    }
  }}
/>;

FileError is "FILE_TOO_LARGE" | "FILE_TOO_SMALL" | "TOO_MANY_FILES" | "INVALID_TYPE", plus any string your own validate returns.