@fluixi-ui/file-upload

Headless file upload / dropzone for Fluixi UI.

Holds the selected File[] (controlled or uncontrolled), enforces accept / maxSize / maxFiles, and supports both click-to-browse and drag-and-drop.

import {
  FileUpload, FileUploadDropzone, FileUploadTrigger,
  useFileUpload, formatFileSize,
} from '@fluixi-ui/file-upload';
import { For } from '@fluixi/core';

function Files() {
  const up = useFileUpload();
  return (
    <For each={up.files()}>
      {(f) => (
        <div>
          {f.name} · {formatFileSize(f.size)}
          <button onClick={() => up.removeFile(f)}>×</button>
        </div>
      )}
    </For>
  );
}

<FileUpload accept="image/*" multiple maxSize={5_000_000} onChange={setFiles}>
  <FileUploadDropzone>Drop images here, or click to browse</FileUploadDropzone>
  <Files />
</FileUpload>

Parts

• FileUpload — root. Props: value/defaultValue/onChange (File[]), accept, multiple, maxSize (bytes), maxFiles, disabled, onReject.
• FileUploadDropzone — click / Enter / Space opens the dialog; accepts drops (data-dragging while hovering a drag).
• FileUploadTrigger — a button that opens the dialog.
• useFileUpload() — { files, addFiles, removeFile, clearFiles, open, isDragging, disabled }.
• formatFileSize(bytes) — helper for rendering sizes.

Styling

Styled by data-* in @fluixi-ui/tokens ([data-file-upload-dropzone]), reflecting data-dragging / data-disabled.