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.

WebBêtaMédias

Web uniquement — React, depuis @krizaka/ui/file-upload. Bêta : son API peut encore changer à une version mineure.

Quand l’utiliser

  • 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).

Quand ne pas l’utiliser

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

Installation

Installer

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

Styles

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

Importer

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

Exemples

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.

    PropTypeDéfautDescription
    browseLabelrequisstring—The button that opens the file picker ("Choose a file"), passed translated.
    onFilesrequis(files: File[]) => void—Called with the files accepted (never empty).
    titlerequisstring—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.

    PropTypeDéfautDescription
    itemsrequisreadonly 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.

    Accessibilité

    • 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”).

    Clavier

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

    Bonnes pratiques

    • 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.

    Générée depuis le code de @krizaka/ui 2.4.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur 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.

    Sur cette page

    Quand l’utiliserInstallationExemplesPropsAccessibilitéBonnes pratiquesComposants liés