Krizaka
Documentation

File upload

A drop zone that checks type, size and count, a list of uploads with preview, progress, speed and the actions each state allows, and a queue that pauses and resumes — Tus-ready without depending on it.

WebBetaMedia

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

When to use

  • To send files: a video to publish, documents to index, pictures for a gallery.
  • With useUploadQueue for large files that must survive a pause, a failure or a slow network (Tus, multipart).

When not to use

  • To take a picture or a clip with the camera in the page: media capture.Use instead: Media capture
  • To choose a picture's frame before sending it: the cropper, then the upload.Use instead: Image cropper

Installation

Install

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

Styles

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

Import

import { Dropzone, UploadList, useUploadQueue, acceptsFile, formatBytes } from "@krizaka/ui/file-upload";

Examples

Publish a video

The zone and the queue together: drop, watch the progress, pause and resume.

Drop your video here

MP4, MOV or WebM, up to 4 GB

Every state

UploadList with an upload under way, a paused one, a failed one and a finished one.

  • sunset-timelapse.mp4

    Uploading773 MB / 1.8 GB12 MB/s2 min left

  • behind-the-scenes.mov

    Paused440 MB / 620 MB

  • interview.mp4

    Failed24 MB / 240 MB

  • cover.jpg

    Uploaded820 kB

Several pictures

Up to six images of 10 MB; the refused ones are listed with their reason.

Add pictures to the gallery

JPEG, PNG or WebP — up to 6 pictures of 10 MB

Tus, resumable

useUploadQueue around a resumable client: abort on pause, continue from the offset on resume.

Drop documents to index

    Props

    Dropzone

    A zone to drop files on, with a button that opens the picker: checks type, size and count.

    PropTypeDefaultDescription
    browseLabelrequiredstring—The button that opens the file picker ("Choose a file"), passed translated.
    onFilesrequired(files: File[]) => void—Called with the files accepted (never empty).
    titlerequiredstring—The title in the zone ("Drop your video here"), passed translated.
    acceptstring—The types accepted, as the accept attribute ("video/*", "image/png,.pdf").
    capture"user" | "environment"—On a phone, opens the camera directly ("environment" the back one, "user" the front one).
    classNamestring—Classes merged on the zone.
    disabledboolean—Not available (an upload is running).
    hintstring—What is accepted, in words ("MP4 or MOV, up to 4 GB").
    iconReactNode—An icon instead of the upload glyph.
    maxFilesnumber—The most files at once (1 unless multiple).
    maxSizenumber—The largest file, in bytes.
    multipleboolean—Several files at once.
    onReject((rejections: FileRejection[]) => void)—Called with the files refused and why (show refusalLabel's words, or your own).
    refusalLabel((rejection: FileRejection) => string)—The words of a refusal, shown in the zone: (r) => r.file.name + " is too large". Without it, nothing is shown.

    UploadList

    The files being sent: preview, size, progress, speed and time left, and the actions each state allows.

    PropTypeDefaultDescription
    itemsrequiredreadonly UploadItem[]—The uploads, as useUploadQueue gives them (or your own state).
    classNamestring—Classes merged on the list.
    labelsPartial<UploadListLabels>—The words, passed translated; English by default.
    localestringenThe locale of sizes and speeds. Default "en".
    onCancel((id: string) => void)—Stops an upload under way and drops it.
    onPause((id: string) => void)—Pauses an upload (shown while it uploads, when given).
    onRemove((id: string) => void)—Drops a finished or failed one from the list.
    onResume((id: string) => void)—Resumes a paused one.
    onRetry((id: string) => void)—Tries a failed one again.

    Accessibility

    • The zone's button is described by the title and the hint; the file input itself stays out of the tab order.
    • Each upload's progress is a progressbar named by the file; a failure is announced (role="alert").
    • Every action is a button named with the file (“Pause clip.mp4”).

    Keyboard

    KeysAction
    Enter / SpaceOn the button: open the file picker (dropping is never the only way).

    Best practices

    • Say what is accepted in hint (“MP4 or MOV, up to 4 GB”) and enforce it with accept and maxSize.
    • Explain each refusal with refusalLabel (“clip.avi is not a supported format”).
    • Wrap your upload client in upload(file, { signal, onProgress, resumed }): abort on signal, resume from the offset when resumed.
    • Revoke previews you create yourself; useUploadQueue revokes its own.

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

    Audio player

    A sound with a waveform you seek on — the peaks given by the server or computed once with Web Audio — play, time and speed, paused when it leaves the screen.

    Image cropper

    A fixed frame — square, round, 9:16, a banner — over a picture or a video the person drags and zooms; a focus point and a zoom out, cropRect for the pixels.

    On this page

    When to useInstallationExamplesPropsAccessibilityBest practicesRelated components