Staffbase Design Systemv21.2.0

Components

File Upload

Manages file upload states including drag-and-drop, loading, error, and image preview. Built with the compound component pattern for flexible composition.

Replacing soon
GitHub

Anatomy

Anatomy
import {FileUpload} from '@staffbase/design';

<FileUpload>
  <FileUpload.Wrapper />
  <FileUpload.Text />
  <FileUpload.Preview />
  <FileUpload.Overlay />
</FileUpload>;

Examples

Loading state

Set variant="loading" while the file is being uploaded. Use a LoadingSpinner inside to communicate progress.

Error state

Set variant="error" when the upload fails. Use FileUpload.Text with variant="critical" to surface the error.

Image preview

Use FileUpload.Preview with variant="hasImage" to display a thumbnail with optional edit and delete actions.

Anatomy
import {FileUpload} from '@staffbase/design';

<FileUpload onDrop={onDrop} variant="hasImage">
  <FileUpload.Wrapper showOnDrag={false}>
    <FileUpload.Preview previewUrl="https://example.com/image.jpg" onEdit={handleEdit} onDelete={handleDelete} />
  </FileUpload.Wrapper>
  <FileUpload.Wrapper showOnDrag={true}>
    <FileUpload.Preview previewUrl="https://example.com/image.jpg">
      <FileUpload.Overlay>Replace</FileUpload.Overlay>
    </FileUpload.Preview>
  </FileUpload.Wrapper>
</FileUpload>;

Opening the file chooser programmatically

Use a ref to call openFileChooser() from a custom trigger button.

Anatomy
import {useRef} from 'react';
import {FileUpload, type FileUploadRef} from '@staffbase/design';

const fileUploadRef = useRef<FileUploadRef>(null);

<Button onClick={() => fileUploadRef.current?.openFileChooser()}>
  Choose file
</Button>

<FileUpload ref={fileUploadRef} onDrop={onDrop} variant="default">
  {/* ... */}
</FileUpload>

API reference

FileUpload

Note: We have identified accessibility concerns on this component. Use with caution and test thoroughly with assistive technologies.

NameTypeDescription
onDrop
DropzoneOptions['onDrop']
Called with the accepted files when they are dropped onto the dropzone.
variant
defaultloadingdraggingerrorhasImage
Controls the visual border style of the component.
children
ReactNode
Content to display inside the dropzone. Use `FileUpload.Wrapper` to differentiate drag and non-drag states.
disabled
boolean
Disables the dropzone.
accept
DropzoneOptions['accept']
Restricts accepted file types, e.g. `{'image/png': ['.png']}`.
ref
MutableRefObject<FileUploadRef>
Ref exposing `openFileChooser()` to programmatically open the native file picker.
className
string
CSS class applied to the root element.

FileUpload.Wrapper

Conditionally renders its children based on whether a drag is in progress.

NameTypeDescription
showOnDrag
boolean
When `true`, renders children only while a drag is active. When `false`, renders children at all other times.
children
ReactNode
Content to show in the relevant drag state.

FileUpload.Text

NameTypeDescription
children
string
The text content.
variant
defaultcriticalinfoneutral
Visual style of the text.
Default:'default'

FileUpload.Preview

Displays a background image thumbnail with optional action buttons.

NameTypeDescription
previewUrl
string
URL of the image to display as the preview background.
onEdit
() => void
When provided, renders an edit icon button that calls this handler.
onDelete
() => void
When provided, renders a delete icon button that calls this handler.
additionalButtons
ReactElement
Additional action buttons rendered alongside edit and delete.
children
ReactNode
Overlay content, such as `FileUpload.Overlay`.

FileUpload.Overlay

A full-size overlay rendered on top of FileUpload.Preview, typically used to show a drop hint during drag.

NameTypeDescription
children
ReactNode
Content displayed inside the overlay.