Components/File Upload & Dropzone

File Upload & Dropzone

Tier 2: Light-DOM

Drag-and-drop file uploader with clipboard paste, validation, and file list

Installation

$npx nnui add file-upload

copy

Interactive Preview & Code

📁

Drag and drop files here, or

Supports images, PDF, and ZIP up to 10 MB

<ui-file-upload accept="image/*,.pdf,.zip" max-size="10485760" multiple style="width: 100%; max-width: 500px;">
              <div data-part="dropzone">
                <div style="font-size: 2rem; margin-bottom: 0.5rem;">📁</div>
                <p style="margin: 0; font-weight: 500;">Drag and drop files here, or <button data-part="trigger" type="button" class="ui-button ui-button--link">browse files</button></p>
                <p style="font-size: 0.75rem; color: var(--ui-text-muted); margin-top: 0.35rem;">Supports images, PDF, and ZIP up to 10 MB</p>
              </div>
              <ul data-part="file-list" style="list-style: none; margin: 1rem 0 0 0; padding: 0;"></ul>
            </ui-file-upload>

import React, { useState } from 'react';
import 'nnui-kit'; // Registers universal Light-DOM elements

export default function FileuploaddropzoneDemo() {
  const [tab, setTab] = useState('all');
  const [val, setVal] = useState(50);
  const [selected, setSelected] = useState('');
  const [query, setQuery] = useState('');

  return (
    <ui-file-upload accept="image/*,.pdf,.zip" max-size="10485760" multiple style="width: 100%; max-width: 500px;">
                  <div data-part="dropzone">
                    <div style="font-size: 2rem; margin-bottom: 0.5rem;">📁</div>
                    <p style="margin: 0; font-weight: 500;">Drag and drop files here, or <button data-part="trigger" type="button" className="ui-button ui-button--link">browse files</button></p>
                    <p style="font-size: 0.75rem; color: var(--ui-text-muted); margin-top: 0.35rem;">Supports images, PDF, and ZIP up to 10 MB</p>
                  </div>
                  <ul data-part="file-list" style="list-style: none; margin: 1rem 0 0 0; padding: 0;"></ul>
                </ui-file-upload>
  );
}

<script setup>
import { ref } from 'vue';
import 'nnui-kit'; // Registers universal Light-DOM elements

const activeTab = ref('all');
const sliderValue = ref(50);
const selected = ref('');
const query = ref('');

const handleSelect = (val) => {
  console.log('Selected:', val);
};
</script>

<template>
  <ui-file-upload accept="image/*,.pdf,.zip" max-size="10485760" multiple style="width: 100%; max-width: 500px;">
                <div data-part="dropzone">
                  <div style="font-size: 2rem; margin-bottom: 0.5rem;">📁</div>
                  <p style="margin: 0; font-weight: 500;">Drag and drop files here, or <button data-part="trigger" type="button" class="ui-button ui-button--link">browse files</button></p>
                  <p style="font-size: 0.75rem; color: var(--ui-text-muted); margin-top: 0.35rem;">Supports images, PDF, and ZIP up to 10 MB</p>
                </div>
                <ul data-part="file-list" style="list-style: none; margin: 1rem 0 0 0; padding: 0;"></ul>
              </ui-file-upload>
</template>

<script>
  import 'nnui-kit';

  let activeTab = $state('all');
  let sliderValue = $state(50);
  let selected = $state('');
</script>

<ui-file-upload accept="image/*,.pdf,.zip" max-size="10485760" multiple style="width: 100%; max-width: 500px;">
              <div data-part="dropzone">
                <div style="font-size: 2rem; margin-bottom: 0.5rem;">📁</div>
                <p style="margin: 0; font-weight: 500;">Drag and drop files here, or <button data-part="trigger" type="button" class="ui-button ui-button--link">browse files</button></p>
                <p style="font-size: 0.75rem; color: var(--ui-text-muted); margin-top: 0.35rem;">Supports images, PDF, and ZIP up to 10 MB</p>
              </div>
              <ul data-part="file-list" style="list-style: none; margin: 1rem 0 0 0; padding: 0;"></ul>
            </ui-file-upload>

How to Utilize

NNUI-KIT components live directly in the document Light DOM. You can use them via declarative HTML, with our first-class React wrapper, or platform-natively in Svelte, Vue, Astro, and HTMX:

React 18 & 19 (Next.js 15 App Router)

import 'nnui-kit/css';
import 'nnui-kit/client';
import { FileUploadDropzone } from 'nnui-kit/react';

Universal Web Components (Vue 3, Svelte 5, Astro, HTMX)

<!-- Automatically registers <ui-file-upload> and <nnui-file-upload> -->
import 'nnui-kit/css';
import 'nnui-kit/client';

Platform Features

Zero Shadow DOM

Element lives in the Light DOM. Tailwind and global CSS apply directly.

persist="url | local"

Add declarative persistence attribute to auto-sync state with URL search params.

sync="cross-tab"

Synchronize changes across all open browser tabs via BroadcastChannel.