Skip to content
BigBang

Popular

    ↑↓Navigate↵OpenEscClose
    TR

    Components

    FileDropzone

    A drop area for files, with a file chooser and a list of the chosen files.

    Storybook
    Storybook
    Source
    Source

    Installation

    Section titled “Installation”
    Package
    @bigbang/ui
    Import
    import { FileDropzone } from '@bigbang/ui';
    Source
    FileDropzone.tsx
    Storybook
    FileDropzone · Playground

    FileDropzone is in the @bigbang/ui package.

    import { FileDropzone } from '@bigbang/ui';
    

    <FileDropzone label="Documents" accept=".pdf" maxSize={2_000_000} multiple files={files} onFilesChange={setFiles} />;

    The acceptsFile(file, accept) and formatBytes(bytes, locale) helpers are exported too.

    Props

    Section titled “Props”
    labelRequired
    Description
    The visible label above the zone; it names the file input.
    Type
    string
    description
    Description
    Help under the prompt, such as the accepted types and the size limit. Linked with aria-describedby.
    Type
    ReactNode
    error
    Description
    When set, the zone is invalid and the message is read with it. Rejected files get built-in messages without it.
    Type
    string
    required
    Description
    A file is required: the label is marked and the input reports it.
    Type
    boolean
    Default
    false
    accept
    Description
    Accepted types, as for <input type="file">: MIME types, type/* or extensions such as .pdf.
    Type
    string
    multiple
    Description
    Allows more than one file.
    Type
    boolean
    Default
    false
    maxSize
    Description
    Largest file size in bytes; larger files are rejected with a message.
    Type
    number
    maxFiles
    Description
    Most files the list can hold; extra files are rejected with a message.
    Type
    number
    files
    Description
    Chosen files when you control them. Pass them with onFilesChange.
    Type
    readonly File[]
    onFilesChange
    Description
    Called with the new list when files are added or removed.
    Type
    (files: File[]) => void
    onReject
    Description
    Called with the files that were not added and why.
    Type
    (rejections: FileRejection[]) => void
    disabled
    Description
    Turns off dropping, choosing and removing.
    Type
    boolean
    Default
    false
    fileStatus
    Description
    The upload state of each file, such as (file) => uploads.get(file): a bar while it uploads, a check when it is done, the message when it fails.
    Type
    (file: File) => FileUploadStatus
    onRetry
    Description
    Called when the user asks to upload a failed file again; a retry button shows on failed files while it or onUpload is set.
    Type
    (file: File) => void
    onUpload
    Description
    Uploads one accepted file; the component never makes a network request itself. It is called for each file as soon as it is added, and again on retry. Abort the request when signal aborts: removing the file cancels its upload. Resolve when the upload is done; reject with an Error whose message is shown with the file. Rejected files (type, size, count) never reach it. Without it, the component only chooses and checks files, and the form submits them.
    Type
    (file: File, signal: AbortSignal) => Promise<unknown>
    name
    Description
    Field name; the chosen files are submitted with the form where the browser allows it.
    Type
    string
    className
    Description
    Added to the root element; use it for layout only.
    Type
    string

    Data attributes

    Section titled “Data attributes”
    • data-component="file-dropzone": on the root element.
    • data-part: label, zone, icon, prompt, trigger, description, error, list, item.
    • On the zone: data-dragging, data-invalid, data-disabled.
    • data-status (uploading, done, error) on a file row. The FileUploadStatus type is exported.