File Upload

Plain HTML — CSS classes

The Tailwind v4 plugin. Works in any framework or none — Rails, Django, PHP, Go, a static file. This path ships no JavaScript, so File Upload is styled but inert: its behavior comes from dropzone. For that behavior with no framework, use the node-tree path below.

/* in your CSS */
@import "tailwindcss";
@plugin "@wizeworks/silicaui";

Root class file-upload, with 9 modifiers:

• .file-upload
• .file-upload-item
• .file-upload-item-icon
• .file-upload-item-meta
• .file-upload-item-name
• .file-upload-item-remove
• .file-upload-item-size
• .file-upload-item-thumb
• .file-upload-list
• .file-upload-rejections

React

Typed components over those same classes, with behavior and accessibility from Base UI.

npm i @wizeworks/silicaui-react

import { FileUpload } from "@wizeworks/silicaui-react";

Props

Source of the demo above

The exact file that renders the examples above, so it can never drift from them. It imports a few of this site’s own layout helpers (../lib/…), so read it for the component calls rather than copying it whole.

import { FileUpload } from "@wizeworks/silicaui-react";
import { Section } from "../lib/Section";

export function FileUploadDemo() {
    return (
        <Section title="Real use · attachments with previews, accept/maxSize filtering">
            <div className="max-w-md">
                <FileUpload
                    accept="image/*,.pdf"
                    maxSize={2 * 1024 * 1024}
                    hint="Images or PDF, up to 2MB each"
                />
            </div>
        </Section>
    );
}

Vanilla — node tree to HTML

The framework-neutral form of File Upload. Build a node tree, project it with toHtml(), and let the zero-dependency runtime hydrate it. This is the path for generated or user-authored documents — a site builder, CMS output, a static export.

npm i @wizeworks/silicaui-html @wizeworks/silicaui-behaviors

import { atom, toHtml } from "@wizeworks/silicaui-html";

const node = atom("FileUpload", "file-upload", { /* props */ }, [/* children */]);
const markup = toHtml(node);

Styling on this path is the class string in the second argument — the same classes as the Plain HTML section above. There is no color prop here; write "file-upload file-upload-primary" rather than passing a colour as a prop.

Takes children

yes

Hydrated by

dropzone

Load @wizeworks/silicaui-behaviors on the page or this markup renders correctly and does nothing.