Upload queue

A queue of files that stays on screen: each row appears at once, says in words what it is doing, shows live progress while it works, and ends in a result chip; a non-blocking tray holds it.

Web · ✓Mobile · ✗ to buildDesktop · ✓BetaFeedback

import { UploadQueue, TaskTray, QueueStatus, tally } from "@krizaka/ui/upload-queue";

2 en cours · 1 terminé · 1 en échec

bail-2026.pdf
Vérification des règles…
annexe-b.pdf
Lecture…
avenant.pdf3 constats
Terminé
scan.pdf
Illisible : essayez un PDF texte

Web only — React, from @krizaka/ui/upload-queue. Beta: its API may still change in a minor version.

Mobile · ✗ to build. The Expo apps get the same queue on @krizaka/ui/native. issue #511

Why it is here. Used by Yomizaka.

When to use

Several files are checked, encoded or imported at once and the user keeps browsing.
Progress comes from live events (Orazaka's run events): the row shows their words.

When not to use

One file in a form, with its own progress.Use instead: File upload
A task whose progress is a single percentage.Use instead: Progress

Installation

Install

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Import

import { UploadQueue, TaskTray, QueueStatus, tally } from "@krizaka/ui/upload-queue";

Examples

Queue

Checking, reading, done and failed rows.

2 en cours · 1 terminé · 1 en échec

bail-2026.pdf
Vérification des règles…
annexe-b.pdf
Lecture…
avenant.pdf3 constats
Terminé
scan.pdf
Illisible : essayez un PDF texte

Tray

The non-blocking tray that folds away.

Vérifications

1 en cours · 1 terminée

bail-2026.pdf
Vérification des règles…
avenant.pdfConforme
Terminé

Props

TaskTray

A non-blocking tray for a queue: the user keeps browsing. Bottom edge on a phone, bottom-right from sm.

Prop	Type	Default	Description
`openLabel`required	`string`	—	… and while folded (“Show”).
`summary`required	`string`	—	The tally in words (“1 running · 2 done”).
`title`required	`string`	—	The tray's name (“Checks”).
`toggleLabel`required	`string`	—	The fold button's name while open (“Collapse”).
`defaultOpen`	`boolean`	`true`	Starts open.

UploadQueue

The files being checked, one row each. Changes are announced politely.

Prop	Type	Default	Description
`items`required	`readonly UploadQueueItem[]`	—	The rows, in the order they were added.
`label`required	`string`	—	The list's accessible name (“Checks in progress”) — passed translated.

Accessibility

The list is named by label and announced politely.
A working row's progress is a progressbar named by the file.
Failures are said in words, never by colour alone.

Keyboard

Keys	Action
`Enter / Space`	Folds or opens the tray.

Best practices

Show the row at once (optimistic), then update it from the events: queued, reading, checking, done, failed.
Say what it does in words (statusText, translated): a bare spinner says nothing.
Put the result in result (a chip) and one quiet action in trailing (keep, retry).
Only working rows move: the shimmer and the live progress stop with the work; reduced motion stops them.
TaskTray is the container: a sheet on a phone, bottom-right from sm.

Generated from the code of @krizaka/ui 3.63.1: its meta.ts, its examples and its types.Edit this documentation on GitHub