File upload
Single-file picker with a drag-and-drop target, format guidance, selected-file summary, and remove action.
Preview
Knowledge source Controlled file selection with a visible accepted-format hint.
<div class="nx-upload"><label class="nx-upload__dropzone"><span class="nx-upload__icon" aria-hidden="true">↑</span><strong class="nx-upload__title">Choose a knowledge source</strong><span class="nx-upload__hint">Drop a file here or browse</span><span class="nx-upload__formats">PDF, TXT, MD · up to 25 MB</span><input class="nx-upload__input" type="file" accept=".pdf,.txt,.md"></label></div>const [file, setFile] = useState<File | null>(null);
<NxFileUpload
title="Choose a knowledge source"
hint="Drop a file here or browse"
formats="PDF, TXT, MD · up to 25 MB"
accept=".pdf,.txt,.md"
file={file}
onFileChange={setFile}
removeLabel="Remove selected file"
/>API
React props (NxKit)
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
title | ReactNode | — | Required | Primary picker instruction. |
hint | ReactNode | undefined | Short drop/browse instruction. | |
formats | ReactNode | undefined | Accepted formats and size limit shown to users. | |
file | File|null | — | Required | Controlled selected file. |
onFileChange | (file:File|null)=>void | — | Required | Receives picker, drop, and remove changes. |
removeLabel | string | — | Required | Accessible name for the remove button. |
accept | string | undefined | Native picker accept filter; server-side validation remains required. |
Classes
| Class | Description |
|---|---|
.nx-upload | Stack wrapper |
.nx-upload__dropzone | Dashed, accent-reactive picker target |
.nx-upload__input | Visually hidden native file input |
.nx-upload__file | Selected-file summary |
.nx-upload__remove | Accessible remove action |
States
dragging
disabled
Accessibility
- The native file input remains in the accessibility tree; :focus-within paints a visible focus ring around the whole drop target.
- Visible format and size guidance does not replace server-side type/size validation or a surfaced error message.
Do / Don’t
- Do: State accepted formats and the size limit before selection, then show the chosen filename and size.Don’t: Don't make drag-and-drop the only path — keep the native picker reachable by click and keyboard.