Input Upload

A file upload input rendered as a labelled dropzone surface with a centered icon, title, helper description, and a styled trigger affordance. The whole surface is clickable to open the native file picker and accepts drag-and-drop. Drag state and selected files are owned by the shared core package, so Astro and Svelte adapters consume the same headless logic.

Upload dialog

The full flow: a dropzone, an “import from a link” row, and an UploadList linked to the dropzone with for="<input id>". Pass an upload(file, { onProgress, signal }) adapter and the engine runs the queue — progress, time left, retry on failure, abort on remove, three uploads at a time (concurrency). The link row is plain Input + Button composition: fetch the remote file however your app does (usually server-side, because of CORS) and hand the result to engine.addEntries().

PreviewCode

Project files

Share briefs, footage and assets with the team

Drop files hereAny type, up to 256 MB each

Import from a link

---
// GENERATED from packages/demos/input-upload/dialog.demo.tsx — edit the source, not this file.
import InputUpload from "@pindoba/astro-input-upload";
import { UploadList } from "@pindoba/astro-input-upload";
import Card from "@pindoba/astro-card";
import Button from "@pindoba/astro-button";
import { InputRoot, InputField } from "@pindoba/astro-input";
import Affix from "@pindoba/astro-affix";
import { css } from "@pindoba/styled-system/css";
import { flex, stack } from "@pindoba/styled-system/patterns";
import type { UploadEntry } from "@pindoba/core-input-upload";

const sectionLabel = css({ textStyle: "label.sm", color: "panel.text" });

const entries = [] as UploadEntry[];
const url = "";

const uploading = entries.some(
  (e) => e.status === "queued" || e.status === "uploading",
);
const stored = entries.filter((e) => e.status === "success");
---

<div
  class={css({ maxWidth: "48rem", width: "100%" })}
  data-ir-root="input-upload/dialog"
>
  <Card
    header={{
      heading: "Project files",
      subheading: "Share briefs, footage and assets with the team",
    }}
    footer={{}}
    data-ir="1"
  >
    <div slot="footer-trailing" class={flex({ gap: "sm" })}>
      <Button emphasis="secondary" data-ir="6">
        Clear
      </Button>
      <Button disabled={uploading || stored.length === 0} data-ir="7">
        Save to project
        <Fragment set:html="<!--ir:8-->" />
        {stored.length ? ` (${stored.length})` : ""}
        <Fragment set:html="<!--/ir-->" />
      </Button>
    </div>
    <div class={stack({ gap: "lg", direction: "column" })}>
      <InputUpload
        id="astro-demo-dialog-upload"
        multiple
        maxSize={256 * 1024 * 1024}
        title="Drop files here"
        description="Any type, up to 256 MB each"
        trigger="Choose files"
        data-ir="2"
      />

      <div class={stack({ gap: "xs", direction: "column" })}>
        <span class={sectionLabel}>Import from a link</span>
        <InputRoot>
          <InputField
            type="url"
            placeholder="https://"
            aria-label="Link to a file"
            data-ir="3"
          />
          <Affix side="end">
            <Button size="sm" disabled={!url.trim()} data-ir="4">
              Import
            </Button>
          </Affix>
        </InputRoot>
      </div>

      <!--ir:5-->
      {entries.length > 0 && (
        <div class={stack({ gap: "xs", direction: "column" })}>
          <span class={sectionLabel}>In this project</span>
          <UploadList for="astro-demo-dialog-upload" />
        </div>
      )}
      <!--/ir-->
    </div>
  </Card>
</div>

<script>
  import { hydrate } from "./_client/dialog.ts";

  document
    .querySelectorAll('[data-ir-root="input-upload/dialog"]')
    .forEach((root) => hydrate([root]));
</script>

Project files

Share briefs, footage and assets with the team

Drop files hereAny type, up to 256 MB each

Import from a link

// GENERATED from packages/demos/input-upload/dialog.demo.tsx — edit the source, not this file.
import {
  type KeyboardEvent as ReactKeyboardEvent,
  useMemo,
  useRef,
  useState,
} from "react";
import { InputUpload, UploadList } from "@pindoba/react-input-upload";
import { Card } from "@pindoba/react-card";
import { Button } from "@pindoba/react-button";
import { InputRoot, InputField } from "@pindoba/react-input";
import { Affix } from "@pindoba/react-affix";
import { simulateUpload } from "@pindoba/core-input-upload";
import { css } from "@pindoba/styled-system/css";
import { flex, stack } from "@pindoba/styled-system/patterns";
import type {
  HeadlessInputUpload,
  UploadEntry,
} from "@pindoba/core-input-upload";

const upload = simulateUpload({ bytesPerSecond: 900_000, fail: /broken/i });
const sectionLabel = css({ textStyle: "label.sm", color: "panel.text" });
export default function DialogDemo() {
  const [entries, setEntries] = useState([] as UploadEntry[]);
  const [url, setUrl] = useState("");
  const engine = useRef<HeadlessInputUpload>(null);
  const uploading = useMemo(
    () =>
      entries.some((e) => e.status === "queued" || e.status === "uploading"),
    [entries],
  );
  const stored = useMemo(
    () => entries.filter((e) => e.status === "success"),
    [entries],
  );

  function addFromUrl() {
    const trimmed = url.trim();
    if (!trimmed) return;
    // Fetching a remote URL is the app's job (usually server-side, because
    // of CORS); the engine just needs the result as an entry.
    const name = trimmed.split("/").filter(Boolean).pop() ?? trimmed;
    engine.current?.addEntries([{ name, url: trimmed, status: "success" }]);
    setUrl("");
  }

  const footerTrailing0 = (
    <div className={flex({ gap: "sm" })}>
      <Button emphasis="secondary" onClick={() => engine.current?.clear()}>
        Clear
      </Button>
      <Button disabled={uploading || stored.length === 0}>
        Save to project{stored.length ? ` (${stored.length})` : ""}
      </Button>
    </div>
  );

  return (
    <div className={css({ maxWidth: "48rem", width: "100%" })}>
      <Card
        header={{
          heading: "Project files",
          subheading: "Share briefs, footage and assets with the team",
        }}
        footer={{
          trailing: footerTrailing0,
        }}
      >
        <div className={stack({ gap: "lg", direction: "column" })}>
          <InputUpload
            id="react-demo-dialog-upload"
            multiple
            maxSize={256 * 1024 * 1024}
            upload={upload}
            engineRef={engine}
            onEntriesChange={setEntries}
            title="Drop files here"
            description="Any type, up to 256 MB each"
            trigger="Choose files"
          />

          <div className={stack({ gap: "xs", direction: "column" })}>
            <span className={sectionLabel}>Import from a link</span>
            <InputRoot>
              <InputField
                value={url}
                onChange={(e) => setUrl(e.currentTarget.value)}
                type="url"
                placeholder="https://"
                aria-label="Link to a file"
                onKeyDown={(e: ReactKeyboardEvent) => {
                  if (e.key === "Enter") addFromUrl();
                }}
              />
              <Affix side="end">
                <Button size="sm" disabled={!url.trim()} onClick={addFromUrl}>
                  Import
                </Button>
              </Affix>
            </InputRoot>
          </div>

          {entries.length > 0 && (
            <div className={stack({ gap: "xs", direction: "column" })}>
              <span className={sectionLabel}>In this project</span>
              <UploadList for="react-demo-dialog-upload" />
            </div>
          )}
        </div>
      </Card>
    </div>
  );
}

Project files

Share briefs, footage and assets with the team

Drop files here Any type, up to 256 MB each

Import from a link

<script lang="ts">
  // GENERATED from packages/demos/input-upload/dialog.demo.tsx — edit the source, not this file.
  import InputUpload from "@pindoba/svelte-input-upload";
  import { UploadList } from "@pindoba/svelte-input-upload";
  import Card from "@pindoba/svelte-card";
  import Button from "@pindoba/svelte-button";
  import { InputRoot, InputField } from "@pindoba/svelte-input";
  import Affix from "@pindoba/svelte-affix";
  import { simulateUpload } from "@pindoba/core-input-upload";
  import { css } from "@pindoba/styled-system/css";
  import { flex, stack } from "@pindoba/styled-system/patterns";
  import type {
    HeadlessInputUpload,
    UploadEntry,
  } from "@pindoba/core-input-upload";

  const upload = simulateUpload({ bytesPerSecond: 900_000, fail: /broken/i });
  const sectionLabel = css({ textStyle: "label.sm", color: "panel.text" });

  let entries = $state([] as UploadEntry[]);
  let url = $state("");

  let engine = $state<HeadlessInputUpload>();

  const uploading = $derived(
    entries.some((e) => e.status === "queued" || e.status === "uploading"),
  );
  const stored = $derived(entries.filter((e) => e.status === "success"));

  function addFromUrl() {
    const trimmed = url.trim();
    if (!trimmed) return;
    // Fetching a remote URL is the app's job (usually server-side, because
    // of CORS); the engine just needs the result as an entry.
    const name = trimmed.split("/").filter(Boolean).pop() ?? trimmed;
    engine?.addEntries([{ name, url: trimmed, status: "success" }]);
    url = "";
  }
</script>

{#snippet footerTrailing0()}
  <div class={flex({ gap: "sm" })}>
    <Button emphasis="secondary" onclick={() => engine?.clear()}>Clear</Button>
    <Button disabled={uploading || stored.length === 0}>
      Save to project{stored.length ? ` (${stored.length})` : ""}
    </Button>
  </div>
{/snippet}

<div class={css({ maxWidth: "48rem", width: "100%" })}>
  <Card
    header={{
      heading: "Project files",
      subheading: "Share briefs, footage and assets with the team",
    }}
    footer={{
      trailing: footerTrailing0,
    }}
  >
    <div class={stack({ gap: "lg", direction: "column" })}>
      <InputUpload
        id="svelte-demo-dialog-upload"
        multiple
        maxSize={256 * 1024 * 1024}
        {upload}
        bind:engine
        bind:entries
        title="Drop files here"
        description="Any type, up to 256 MB each"
        trigger="Choose files"
      ></InputUpload>

      <div class={stack({ gap: "xs", direction: "column" })}>
        <span class={sectionLabel}> Import from a link </span>
        <InputRoot>
          <InputField
            bind:value={url}
            type="url"
            placeholder="https://"
            aria-label="Link to a file"
            onkeydown={(e: KeyboardEvent) => {
              if (e.key === "Enter") addFromUrl();
            }}
          ></InputField>
          <Affix side="end">
            <Button size="sm" disabled={!url.trim()} onclick={addFromUrl}>
              Import
            </Button>
          </Affix>
        </InputRoot>
      </div>

      {#if entries.length > 0}
        <div class={stack({ gap: "xs", direction: "column" })}>
          <span class={sectionLabel}> In this project </span>
          <UploadList for="svelte-demo-dialog-upload"></UploadList>
        </div>
      {/if}
    </div>
  </Card>
</div>

Project files

Share briefs, footage and assets with the team

Drop files hereAny type, up to 256 MB each

Import from a link

<script setup lang="ts">
// GENERATED from packages/demos/input-upload/dialog.demo.tsx — edit the source, not this file.
import { computed, h, ref, shallowRef } from "vue";
import { InputUpload, UploadList } from "@pindoba/vue-input-upload";
import { Card } from "@pindoba/vue-card";
import { Button } from "@pindoba/vue-button";
import { InputRoot, InputField } from "@pindoba/vue-input";
import { Affix } from "@pindoba/vue-affix";
import { simulateUpload } from "@pindoba/core-input-upload";
import { css } from "@pindoba/styled-system/css";
import { flex, stack } from "@pindoba/styled-system/patterns";
import type {
  HeadlessInputUpload,
  UploadEntry,
} from "@pindoba/core-input-upload";

const upload = simulateUpload({ bytesPerSecond: 900_000, fail: /broken/i });
const sectionLabel = css({ textStyle: "label.sm", color: "panel.text" });

const entries = ref([] as UploadEntry[]);
const url = ref("");

const engine = shallowRef<HeadlessInputUpload>();

const uploading = computed(() =>
  entries.value.some((e) => e.status === "queued" || e.status === "uploading"),
);
const stored = computed(() =>
  entries.value.filter((e) => e.status === "success"),
);

function addFromUrl() {
  const trimmed = url.value.trim();
  if (!trimmed) return;
  // Fetching a remote URL is the app's job (usually server-side, because
  // of CORS); the engine just needs the result as an entry.
  const name = trimmed.split("/").filter(Boolean).pop() ?? trimmed;
  engine.value?.addEntries([{ name, url: trimmed, status: "success" }]);
  url.value = "";
}

const footerTrailing0 = computed(() =>
  h("div", { class: flex({ gap: "sm" }) }, [
    h(
      Button,
      { emphasis: "secondary", onClick: () => engine.value?.clear() },
      () => "Clear",
    ),
    h(
      Button,
      { disabled: uploading.value || stored.value.length === 0 },
      () => [
        "Save to project",
        stored.value.length ? ` (${stored.value.length})` : "",
      ],
    ),
  ]),
);

const onInputFieldKeyDown = (e: KeyboardEvent) => {
  if (e.key === "Enter") addFromUrl();
};
</script>

<template>
  <div :class="css({ maxWidth: '48rem', width: '100%' })">
    <Card
      :header="{
        heading: 'Project files',
        subheading: 'Share briefs, footage and assets with the team',
      }"
      :footer="{
        trailing: footerTrailing0,
      }"
    >
      <div :class="stack({ gap: 'lg', direction: 'column' })">
        <InputUpload
          id="vue-demo-dialog-upload"
          :multiple="true"
          :maxSize="256 * 1024 * 1024"
          :upload="upload"
          :onEngine="(e) => (engine = e)"
          :onEntriesChange="(next) => (entries = next as never)"
          title="Drop files here"
          description="Any type, up to 256 MB each"
          trigger="Choose files"
        ></InputUpload>

        <div :class="stack({ gap: 'xs', direction: 'column' })">
          <span :class="sectionLabel">Import from a link</span>
          <InputRoot>
            <InputField
              :value="url"
              :onInput="
                (e: Event) => (url = (e.target as HTMLInputElement).value)
              "
              type="url"
              placeholder="https://"
              aria-label="Link to a file"
              :onKeyDown="onInputFieldKeyDown"
            ></InputField>
            <Affix side="end">
              <Button size="sm" :disabled="!url.trim()" :onClick="addFromUrl"
                >Import</Button
              >
            </Affix>
          </InputRoot>
        </div>

        <div
          v-if="entries.length > 0"
          :class="stack({ gap: 'xs', direction: 'column' })"
        >
          <span :class="sectionLabel">In this project</span>
          <UploadList for="vue-demo-dialog-upload"></UploadList>
        </div>
      </div>
    </Card>
  </div>
</template>

Project files

Share briefs, footage and assets with the team

Drop files hereAny type, up to 256 MB each

Import from a link

// GENERATED from packages/demos/input-upload/dialog.demo.tsx — edit the source, not this file.
import { createMemo, createSignal, Show } from "solid-js";
import { InputUpload, UploadList } from "@pindoba/solid-input-upload";
import { Card } from "@pindoba/solid-card";
import { Button } from "@pindoba/solid-button";
import { InputRoot, InputField } from "@pindoba/solid-input";
import { Affix } from "@pindoba/solid-affix";
import { simulateUpload } from "@pindoba/core-input-upload";
import { css } from "@pindoba/styled-system/css";
import { flex, stack } from "@pindoba/styled-system/patterns";
import type {
  HeadlessInputUpload,
  UploadEntry,
} from "@pindoba/core-input-upload";

const upload = simulateUpload({ bytesPerSecond: 900_000, fail: /broken/i });
const sectionLabel = css({ textStyle: "label.sm", color: "panel.text" });
export default function DialogDemo() {
  const [entries, setEntries] = createSignal([] as UploadEntry[]);
  const [url, setUrl] = createSignal("");
  let engine: HeadlessInputUpload | undefined;
  const uploading = createMemo(() =>
    entries().some((e) => e.status === "queued" || e.status === "uploading"),
  );
  const stored = createMemo(() =>
    entries().filter((e) => e.status === "success"),
  );

  function addFromUrl() {
    const trimmed = url().trim();
    if (!trimmed) return;
    // Fetching a remote URL is the app's job (usually server-side, because
    // of CORS); the engine just needs the result as an entry.
    const name = trimmed.split("/").filter(Boolean).pop() ?? trimmed;
    engine?.addEntries([{ name, url: trimmed, status: "success" }]);
    setUrl("");
  }

  const footerTrailing0 = () => (
    <div class={flex({ gap: "sm" })}>
      <Button emphasis="secondary" onClick={() => engine?.clear()}>
        Clear
      </Button>
      <Button disabled={uploading() || stored().length === 0}>
        Save to project{stored().length ? ` (${stored().length})` : ""}
      </Button>
    </div>
  );

  return (
    <div class={css({ maxWidth: "48rem", width: "100%" })}>
      <Card
        header={{
          heading: "Project files",
          subheading: "Share briefs, footage and assets with the team",
        }}
        footer={{
          trailing: footerTrailing0,
        }}
      >
        <div class={stack({ gap: "lg", direction: "column" })}>
          <InputUpload
            id="solid-demo-dialog-upload"
            multiple
            maxSize={256 * 1024 * 1024}
            upload={upload}
            engineRef={(e) => (engine = e ?? undefined)}
            onEntriesChange={setEntries}
            title="Drop files here"
            description="Any type, up to 256 MB each"
            trigger="Choose files"
          />

          <div class={stack({ gap: "xs", direction: "column" })}>
            <span class={sectionLabel}>Import from a link</span>
            <InputRoot>
              <InputField
                value={url()}
                onInput={(e) => setUrl(e.currentTarget.value)}
                type="url"
                placeholder="https://"
                aria-label="Link to a file"
                onKeyDown={(e: KeyboardEvent) => {
                  if (e.key === "Enter") addFromUrl();
                }}
              />
              <Affix side="end">
                <Button size="sm" disabled={!url().trim()} onClick={addFromUrl}>
                  Import
                </Button>
              </Affix>
            </InputRoot>
          </div>

          <Show when={entries().length > 0}>
            <div class={stack({ gap: "xs", direction: "column" })}>
              <span class={sectionLabel}>In this project</span>
              <UploadList for="solid-demo-dialog-upload" />
            </div>
          </Show>
        </div>
      </Card>
    </div>
  );
}

Photo grid

UploadList layout="grid" renders square thumbnail tiles. Put a layout="tile" dropzone in its append slot to get the gallery’s “add” tile. columns pins a column count; without it tiles auto-fill. Stored files are seeded with initialEntries and preview from their url.

PreviewCode

Gallery

Add photos

Fixed columns, compact density

---
// GENERATED from packages/demos/input-upload/photo-grid.demo.tsx — edit the source, not this file.
import InputUpload from "@pindoba/astro-input-upload";
import { UploadList } from "@pindoba/astro-input-upload";
import { css } from "@pindoba/styled-system/css";
import { stack } from "@pindoba/styled-system/patterns";

const initialEntries = [
  {
    name: "mountains.jpg",
    type: "image/jpeg",
    size: 2_400_000,
    url: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=480&q=60",
  },
  {
    name: "lake.jpg",
    type: "image/jpeg",
    size: 1_800_000,
    url: "https://images.unsplash.com/photo-1501785888041-af3ef285b470?w=480&q=60",
  },
];
---

<div
  class={stack({ gap: "xl", direction: "column", width: "100%" })}
  data-ir-root="input-upload/photo-grid"
>
  <div class={stack({ gap: "xs", direction: "column" })}>
    <span class={css({ textStyle: "label.sm" })}>Gallery</span>
    <UploadList for="astro-demo-photo-grid" layout="grid">
      <InputUpload
        slot="append"
        id="astro-demo-photo-grid"
        layout="tile"
        accept="image/*"
        multiple
        maxFiles={8}
        initialEntries={initialEntries}
        title="Add photos"
        data-ir="1"
      />
    </UploadList>
  </div>

  <div class={stack({ gap: "xs", direction: "column" })}>
    <span class={css({ textStyle: "label.sm" })}>
      Fixed columns, compact density
    </span>
    <UploadList
      for="astro-demo-photo-grid-compact"
      layout="grid"
      density="compact"
      columns={6}
    >
      <InputUpload
        slot="append"
        id="astro-demo-photo-grid-compact"
        layout="tile"
        size="xs"
        accept="image/*"
        multiple
        initialEntries={initialEntries}
        title="Add"
        data-ir="2"
      />
    </UploadList>
  </div>
</div>

<script>
  import { hydrate } from "./_client/photo-grid.ts";

  document
    .querySelectorAll('[data-ir-root="input-upload/photo-grid"]')
    .forEach((root) => hydrate([root]));
</script>

Gallery

Add photos

Fixed columns, compact density

// GENERATED from packages/demos/input-upload/photo-grid.demo.tsx — edit the source, not this file.
import { InputUpload, UploadList } from "@pindoba/react-input-upload";
import { simulateUpload } from "@pindoba/core-input-upload";
import { css } from "@pindoba/styled-system/css";
import { stack } from "@pindoba/styled-system/patterns";

const upload = simulateUpload({ bytesPerSecond: 700_000 });
const initialEntries = [
  {
    name: "mountains.jpg",
    type: "image/jpeg",
    size: 2_400_000,
    url: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=480&q=60",
  },
  {
    name: "lake.jpg",
    type: "image/jpeg",
    size: 1_800_000,
    url: "https://images.unsplash.com/photo-1501785888041-af3ef285b470?w=480&q=60",
  },
];
export default function PhotoGridDemo() {
  return (
    <div className={stack({ gap: "xl", direction: "column", width: "100%" })}>
      <div className={stack({ gap: "xs", direction: "column" })}>
        <span className={css({ textStyle: "label.sm" })}>Gallery</span>
        <UploadList
          for="react-demo-photo-grid"
          layout="grid"
          append={
            <InputUpload
              id="react-demo-photo-grid"
              layout="tile"
              accept="image/*"
              multiple
              maxFiles={8}
              upload={upload}
              initialEntries={initialEntries}
              title="Add photos"
            />
          }
        />
      </div>

      <div className={stack({ gap: "xs", direction: "column" })}>
        <span className={css({ textStyle: "label.sm" })}>
          Fixed columns, compact density
        </span>
        <UploadList
          for="react-demo-photo-grid-compact"
          layout="grid"
          density="compact"
          columns={6}
          append={
            <InputUpload
              id="react-demo-photo-grid-compact"
              layout="tile"
              size="xs"
              accept="image/*"
              multiple
              upload={upload}
              initialEntries={initialEntries}
              title="Add"
            />
          }
        />
      </div>
    </div>
  );
}

Gallery

Add photos

Fixed columns, compact density

<script lang="ts">
  // GENERATED from packages/demos/input-upload/photo-grid.demo.tsx — edit the source, not this file.
  import InputUpload from "@pindoba/svelte-input-upload";
  import { UploadList } from "@pindoba/svelte-input-upload";
  import { simulateUpload } from "@pindoba/core-input-upload";
  import { css } from "@pindoba/styled-system/css";
  import { stack } from "@pindoba/styled-system/patterns";

  const upload = simulateUpload({ bytesPerSecond: 700_000 });
  const initialEntries = [
    {
      name: "mountains.jpg",
      type: "image/jpeg",
      size: 2_400_000,
      url: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=480&q=60",
    },
    {
      name: "lake.jpg",
      type: "image/jpeg",
      size: 1_800_000,
      url: "https://images.unsplash.com/photo-1501785888041-af3ef285b470?w=480&q=60",
    },
  ];
</script>

<div class={stack({ gap: "xl", direction: "column", width: "100%" })}>
  <div class={stack({ gap: "xs", direction: "column" })}>
    <span class={css({ textStyle: "label.sm" })}> Gallery </span>
    <UploadList for="svelte-demo-photo-grid" layout="grid">
      {#snippet append()}
        <InputUpload
          id="svelte-demo-photo-grid"
          layout="tile"
          accept="image/*"
          multiple
          maxFiles={8}
          {upload}
          {initialEntries}
          title="Add photos"
        ></InputUpload>
      {/snippet}
    </UploadList>
  </div>

  <div class={stack({ gap: "xs", direction: "column" })}>
    <span class={css({ textStyle: "label.sm" })}>
      Fixed columns, compact density
    </span>
    <UploadList
      for="svelte-demo-photo-grid-compact"
      layout="grid"
      density="compact"
      columns={6}
    >
      {#snippet append()}
        <InputUpload
          id="svelte-demo-photo-grid-compact"
          layout="tile"
          size="xs"
          accept="image/*"
          multiple
          {upload}
          {initialEntries}
          title="Add"
        ></InputUpload>
      {/snippet}
    </UploadList>
  </div>
</div>

Gallery

Add photos

Fixed columns, compact density

<script setup lang="ts">
// GENERATED from packages/demos/input-upload/photo-grid.demo.tsx — edit the source, not this file.
import { InputUpload, UploadList } from "@pindoba/vue-input-upload";
import { simulateUpload } from "@pindoba/core-input-upload";
import { css } from "@pindoba/styled-system/css";
import { stack } from "@pindoba/styled-system/patterns";

const upload = simulateUpload({ bytesPerSecond: 700_000 });
const initialEntries = [
  {
    name: "mountains.jpg",
    type: "image/jpeg",
    size: 2_400_000,
    url: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=480&q=60",
  },
  {
    name: "lake.jpg",
    type: "image/jpeg",
    size: 1_800_000,
    url: "https://images.unsplash.com/photo-1501785888041-af3ef285b470?w=480&q=60",
  },
];
</script>

<template>
  <div :class="stack({ gap: 'xl', direction: 'column', width: '100%' })">
    <div :class="stack({ gap: 'xs', direction: 'column' })">
      <span :class="css({ textStyle: 'label.sm' })">Gallery</span>
      <UploadList for="vue-demo-photo-grid" layout="grid">
        <template #append>
          <InputUpload
            id="vue-demo-photo-grid"
            layout="tile"
            accept="image/*"
            :multiple="true"
            :maxFiles="8"
            :upload="upload"
            :initialEntries="initialEntries"
            title="Add photos"
          ></InputUpload>
        </template>
      </UploadList>
    </div>

    <div :class="stack({ gap: 'xs', direction: 'column' })">
      <span :class="css({ textStyle: 'label.sm' })"
        >Fixed columns, compact density</span
      >
      <UploadList
        for="vue-demo-photo-grid-compact"
        layout="grid"
        density="compact"
        :columns="6"
      >
        <template #append>
          <InputUpload
            id="vue-demo-photo-grid-compact"
            layout="tile"
            size="xs"
            accept="image/*"
            :multiple="true"
            :upload="upload"
            :initialEntries="initialEntries"
            title="Add"
          ></InputUpload>
        </template>
      </UploadList>
    </div>
  </div>
</template>

Gallery

Add photos

Fixed columns, compact density

// GENERATED from packages/demos/input-upload/photo-grid.demo.tsx — edit the source, not this file.
import { InputUpload, UploadList } from "@pindoba/solid-input-upload";
import { simulateUpload } from "@pindoba/core-input-upload";
import { css } from "@pindoba/styled-system/css";
import { stack } from "@pindoba/styled-system/patterns";

const upload = simulateUpload({ bytesPerSecond: 700_000 });
const initialEntries = [
  {
    name: "mountains.jpg",
    type: "image/jpeg",
    size: 2_400_000,
    url: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=480&q=60",
  },
  {
    name: "lake.jpg",
    type: "image/jpeg",
    size: 1_800_000,
    url: "https://images.unsplash.com/photo-1501785888041-af3ef285b470?w=480&q=60",
  },
];
export default function PhotoGridDemo() {
  return (
    <div class={stack({ gap: "xl", direction: "column", width: "100%" })}>
      <div class={stack({ gap: "xs", direction: "column" })}>
        <span class={css({ textStyle: "label.sm" })}>Gallery</span>
        <UploadList
          for="solid-demo-photo-grid"
          layout="grid"
          append={
            <InputUpload
              id="solid-demo-photo-grid"
              layout="tile"
              accept="image/*"
              multiple
              maxFiles={8}
              upload={upload}
              initialEntries={initialEntries}
              title="Add photos"
            />
          }
        />
      </div>

      <div class={stack({ gap: "xs", direction: "column" })}>
        <span class={css({ textStyle: "label.sm" })}>
          Fixed columns, compact density
        </span>
        <UploadList
          for="solid-demo-photo-grid-compact"
          layout="grid"
          density="compact"
          columns={6}
          append={
            <InputUpload
              id="solid-demo-photo-grid-compact"
              layout="tile"
              size="xs"
              accept="image/*"
              multiple
              upload={upload}
              initialEntries={initialEntries}
              title="Add"
            />
          }
        />
      </div>
    </div>
  );
}

Avatar

layout="avatar" is a single-image picker: it shows the current image (picked or stored), a progress ring while it uploads, and a remove button. A new pick replaces the old one. shape is circle (default) or rounded.

PreviewCode

Circle (default) — every size

Add photoAdd photoAdd photoAdd photo

Rounded, with an existing photo

Add coverAdd photo

---
// GENERATED from packages/demos/input-upload/avatar.demo.tsx — edit the source, not this file.
import InputUpload from "@pindoba/astro-input-upload";
import { css } from "@pindoba/styled-system/css";
import { flex, stack } from "@pindoba/styled-system/patterns";

const sizes = ["xs", "sm", "md", "lg"] as const;
const existing = [
  {
    name: "portrait.jpg",
    type: "image/jpeg",
    size: 320_000,
    url: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=320&q=60",
  },
];
const label = css({ textStyle: "label.sm", color: "panel.text.muted" });
---

<div
  class={stack({ gap: "xl", direction: "column" })}
  data-ir-root="input-upload/avatar"
>
  <div class={stack({ gap: "xs", direction: "column" })}>
    <span class={label}>Circle (default) — every size</span>
    <div class={flex({ gap: "lg", align: "end", wrap: "wrap" })}>
      <!--ir:1-->
      {sizes.map((size) => (
        <InputUpload
          layout="avatar"
          size={size}
          accept="image/*"
          title="Add photo"
          data-ir="2"
          data-ir-key={size}
        />
      ))}
      <!--/ir-->
    </div>
  </div>

  <div class={stack({ gap: "xs", direction: "column" })}>
    <span class={label}>Rounded, with an existing photo</span>
    <div class={flex({ gap: "lg", align: "end", wrap: "wrap" })}>
      <InputUpload
        layout="avatar"
        shape="rounded"
        size="lg"
        accept="image/*"
        initialEntries={existing}
        title="Add cover"
        data-ir="3"
      />
      <InputUpload
        layout="avatar"
        size="lg"
        accept="image/*"
        initialEntries={existing}
        title="Add photo"
        data-ir="4"
      />
    </div>
  </div>
</div>

<script>
  import { hydrate } from "./_client/avatar.ts";

  document
    .querySelectorAll('[data-ir-root="input-upload/avatar"]')
    .forEach((root) => hydrate([root]));
</script>

Circle (default) — every size

Add photoAdd photoAdd photoAdd photo

Rounded, with an existing photo

Add coverAdd photo

// GENERATED from packages/demos/input-upload/avatar.demo.tsx — edit the source, not this file.
import { InputUpload } from "@pindoba/react-input-upload";
import { simulateUpload } from "@pindoba/core-input-upload";
import { css } from "@pindoba/styled-system/css";
import { flex, stack } from "@pindoba/styled-system/patterns";

const upload = simulateUpload({ bytesPerSecond: 400_000 });
const sizes = ["xs", "sm", "md", "lg"] as const;
const existing = [
  {
    name: "portrait.jpg",
    type: "image/jpeg",
    size: 320_000,
    url: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=320&q=60",
  },
];
const label = css({ textStyle: "label.sm", color: "panel.text.muted" });
export default function AvatarDemo() {
  return (
    <div className={stack({ gap: "xl", direction: "column" })}>
      <div className={stack({ gap: "xs", direction: "column" })}>
        <span className={label}>Circle (default) — every size</span>
        <div className={flex({ gap: "lg", align: "end", wrap: "wrap" })}>
          {sizes.map((size) => (
            <InputUpload
              key={size}
              layout="avatar"
              size={size}
              accept="image/*"
              upload={upload}
              title="Add photo"
            />
          ))}
        </div>
      </div>

      <div className={stack({ gap: "xs", direction: "column" })}>
        <span className={label}>Rounded, with an existing photo</span>
        <div className={flex({ gap: "lg", align: "end", wrap: "wrap" })}>
          <InputUpload
            layout="avatar"
            shape="rounded"
            size="lg"
            accept="image/*"
            upload={upload}
            initialEntries={existing}
            title="Add cover"
          />
          <InputUpload
            layout="avatar"
            size="lg"
            accept="image/*"
            upload={upload}
            initialEntries={existing}
            title="Add photo"
          />
        </div>
      </div>
    </div>
  );
}

Circle (default) — every size

Add photo Add photo Add photo Add photo

Rounded, with an existing photo

Add cover Add photo

<script lang="ts">
  // GENERATED from packages/demos/input-upload/avatar.demo.tsx — edit the source, not this file.
  import InputUpload from "@pindoba/svelte-input-upload";
  import { simulateUpload } from "@pindoba/core-input-upload";
  import { css } from "@pindoba/styled-system/css";
  import { flex, stack } from "@pindoba/styled-system/patterns";

  const upload = simulateUpload({ bytesPerSecond: 400_000 });
  const sizes = ["xs", "sm", "md", "lg"] as const;
  const existing = [
    {
      name: "portrait.jpg",
      type: "image/jpeg",
      size: 320_000,
      url: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=320&q=60",
    },
  ];
  const label = css({ textStyle: "label.sm", color: "panel.text.muted" });
</script>

<div class={stack({ gap: "xl", direction: "column" })}>
  <div class={stack({ gap: "xs", direction: "column" })}>
    <span class={label}> Circle (default) — every size </span>
    <div class={flex({ gap: "lg", align: "end", wrap: "wrap" })}>
      {#each sizes as size (size)}
        <InputUpload
          layout="avatar"
          {size}
          accept="image/*"
          {upload}
          title="Add photo"
        ></InputUpload>
      {/each}
    </div>
  </div>

  <div class={stack({ gap: "xs", direction: "column" })}>
    <span class={label}> Rounded, with an existing photo </span>
    <div class={flex({ gap: "lg", align: "end", wrap: "wrap" })}>
      <InputUpload
        layout="avatar"
        shape="rounded"
        size="lg"
        accept="image/*"
        {upload}
        initialEntries={existing}
        title="Add cover"
      ></InputUpload>
      <InputUpload
        layout="avatar"
        size="lg"
        accept="image/*"
        {upload}
        initialEntries={existing}
        title="Add photo"
      ></InputUpload>
    </div>
  </div>
</div>

Circle (default) — every size

Add photoAdd photoAdd photoAdd photo

Rounded, with an existing photo

Add coverAdd photo

<script setup lang="ts">
// GENERATED from packages/demos/input-upload/avatar.demo.tsx — edit the source, not this file.
import { InputUpload } from "@pindoba/vue-input-upload";
import { simulateUpload } from "@pindoba/core-input-upload";
import { css } from "@pindoba/styled-system/css";
import { flex, stack } from "@pindoba/styled-system/patterns";

const upload = simulateUpload({ bytesPerSecond: 400_000 });
const sizes = ["xs", "sm", "md", "lg"] as const;
const existing = [
  {
    name: "portrait.jpg",
    type: "image/jpeg",
    size: 320_000,
    url: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=320&q=60",
  },
];
const label = css({ textStyle: "label.sm", color: "panel.text.muted" });
</script>

<template>
  <div :class="stack({ gap: 'xl', direction: 'column' })">
    <div :class="stack({ gap: 'xs', direction: 'column' })">
      <span :class="label">Circle (default) — every size</span>
      <div :class="flex({ gap: 'lg', align: 'end', wrap: 'wrap' })">
        <InputUpload
          v-for="size in sizes"
          :key="size"
          layout="avatar"
          :size="size"
          accept="image/*"
          :upload="upload"
          title="Add photo"
        ></InputUpload>
      </div>
    </div>

    <div :class="stack({ gap: 'xs', direction: 'column' })">
      <span :class="label">Rounded, with an existing photo</span>
      <div :class="flex({ gap: 'lg', align: 'end', wrap: 'wrap' })">
        <InputUpload
          layout="avatar"
          shape="rounded"
          size="lg"
          accept="image/*"
          :upload="upload"
          :initialEntries="existing"
          title="Add cover"
        ></InputUpload>
        <InputUpload
          layout="avatar"
          size="lg"
          accept="image/*"
          :upload="upload"
          :initialEntries="existing"
          title="Add photo"
        ></InputUpload>
      </div>
    </div>
  </div>
</template>

Circle (default) — every size

Add photoAdd photoAdd photoAdd photo

Rounded, with an existing photo

Add coverAdd photo

// GENERATED from packages/demos/input-upload/avatar.demo.tsx — edit the source, not this file.
import { For } from "solid-js";
import { InputUpload } from "@pindoba/solid-input-upload";
import { simulateUpload } from "@pindoba/core-input-upload";
import { css } from "@pindoba/styled-system/css";
import { flex, stack } from "@pindoba/styled-system/patterns";

const upload = simulateUpload({ bytesPerSecond: 400_000 });
const sizes = ["xs", "sm", "md", "lg"] as const;
const existing = [
  {
    name: "portrait.jpg",
    type: "image/jpeg",
    size: 320_000,
    url: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=320&q=60",
  },
];
const label = css({ textStyle: "label.sm", color: "panel.text.muted" });
export default function AvatarDemo() {
  return (
    <div class={stack({ gap: "xl", direction: "column" })}>
      <div class={stack({ gap: "xs", direction: "column" })}>
        <span class={label}>Circle (default) — every size</span>
        <div class={flex({ gap: "lg", align: "end", wrap: "wrap" })}>
          <For each={sizes}>
            {(size) => (
              <InputUpload
                layout="avatar"
                size={size}
                accept="image/*"
                upload={upload}
                title="Add photo"
              />
            )}
          </For>
        </div>
      </div>

      <div class={stack({ gap: "xs", direction: "column" })}>
        <span class={label}>Rounded, with an existing photo</span>
        <div class={flex({ gap: "lg", align: "end", wrap: "wrap" })}>
          <InputUpload
            layout="avatar"
            shape="rounded"
            size="lg"
            accept="image/*"
            upload={upload}
            initialEntries={existing}
            title="Add cover"
          />
          <InputUpload
            layout="avatar"
            size="lg"
            accept="image/*"
            upload={upload}
            initialEntries={existing}
            title="Add photo"
          />
        </div>
      </div>
    </div>
  );
}

Compact

layout="inline" turns the dropzone into a single control row, as tall as an Input of the same size. UploadList density="compact" puts each file’s name and status on one line, with a small ring while it uploads.

PreviewCode

Inline dropzone + compact rowsDrop files orPDF, images up to 10 MB

Inline sizes (row heights match Input)Attach a fileAttach a fileAttach a fileAttach a file

---
// GENERATED from packages/demos/input-upload/compact.demo.tsx — edit the source, not this file.
import InputUpload from "@pindoba/astro-input-upload";
import { UploadList } from "@pindoba/astro-input-upload";
import { css } from "@pindoba/styled-system/css";
import { stack } from "@pindoba/styled-system/patterns";

const sizes = ["xs", "sm", "md", "lg"] as const;
const label = css({ textStyle: "label.sm", color: "panel.text.muted" });
---

<div
  class={stack({
    gap: "xl",
    direction: "column",
    width: "100%",
    maxWidth: "56rem",
  })}
  data-ir-root="input-upload/compact"
>
  <div class={stack({ gap: "xs", direction: "column" })}>
    <span class={label}>Inline dropzone + compact rows</span>
    <InputUpload
      id="astro-demo-compact"
      layout="inline"
      size="sm"
      multiple
      title="Drop files or"
      description="PDF, images up to 10 MB"
      trigger="Browse"
      data-ir="1"
    />
    <UploadList for="astro-demo-compact" density="compact" size="sm" />
  </div>

  <div class={stack({ gap: "xs", direction: "column" })}>
    <span class={label}>Inline sizes (row heights match Input)</span>
    <!--ir:2-->
    {sizes.map((size) => (
      <InputUpload
        layout="inline"
        size={size}
        title="Attach a file"
        trigger="Browse"
        data-ir="3"
        data-ir-key={size}
      />
    ))}
    <!--/ir-->
  </div>
</div>

<script>
  import { hydrate } from "./_client/compact.ts";

  document
    .querySelectorAll('[data-ir-root="input-upload/compact"]')
    .forEach((root) => hydrate([root]));
</script>

Inline dropzone + compact rowsDrop files orPDF, images up to 10 MB

Inline sizes (row heights match Input)Attach a fileAttach a fileAttach a fileAttach a file

// GENERATED from packages/demos/input-upload/compact.demo.tsx — edit the source, not this file.
import { InputUpload, UploadList } from "@pindoba/react-input-upload";
import { simulateUpload } from "@pindoba/core-input-upload";
import { css } from "@pindoba/styled-system/css";
import { stack } from "@pindoba/styled-system/patterns";

const upload = simulateUpload({ bytesPerSecond: 600_000, fail: /broken/i });
const sizes = ["xs", "sm", "md", "lg"] as const;
const label = css({ textStyle: "label.sm", color: "panel.text.muted" });
export default function CompactDemo() {
  return (
    <div
      className={stack({
        gap: "xl",
        direction: "column",
        width: "100%",
        maxWidth: "56rem",
      })}
    >
      <div className={stack({ gap: "xs", direction: "column" })}>
        <span className={label}>Inline dropzone + compact rows</span>
        <InputUpload
          id="react-demo-compact"
          layout="inline"
          size="sm"
          multiple
          upload={upload}
          title="Drop files or"
          description="PDF, images up to 10 MB"
          trigger="Browse"
        />
        <UploadList for="react-demo-compact" density="compact" size="sm" />
      </div>

      <div className={stack({ gap: "xs", direction: "column" })}>
        <span className={label}>Inline sizes (row heights match Input)</span>
        {sizes.map((size) => (
          <InputUpload
            key={size}
            layout="inline"
            size={size}
            title="Attach a file"
            trigger="Browse"
          />
        ))}
      </div>
    </div>
  );
}

Inline dropzone + compact rows Drop files or PDF, images up to 10 MB

Inline sizes (row heights match Input) Attach a file Attach a file Attach a file Attach a file

<script lang="ts">
  // GENERATED from packages/demos/input-upload/compact.demo.tsx — edit the source, not this file.
  import InputUpload from "@pindoba/svelte-input-upload";
  import { UploadList } from "@pindoba/svelte-input-upload";
  import { simulateUpload } from "@pindoba/core-input-upload";
  import { css } from "@pindoba/styled-system/css";
  import { stack } from "@pindoba/styled-system/patterns";

  const upload = simulateUpload({ bytesPerSecond: 600_000, fail: /broken/i });
  const sizes = ["xs", "sm", "md", "lg"] as const;
  const label = css({ textStyle: "label.sm", color: "panel.text.muted" });
</script>

<div
  class={stack({
    gap: "xl",
    direction: "column",
    width: "100%",
    maxWidth: "56rem",
  })}
>
  <div class={stack({ gap: "xs", direction: "column" })}>
    <span class={label}> Inline dropzone + compact rows </span>
    <InputUpload
      id="svelte-demo-compact"
      layout="inline"
      size="sm"
      multiple
      {upload}
      title="Drop files or"
      description="PDF, images up to 10 MB"
      trigger="Browse"
    ></InputUpload>
    <UploadList for="svelte-demo-compact" density="compact" size="sm"
    ></UploadList>
  </div>

  <div class={stack({ gap: "xs", direction: "column" })}>
    <span class={label}> Inline sizes (row heights match Input) </span>
    {#each sizes as size (size)}
      <InputUpload layout="inline" {size} title="Attach a file" trigger="Browse"
      ></InputUpload>
    {/each}
  </div>
</div>

Inline dropzone + compact rowsDrop files orPDF, images up to 10 MB

Inline sizes (row heights match Input)Attach a fileAttach a fileAttach a fileAttach a file

<script setup lang="ts">
// GENERATED from packages/demos/input-upload/compact.demo.tsx — edit the source, not this file.
import { InputUpload, UploadList } from "@pindoba/vue-input-upload";
import { simulateUpload } from "@pindoba/core-input-upload";
import { css } from "@pindoba/styled-system/css";
import { stack } from "@pindoba/styled-system/patterns";

const upload = simulateUpload({ bytesPerSecond: 600_000, fail: /broken/i });
const sizes = ["xs", "sm", "md", "lg"] as const;
const label = css({ textStyle: "label.sm", color: "panel.text.muted" });
</script>

<template>
  <div
    :class="
      stack({
        gap: 'xl',
        direction: 'column',
        width: '100%',
        maxWidth: '56rem',
      })
    "
  >
    <div :class="stack({ gap: 'xs', direction: 'column' })">
      <span :class="label">Inline dropzone + compact rows</span>
      <InputUpload
        id="vue-demo-compact"
        layout="inline"
        size="sm"
        :multiple="true"
        :upload="upload"
        title="Drop files or"
        description="PDF, images up to 10 MB"
        trigger="Browse"
      ></InputUpload>
      <UploadList
        for="vue-demo-compact"
        density="compact"
        size="sm"
      ></UploadList>
    </div>

    <div :class="stack({ gap: 'xs', direction: 'column' })">
      <span :class="label">Inline sizes (row heights match Input)</span>
      <InputUpload
        v-for="size in sizes"
        :key="size"
        layout="inline"
        :size="size"
        title="Attach a file"
        trigger="Browse"
      ></InputUpload>
    </div>
  </div>
</template>

Inline dropzone + compact rowsDrop files orPDF, images up to 10 MB

Inline sizes (row heights match Input)Attach a fileAttach a fileAttach a fileAttach a file

// GENERATED from packages/demos/input-upload/compact.demo.tsx — edit the source, not this file.
import { For } from "solid-js";
import { InputUpload, UploadList } from "@pindoba/solid-input-upload";
import { simulateUpload } from "@pindoba/core-input-upload";
import { css } from "@pindoba/styled-system/css";
import { stack } from "@pindoba/styled-system/patterns";

const upload = simulateUpload({ bytesPerSecond: 600_000, fail: /broken/i });
const sizes = ["xs", "sm", "md", "lg"] as const;
const label = css({ textStyle: "label.sm", color: "panel.text.muted" });
export default function CompactDemo() {
  return (
    <div
      class={stack({
        gap: "xl",
        direction: "column",
        width: "100%",
        maxWidth: "56rem",
      })}
    >
      <div class={stack({ gap: "xs", direction: "column" })}>
        <span class={label}>Inline dropzone + compact rows</span>
        <InputUpload
          id="solid-demo-compact"
          layout="inline"
          size="sm"
          multiple
          upload={upload}
          title="Drop files or"
          description="PDF, images up to 10 MB"
          trigger="Browse"
        />
        <UploadList for="solid-demo-compact" density="compact" size="sm" />
      </div>

      <div class={stack({ gap: "xs", direction: "column" })}>
        <span class={label}>Inline sizes (row heights match Input)</span>
        <For each={sizes}>
          {(size) => (
            <InputUpload
              layout="inline"
              size={size}
              title="Attach a file"
              trigger="Browse"
            />
          )}
        </For>
      </div>
    </div>
  );
}

Drop anywhere

dropTarget makes another element — or the whole page with "document" — accept dropped files into the dropzone’s engine. Only drags that carry files react. UploadDropOverlay covers the target while files are dragged over it (placement="fixed" for the page, "absolute" for a positioned container).

PreviewCode

Drag files anywhere over this panel.

Or pick files

---
// GENERATED from packages/demos/input-upload/drop-anywhere.demo.tsx — edit the source, not this file.
import InputUpload from "@pindoba/astro-input-upload";
import { UploadList, UploadDropOverlay } from "@pindoba/astro-input-upload";
import { css } from "@pindoba/styled-system/css";
import { stack } from "@pindoba/styled-system/patterns";
---

<div
  class={css({
    position: "relative",
    width: "100%",
    minHeight: "28rem",
    padding: "lg",
    borderRadius: "lg",
    borderWidth: "1px",
    borderColor: "neutral.border.muted",
    background: "neutral.surface.hill",
  })}
  data-ir-root="input-upload/drop-anywhere"
  data-ir="1"
>
  <div class={stack({ gap: "md", direction: "column" })}>
    <p class={css({ margin: 0, color: "neutral.text.muted" })}>
      Drag files anywhere over this panel.
    </p>
    <InputUpload
      id="astro-demo-drop-anywhere"
      layout="inline"
      multiple
      title="Or pick files"
      trigger="Browse"
      data-ir="2"
    />
    <UploadList for="astro-demo-drop-anywhere" density="compact" />
  </div>
  <UploadDropOverlay
    for="astro-demo-drop-anywhere"
    placement="absolute"
    labels={{ description: "They'll upload right away" }}
  />
</div>

<script>
  import { hydrate } from "./_client/drop-anywhere.ts";

  document
    .querySelectorAll('[data-ir-root="input-upload/drop-anywhere"]')
    .forEach((root) => hydrate([root]));
</script>

Drag files anywhere over this panel.

Or pick files

// GENERATED from packages/demos/input-upload/drop-anywhere.demo.tsx — edit the source, not this file.
import { useState } from "react";
import {
  InputUpload,
  UploadList,
  UploadDropOverlay,
} from "@pindoba/react-input-upload";
import { simulateUpload } from "@pindoba/core-input-upload";
import { css } from "@pindoba/styled-system/css";
import { stack } from "@pindoba/styled-system/patterns";

const upload = simulateUpload();
export default function DropAnywhereDemo() {
  const [container, setContainer] = useState<HTMLDivElement | null>(null);
  return (
    <div
      ref={setContainer}
      className={css({
        position: "relative",
        width: "100%",
        minHeight: "28rem",
        padding: "lg",
        borderRadius: "lg",
        borderWidth: "1px",
        borderColor: "neutral.border.muted",
        background: "neutral.surface.hill",
      })}
    >
      <div className={stack({ gap: "md", direction: "column" })}>
        <p className={css({ margin: 0, color: "neutral.text.muted" })}>
          Drag files anywhere over this panel.
        </p>
        <InputUpload
          id="react-demo-drop-anywhere"
          layout="inline"
          multiple
          upload={upload}
          dropTarget={container}
          title="Or pick files"
          trigger="Browse"
        />
        <UploadList for="react-demo-drop-anywhere" density="compact" />
      </div>
      <UploadDropOverlay
        for="react-demo-drop-anywhere"
        placement="absolute"
        labels={{ description: "They'll upload right away" }}
      />
    </div>
  );
}

Drag files anywhere over this panel.

Or pick files

<script lang="ts">
  // GENERATED from packages/demos/input-upload/drop-anywhere.demo.tsx — edit the source, not this file.
  import InputUpload from "@pindoba/svelte-input-upload";
  import { UploadList, UploadDropOverlay } from "@pindoba/svelte-input-upload";
  import { simulateUpload } from "@pindoba/core-input-upload";
  import { css } from "@pindoba/styled-system/css";
  import { stack } from "@pindoba/styled-system/patterns";

  const upload = simulateUpload();

  let container = $state<HTMLDivElement>();
</script>

<div
  bind:this={container}
  class={css({
    position: "relative",
    width: "100%",
    minHeight: "28rem",
    padding: "lg",
    borderRadius: "lg",
    borderWidth: "1px",
    borderColor: "neutral.border.muted",
    background: "neutral.surface.hill",
  })}
>
  <div class={stack({ gap: "md", direction: "column" })}>
    <p class={css({ margin: 0, color: "neutral.text.muted" })}>
      Drag files anywhere over this panel.
    </p>
    <InputUpload
      id="svelte-demo-drop-anywhere"
      layout="inline"
      multiple
      {upload}
      dropTarget={container}
      title="Or pick files"
      trigger="Browse"
    ></InputUpload>
    <UploadList for="svelte-demo-drop-anywhere" density="compact"></UploadList>
  </div>
  <UploadDropOverlay
    for="svelte-demo-drop-anywhere"
    placement="absolute"
    labels={{ description: "They'll upload right away" }}
  ></UploadDropOverlay>
</div>

Drag files anywhere over this panel.

Or pick files

<script setup lang="ts">
// GENERATED from packages/demos/input-upload/drop-anywhere.demo.tsx — edit the source, not this file.
import { useTemplateRef } from "vue";
import {
  InputUpload,
  UploadList,
  UploadDropOverlay,
} from "@pindoba/vue-input-upload";
import { simulateUpload } from "@pindoba/core-input-upload";
import { css } from "@pindoba/styled-system/css";
import { stack } from "@pindoba/styled-system/patterns";

const upload = simulateUpload();

const container = useTemplateRef<HTMLDivElement>("container");

const labels = { description: "They'll upload right away" };
</script>

<template>
  <div
    ref="container"
    :class="
      css({
        position: 'relative',
        width: '100%',
        minHeight: '28rem',
        padding: 'lg',
        borderRadius: 'lg',
        borderWidth: '1px',
        borderColor: 'neutral.border.muted',
        background: 'neutral.surface.hill',
      })
    "
  >
    <div :class="stack({ gap: 'md', direction: 'column' })">
      <p :class="css({ margin: 0, color: 'neutral.text.muted' })">
        Drag files anywhere over this panel.
      </p>
      <InputUpload
        id="vue-demo-drop-anywhere"
        layout="inline"
        :multiple="true"
        :upload="upload"
        :dropTarget="container"
        title="Or pick files"
        trigger="Browse"
      ></InputUpload>
      <UploadList for="vue-demo-drop-anywhere" density="compact"></UploadList>
    </div>
    <UploadDropOverlay
      for="vue-demo-drop-anywhere"
      placement="absolute"
      :labels="labels"
    ></UploadDropOverlay>
  </div>
</template>

Drag files anywhere over this panel.

Or pick files

// GENERATED from packages/demos/input-upload/drop-anywhere.demo.tsx — edit the source, not this file.
import {
  InputUpload,
  UploadList,
  UploadDropOverlay,
} from "@pindoba/solid-input-upload";
import { simulateUpload } from "@pindoba/core-input-upload";
import { css } from "@pindoba/styled-system/css";
import { stack } from "@pindoba/styled-system/patterns";

const upload = simulateUpload();
export default function DropAnywhereDemo() {
  let container: HTMLDivElement | undefined;
  return (
    <div
      ref={(node) => (container = node)}
      class={css({
        position: "relative",
        width: "100%",
        minHeight: "28rem",
        padding: "lg",
        borderRadius: "lg",
        borderWidth: "1px",
        borderColor: "neutral.border.muted",
        background: "neutral.surface.hill",
      })}
    >
      <div class={stack({ gap: "md", direction: "column" })}>
        <p class={css({ margin: 0, color: "neutral.text.muted" })}>
          Drag files anywhere over this panel.
        </p>
        <InputUpload
          id="solid-demo-drop-anywhere"
          layout="inline"
          multiple
          upload={upload}
          dropTarget={container}
          title="Or pick files"
          trigger="Browse"
        />
        <UploadList for="solid-demo-drop-anywhere" density="compact" />
      </div>
      <UploadDropOverlay
        for="solid-demo-drop-anywhere"
        placement="absolute"
        labels={{ description: "They'll upload right away" }}
      />
    </div>
  );
}

Controlled list

UploadList is controlled: hand it entries and handle onRemove / onRetry yourself when an SDK (S3 multipart, tus, …) already tracks upload state.

PreviewCode

quarterly-plan.pdf20 MB · 5 sec remaining
32%
standup-recording.mov218 MB · 24 sec remaining
67%
brand-guidelines.docx1.2 MB · Uploaded
hero-banner.pngConnection lost

---
// GENERATED from packages/demos/input-upload/controlled.demo.tsx — edit the source, not this file.
import { UploadList } from "@pindoba/astro-input-upload";
import { css } from "@pindoba/styled-system/css";
import type { UploadEntry } from "@pindoba/core-input-upload";

const base = { loaded: 0, timeLeft: null };

const entries = [
  {
    ...base,
    id: "a",
    name: "quarterly-plan.pdf",
    type: "application/pdf",
    size: 21_180_000,
    status: "uploading",
    progress: 32,
    timeLeft: 5,
  },
  {
    ...base,
    id: "b",
    name: "standup-recording.mov",
    type: "video/quicktime",
    size: 228_200_000,
    status: "uploading",
    progress: 67,
    timeLeft: 24,
  },
  {
    ...base,
    id: "c",
    name: "brand-guidelines.docx",
    type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
    size: 1_250_000,
    status: "success",
    progress: 100,
  },
  {
    ...base,
    id: "d",
    name: "hero-banner.png",
    type: "image/png",
    size: 4_800_000,
    status: "error",
    progress: 40,
    error: "Connection lost",
    file: new File([], "hero-banner.png", { type: "image/png" }),
  },
] as UploadEntry[];
---

<div
  class={css({ width: "100%", maxWidth: "48rem" })}
  data-ir-root="input-upload/controlled"
>
  <UploadList entries={entries} data-ir="1" />
</div>

<script>
  import { hydrate } from "./_client/controlled.ts";

  document
    .querySelectorAll('[data-ir-root="input-upload/controlled"]')
    .forEach((root) => hydrate([root]));
</script>

quarterly-plan.pdf20 MB · 5 sec remaining
32%
standup-recording.mov218 MB · 24 sec remaining
67%
brand-guidelines.docx1.2 MB · Uploaded
hero-banner.pngConnection lost

// GENERATED from packages/demos/input-upload/controlled.demo.tsx — edit the source, not this file.
import { useState } from "react";
import { UploadList } from "@pindoba/react-input-upload";
import { css } from "@pindoba/styled-system/css";
import type { UploadEntry } from "@pindoba/core-input-upload";

const base = { loaded: 0, timeLeft: null };
export default function ControlledDemo() {
  const [entries, setEntries] = useState([
    {
      ...base,
      id: "a",
      name: "quarterly-plan.pdf",
      type: "application/pdf",
      size: 21_180_000,
      status: "uploading",
      progress: 32,
      timeLeft: 5,
    },
    {
      ...base,
      id: "b",
      name: "standup-recording.mov",
      type: "video/quicktime",
      size: 228_200_000,
      status: "uploading",
      progress: 67,
      timeLeft: 24,
    },
    {
      ...base,
      id: "c",
      name: "brand-guidelines.docx",
      type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
      size: 1_250_000,
      status: "success",
      progress: 100,
    },
    {
      ...base,
      id: "d",
      name: "hero-banner.png",
      type: "image/png",
      size: 4_800_000,
      status: "error",
      progress: 40,
      error: "Connection lost",
      file: new File([], "hero-banner.png", { type: "image/png" }),
    },
  ] as UploadEntry[]);

  function remove(entry: UploadEntry) {
    setEntries(entries.filter((e) => e.id !== entry.id));
  }

  function retry(entry: UploadEntry) {
    setEntries(
      entries.map((e) =>
        e.id === entry.id
          ? { ...e, status: "uploading", progress: 0, error: undefined }
          : e,
      ),
    );
  }

  return (
    <div className={css({ width: "100%", maxWidth: "48rem" })}>
      <UploadList entries={entries} onRemove={remove} onRetry={retry} />
    </div>
  );
}

quarterly-plan.pdf 20 MB · 5 sec remaining
32%
standup-recording.mov 218 MB · 24 sec remaining
67%
brand-guidelines.docx 1.2 MB · Uploaded
hero-banner.png Connection lost

<script lang="ts">
  // GENERATED from packages/demos/input-upload/controlled.demo.tsx — edit the source, not this file.
  import { UploadList } from "@pindoba/svelte-input-upload";
  import { css } from "@pindoba/styled-system/css";
  import type { UploadEntry } from "@pindoba/core-input-upload";

  const base = { loaded: 0, timeLeft: null };

  let entries = $state([
    {
      ...base,
      id: "a",
      name: "quarterly-plan.pdf",
      type: "application/pdf",
      size: 21_180_000,
      status: "uploading",
      progress: 32,
      timeLeft: 5,
    },
    {
      ...base,
      id: "b",
      name: "standup-recording.mov",
      type: "video/quicktime",
      size: 228_200_000,
      status: "uploading",
      progress: 67,
      timeLeft: 24,
    },
    {
      ...base,
      id: "c",
      name: "brand-guidelines.docx",
      type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
      size: 1_250_000,
      status: "success",
      progress: 100,
    },
    {
      ...base,
      id: "d",
      name: "hero-banner.png",
      type: "image/png",
      size: 4_800_000,
      status: "error",
      progress: 40,
      error: "Connection lost",
      file: new File([], "hero-banner.png", { type: "image/png" }),
    },
  ] as UploadEntry[]);

  function remove(entry: UploadEntry) {
    entries = entries.filter((e) => e.id !== entry.id);
  }
  function retry(entry: UploadEntry) {
    entries = entries.map((e) =>
      e.id === entry.id
        ? { ...e, status: "uploading", progress: 0, error: undefined }
        : e,
    );
  }
</script>

<div class={css({ width: "100%", maxWidth: "48rem" })}>
  <UploadList {entries} onRemove={remove} onRetry={retry}></UploadList>
</div>

quarterly-plan.pdf20 MB · 5 sec remaining
32%
standup-recording.mov218 MB · 24 sec remaining
67%
brand-guidelines.docx1.2 MB · Uploaded
hero-banner.pngConnection lost

<script setup lang="ts">
// GENERATED from packages/demos/input-upload/controlled.demo.tsx — edit the source, not this file.
import { ref } from "vue";
import { UploadList } from "@pindoba/vue-input-upload";
import { css } from "@pindoba/styled-system/css";
import type { UploadEntry } from "@pindoba/core-input-upload";

const base = { loaded: 0, timeLeft: null };

const entries = ref([
  {
    ...base,
    id: "a",
    name: "quarterly-plan.pdf",
    type: "application/pdf",
    size: 21_180_000,
    status: "uploading",
    progress: 32,
    timeLeft: 5,
  },
  {
    ...base,
    id: "b",
    name: "standup-recording.mov",
    type: "video/quicktime",
    size: 228_200_000,
    status: "uploading",
    progress: 67,
    timeLeft: 24,
  },
  {
    ...base,
    id: "c",
    name: "brand-guidelines.docx",
    type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
    size: 1_250_000,
    status: "success",
    progress: 100,
  },
  {
    ...base,
    id: "d",
    name: "hero-banner.png",
    type: "image/png",
    size: 4_800_000,
    status: "error",
    progress: 40,
    error: "Connection lost",
    file: new File([], "hero-banner.png", { type: "image/png" }),
  },
] as UploadEntry[]);

function remove(entry: UploadEntry) {
  entries.value = entries.value.filter((e) => e.id !== entry.id);
}
function retry(entry: UploadEntry) {
  entries.value = entries.value.map((e) =>
    e.id === entry.id
      ? { ...e, status: "uploading", progress: 0, error: undefined }
      : e,
  );
}
</script>

<template>
  <div :class="css({ width: '100%', maxWidth: '48rem' })">
    <UploadList
      :entries="entries"
      :onRemove="remove"
      :onRetry="retry"
    ></UploadList>
  </div>
</template>

quarterly-plan.pdf20 MB · 5 sec remaining
32%
standup-recording.mov218 MB · 24 sec remaining
67%
brand-guidelines.docx1.2 MB · Uploaded
hero-banner.pngConnection lost

// GENERATED from packages/demos/input-upload/controlled.demo.tsx — edit the source, not this file.
import { createSignal } from "solid-js";
import { UploadList } from "@pindoba/solid-input-upload";
import { css } from "@pindoba/styled-system/css";
import type { UploadEntry } from "@pindoba/core-input-upload";

const base = { loaded: 0, timeLeft: null };
export default function ControlledDemo() {
  const [entries, setEntries] = createSignal([
    {
      ...base,
      id: "a",
      name: "quarterly-plan.pdf",
      type: "application/pdf",
      size: 21_180_000,
      status: "uploading",
      progress: 32,
      timeLeft: 5,
    },
    {
      ...base,
      id: "b",
      name: "standup-recording.mov",
      type: "video/quicktime",
      size: 228_200_000,
      status: "uploading",
      progress: 67,
      timeLeft: 24,
    },
    {
      ...base,
      id: "c",
      name: "brand-guidelines.docx",
      type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
      size: 1_250_000,
      status: "success",
      progress: 100,
    },
    {
      ...base,
      id: "d",
      name: "hero-banner.png",
      type: "image/png",
      size: 4_800_000,
      status: "error",
      progress: 40,
      error: "Connection lost",
      file: new File([], "hero-banner.png", { type: "image/png" }),
    },
  ] as UploadEntry[]);

  function remove(entry: UploadEntry) {
    setEntries(entries().filter((e) => e.id !== entry.id));
  }

  function retry(entry: UploadEntry) {
    setEntries(
      entries().map((e) =>
        e.id === entry.id
          ? { ...e, status: "uploading", progress: 0, error: undefined }
          : e,
      ),
    );
  }

  return (
    <div class={css({ width: "100%", maxWidth: "48rem" })}>
      <UploadList entries={entries()} onRemove={remove} onRetry={retry} />
    </div>
  );
}

Tone

Apply semantic tone colors to indicate validation state or context (for example, a red dropzone after rejecting an oversized file).

PreviewCode

Choose a file or drag & drop it hereJPEG, PNG, PDF up to 50 MBChoose a file or drag & drop it hereJPEG, PNG, PDF up to 50 MBChoose a file or drag & drop it hereJPEG, PNG, PDF up to 50 MBChoose a file or drag & drop it hereJPEG, PNG, PDF up to 50 MBChoose a file or drag & drop it hereJPEG, PNG, PDF up to 50 MB

---
// GENERATED from packages/demos/input-upload/tone.demo.tsx — edit the source, not this file.
import InputUpload from "@pindoba/astro-input-upload";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "md", direction: "column" })}>
  <InputUpload tone="neutral" description="JPEG, PNG, PDF up to 50 MB" />
  <InputUpload tone="primary" description="JPEG, PNG, PDF up to 50 MB" />
  <InputUpload tone="success" description="JPEG, PNG, PDF up to 50 MB" />
  <InputUpload tone="danger" description="JPEG, PNG, PDF up to 50 MB" />
  <InputUpload tone="warning" description="JPEG, PNG, PDF up to 50 MB" />
</div>

// GENERATED from packages/demos/input-upload/tone.demo.tsx — edit the source, not this file.
import { InputUpload } from "@pindoba/react-input-upload";
import { stack } from "@pindoba/styled-system/patterns";

export default function ToneDemo() {
  return (
    <div className={stack({ gap: "md", direction: "column" })}>
      <InputUpload tone="neutral" description="JPEG, PNG, PDF up to 50 MB" />
      <InputUpload tone="primary" description="JPEG, PNG, PDF up to 50 MB" />
      <InputUpload tone="success" description="JPEG, PNG, PDF up to 50 MB" />
      <InputUpload tone="danger" description="JPEG, PNG, PDF up to 50 MB" />
      <InputUpload tone="warning" description="JPEG, PNG, PDF up to 50 MB" />
    </div>
  );
}

Choose a file or drag & drop it here JPEG, PNG, PDF up to 50 MB Choose a file or drag & drop it here JPEG, PNG, PDF up to 50 MB Choose a file or drag & drop it here JPEG, PNG, PDF up to 50 MB Choose a file or drag & drop it here JPEG, PNG, PDF up to 50 MB Choose a file or drag & drop it here JPEG, PNG, PDF up to 50 MB

<script lang="ts">
  // GENERATED from packages/demos/input-upload/tone.demo.tsx — edit the source, not this file.
  import InputUpload from "@pindoba/svelte-input-upload";
  import { stack } from "@pindoba/styled-system/patterns";
</script>

<div class={stack({ gap: "md", direction: "column" })}>
  <InputUpload tone="neutral" description="JPEG, PNG, PDF up to 50 MB"
  ></InputUpload>
  <InputUpload tone="primary" description="JPEG, PNG, PDF up to 50 MB"
  ></InputUpload>
  <InputUpload tone="success" description="JPEG, PNG, PDF up to 50 MB"
  ></InputUpload>
  <InputUpload tone="danger" description="JPEG, PNG, PDF up to 50 MB"
  ></InputUpload>
  <InputUpload tone="warning" description="JPEG, PNG, PDF up to 50 MB"
  ></InputUpload>
</div>

<script setup lang="ts">
// GENERATED from packages/demos/input-upload/tone.demo.tsx — edit the source, not this file.
import { InputUpload } from "@pindoba/vue-input-upload";
import { stack } from "@pindoba/styled-system/patterns";
</script>

<template>
  <div :class="stack({ gap: 'md', direction: 'column' })">
    <InputUpload
      tone="neutral"
      description="JPEG, PNG, PDF up to 50 MB"
    ></InputUpload>
    <InputUpload
      tone="primary"
      description="JPEG, PNG, PDF up to 50 MB"
    ></InputUpload>
    <InputUpload
      tone="success"
      description="JPEG, PNG, PDF up to 50 MB"
    ></InputUpload>
    <InputUpload
      tone="danger"
      description="JPEG, PNG, PDF up to 50 MB"
    ></InputUpload>
    <InputUpload
      tone="warning"
      description="JPEG, PNG, PDF up to 50 MB"
    ></InputUpload>
  </div>
</template>

// GENERATED from packages/demos/input-upload/tone.demo.tsx — edit the source, not this file.
import { InputUpload } from "@pindoba/solid-input-upload";
import { stack } from "@pindoba/styled-system/patterns";

export default function ToneDemo() {
  return (
    <div class={stack({ gap: "md", direction: "column" })}>
      <InputUpload tone="neutral" description="JPEG, PNG, PDF up to 50 MB" />
      <InputUpload tone="primary" description="JPEG, PNG, PDF up to 50 MB" />
      <InputUpload tone="success" description="JPEG, PNG, PDF up to 50 MB" />
      <InputUpload tone="danger" description="JPEG, PNG, PDF up to 50 MB" />
      <InputUpload tone="warning" description="JPEG, PNG, PDF up to 50 MB" />
    </div>
  );
}

Size

Four sizes scale the dropzone’s min-height, padding, icon, and typography together.

PreviewCode

Choose a file or drag & drop it hereExtra smallChoose a file or drag & drop it hereSmallChoose a file or drag & drop it hereMediumChoose a file or drag & drop it hereLarge

---
// GENERATED from packages/demos/input-upload/size.demo.tsx — edit the source, not this file.
import InputUpload from "@pindoba/astro-input-upload";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "md", direction: "column" })}>
  <InputUpload size="xs" description="Extra small" />
  <InputUpload size="sm" description="Small" />
  <InputUpload size="md" description="Medium" />
  <InputUpload size="lg" description="Large" />
</div>

Choose a file or drag & drop it hereExtra smallChoose a file or drag & drop it hereSmallChoose a file or drag & drop it hereMediumChoose a file or drag & drop it hereLarge

// GENERATED from packages/demos/input-upload/size.demo.tsx — edit the source, not this file.
import { InputUpload } from "@pindoba/react-input-upload";
import { stack } from "@pindoba/styled-system/patterns";

export default function SizeDemo() {
  return (
    <div className={stack({ gap: "md", direction: "column" })}>
      <InputUpload size="xs" description="Extra small" />
      <InputUpload size="sm" description="Small" />
      <InputUpload size="md" description="Medium" />
      <InputUpload size="lg" description="Large" />
    </div>
  );
}

Choose a file or drag & drop it here Extra small Choose a file or drag & drop it here Small Choose a file or drag & drop it here Medium Choose a file or drag & drop it here Large

<script lang="ts">
  // GENERATED from packages/demos/input-upload/size.demo.tsx — edit the source, not this file.
  import InputUpload from "@pindoba/svelte-input-upload";
  import { stack } from "@pindoba/styled-system/patterns";
</script>

<div class={stack({ gap: "md", direction: "column" })}>
  <InputUpload size="xs" description="Extra small"></InputUpload>
  <InputUpload size="sm" description="Small"></InputUpload>
  <InputUpload size="md" description="Medium"></InputUpload>
  <InputUpload size="lg" description="Large"></InputUpload>
</div>

Choose a file or drag & drop it hereExtra smallChoose a file or drag & drop it hereSmallChoose a file or drag & drop it hereMediumChoose a file or drag & drop it hereLarge

<script setup lang="ts">
// GENERATED from packages/demos/input-upload/size.demo.tsx — edit the source, not this file.
import { InputUpload } from "@pindoba/vue-input-upload";
import { stack } from "@pindoba/styled-system/patterns";
</script>

<template>
  <div :class="stack({ gap: 'md', direction: 'column' })">
    <InputUpload size="xs" description="Extra small"></InputUpload>
    <InputUpload size="sm" description="Small"></InputUpload>
    <InputUpload size="md" description="Medium"></InputUpload>
    <InputUpload size="lg" description="Large"></InputUpload>
  </div>
</template>

Choose a file or drag & drop it hereExtra smallChoose a file or drag & drop it hereSmallChoose a file or drag & drop it hereMediumChoose a file or drag & drop it hereLarge

// GENERATED from packages/demos/input-upload/size.demo.tsx — edit the source, not this file.
import { InputUpload } from "@pindoba/solid-input-upload";
import { stack } from "@pindoba/styled-system/patterns";

export default function SizeDemo() {
  return (
    <div class={stack({ gap: "md", direction: "column" })}>
      <InputUpload size="xs" description="Extra small" />
      <InputUpload size="sm" description="Small" />
      <InputUpload size="md" description="Medium" />
      <InputUpload size="lg" description="Large" />
    </div>
  );
}

Slots

Override any slot — icon, title, description, or trigger — to customize the dropzone content. Pass strings via the matching props (title, description, trigger) for simple text overrides, or use named slots / snippets for rich content.

PreviewCode

Custom icon

Choose a file or drag & drop it hereJPEG or PNG, up to 10 MB

Rich title and description

Drop contracts here Accepts .pdf, .doc, .docx

Custom trigger label

Upload your résuméOne PDF, 5 MB max

---
// GENERATED from packages/demos/input-upload/slots.demo.tsx — edit the source, not this file.
import InputUpload from "@pindoba/astro-input-upload";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "xl", direction: "column" })}>
  <div>
    <h3>Custom icon</h3>
    <InputUpload accept="image/*" description="JPEG or PNG, up to 10 MB">
      <svg
        slot="icon"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="1.75"
        stroke-linecap="round"
        stroke-linejoin="round"
        aria-hidden="true"
      >
        <rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect>
        <circle cx="9" cy="9" r="2"></circle>
        <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"></path>
      </svg>
    </InputUpload>
  </div>

  <div>
    <h3>Rich title and description</h3>
    <InputUpload accept=".pdf,.doc,.docx" multiple>
      <Fragment slot="title">
        Drop <em>contracts</em> here
      </Fragment>
      <Fragment slot="description">
        Accepts <code>.pdf</code>, <code>.doc</code>, <code>.docx</code>
      </Fragment>
    </InputUpload>
  </div>

  <div>
    <h3>Custom trigger label</h3>
    <InputUpload
      title="Upload your résumé"
      description="One PDF, 5 MB max"
      trigger="Pick a PDF"
      accept="application/pdf"
    />
  </div>
</div>

Custom icon

Choose a file or drag & drop it hereJPEG or PNG, up to 10 MB

Rich title and description

Drop contracts hereAccepts .pdf, .doc, .docx

Custom trigger label

Upload your résuméOne PDF, 5 MB max

// GENERATED from packages/demos/input-upload/slots.demo.tsx — edit the source, not this file.
import { InputUpload } from "@pindoba/react-input-upload";
import { stack } from "@pindoba/styled-system/patterns";

export default function SlotsDemo() {
  return (
    <div className={stack({ gap: "xl", direction: "column" })}>
      <div>
        <h3>Custom icon</h3>
        <InputUpload
          accept="image/*"
          description="JPEG or PNG, up to 10 MB"
          icon={
            <svg
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="1.75"
              strokeLinecap="round"
              strokeLinejoin="round"
              aria-hidden="true"
            >
              <rect width="18" height="18" x="3" y="3" rx="2" ry="2" />
              <circle cx="9" cy="9" r="2" />
              <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" />
            </svg>
          }
        />
      </div>

      <div>
        <h3>Rich title and description</h3>
        <InputUpload
          accept=".pdf,.doc,.docx"
          multiple
          title={
            <>
              Drop <em>contracts</em> here
            </>
          }
          description={
            <>
              Accepts <code>.pdf</code>, <code>.doc</code>, <code>.docx</code>
            </>
          }
        />
      </div>

      <div>
        <h3>Custom trigger label</h3>
        <InputUpload
          title="Upload your résumé"
          description="One PDF, 5 MB max"
          trigger="Pick a PDF"
          accept="application/pdf"
        />
      </div>
    </div>
  );
}

Custom icon

Choose a file or drag & drop it here JPEG or PNG, up to 10 MB

Rich title and description

Drop contracts here Accepts .pdf, .doc, .docx

Custom trigger label

Upload your résumé One PDF, 5 MB max

<script lang="ts">
  // GENERATED from packages/demos/input-upload/slots.demo.tsx — edit the source, not this file.
  import InputUpload from "@pindoba/svelte-input-upload";
  import { stack } from "@pindoba/styled-system/patterns";
</script>

<div class={stack({ gap: "xl", direction: "column" })}>
  <div>
    <h3>Custom icon</h3>
    <InputUpload accept="image/*" description="JPEG or PNG, up to 10 MB">
      {#snippet icon()}
        <svg
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="1.75"
          stroke-linecap="round"
          stroke-linejoin="round"
          aria-hidden="true"
        >
          <rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect>
          <circle cx="9" cy="9" r="2"></circle>
          <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"></path>
        </svg>
      {/snippet}
    </InputUpload>
  </div>

  <div>
    <h3>Rich title and description</h3>
    <InputUpload accept=".pdf,.doc,.docx" multiple>
      {#snippet title()}
        Drop <em> contracts </em> here
      {/snippet}
      {#snippet description()}
        Accepts <code> .pdf </code>, <code> .doc </code>, <code> .docx </code>
      {/snippet}
    </InputUpload>
  </div>

  <div>
    <h3>Custom trigger label</h3>
    <InputUpload
      title="Upload your résumé"
      description="One PDF, 5 MB max"
      trigger="Pick a PDF"
      accept="application/pdf"
    ></InputUpload>
  </div>
</div>

Custom icon

Choose a file or drag & drop it hereJPEG or PNG, up to 10 MB

Rich title and description

Drop contracts here Accepts .pdf, .doc, .docx

Custom trigger label

Upload your résuméOne PDF, 5 MB max

<script setup lang="ts">
// GENERATED from packages/demos/input-upload/slots.demo.tsx — edit the source, not this file.
import { InputUpload } from "@pindoba/vue-input-upload";
import { stack } from "@pindoba/styled-system/patterns";
</script>

<template>
  <div :class="stack({ gap: 'xl', direction: 'column' })">
    <div>
      <h3>Custom icon</h3>
      <InputUpload accept="image/*" description="JPEG or PNG, up to 10 MB">
        <template #icon>
          <svg
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="1.75"
            stroke-linecap="round"
            stroke-linejoin="round"
            aria-hidden="true"
          >
            <rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect>
            <circle cx="9" cy="9" r="2"></circle>
            <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"></path>
          </svg>
        </template>
      </InputUpload>
    </div>

    <div>
      <h3>Rich title and description</h3>
      <InputUpload accept=".pdf,.doc,.docx" :multiple="true">
        <template #title> Drop <em>contracts</em> here </template>
        <template #description>
          Accepts <code>.pdf</code>, <code>.doc</code>, <code>.docx</code>
        </template>
      </InputUpload>
    </div>

    <div>
      <h3>Custom trigger label</h3>
      <InputUpload
        title="Upload your résumé"
        description="One PDF, 5 MB max"
        trigger="Pick a PDF"
        accept="application/pdf"
      ></InputUpload>
    </div>
  </div>
</template>

Custom icon

Choose a file or drag & drop it hereJPEG or PNG, up to 10 MB

Rich title and description

Drop contracts hereAccepts .pdf, .doc, .docx

Custom trigger label

Upload your résuméOne PDF, 5 MB max

// GENERATED from packages/demos/input-upload/slots.demo.tsx — edit the source, not this file.
import { InputUpload } from "@pindoba/solid-input-upload";
import { stack } from "@pindoba/styled-system/patterns";

export default function SlotsDemo() {
  return (
    <div class={stack({ gap: "xl", direction: "column" })}>
      <div>
        <h3>Custom icon</h3>
        <InputUpload
          accept="image/*"
          description="JPEG or PNG, up to 10 MB"
          icon={
            <svg
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="1.75"
              stroke-linecap="round"
              stroke-linejoin="round"
              aria-hidden="true"
            >
              <rect width="18" height="18" x="3" y="3" rx="2" ry="2" />
              <circle cx="9" cy="9" r="2" />
              <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" />
            </svg>
          }
        />
      </div>

      <div>
        <h3>Rich title and description</h3>
        <InputUpload
          accept=".pdf,.doc,.docx"
          multiple
          title={
            <>
              Drop <em>contracts</em> here
            </>
          }
          description={
            <>
              Accepts <code>.pdf</code>, <code>.doc</code>, <code>.docx</code>
            </>
          }
        />
      </div>

      <div>
        <h3>Custom trigger label</h3>
        <InputUpload
          title="Upload your résumé"
          description="One PDF, 5 MB max"
          trigger="Pick a PDF"
          accept="application/pdf"
        />
      </div>
    </div>
  );
}

Custom Styling

The passThrough prop provides per-slot escape hatches: style accepts a Panda CSS SystemStyleObject and props forwards arbitrary HTML attributes onto the slot element.

PreviewCode

Pill-shaped surface

Drop hereJPEG or PNG up to 5 MB

Solid border + accented icon

Upload your resumePDF only, 10 MB max

Accessibility props

Drop your avatar

---
// GENERATED from packages/demos/input-upload/custom.demo.tsx — edit the source, not this file.
import InputUpload from "@pindoba/astro-input-upload";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "xl", direction: "column" })}>
  <div>
    <h3>Pill-shaped surface</h3>
    <InputUpload
      title="Drop here"
      description="JPEG or PNG up to 5 MB"
      passThrough={{
        root: { style: { borderRadius: "full" } },
      }}
    />
  </div>

  <div>
    <h3>Solid border + accented icon</h3>
    <InputUpload
      title="Upload your resume"
      description="PDF only, 10 MB max"
      trigger="Pick a file"
      passThrough={{
        root: { style: { borderStyle: "solid" } },
        icon: { style: { color: "primary.text" } },
      }}
    />
  </div>

  <div>
    <h3>Accessibility props</h3>
    <InputUpload
      title="Drop your avatar"
      passThrough={{
        input: {
          props: {
            "aria-label": "Upload avatar",
            "data-testid": "avatar-upload",
          },
        },
      }}
    />
  </div>
</div>

Pill-shaped surface

Drop hereJPEG or PNG up to 5 MB

Solid border + accented icon

Upload your resumePDF only, 10 MB max

Accessibility props

Drop your avatar

// GENERATED from packages/demos/input-upload/custom.demo.tsx — edit the source, not this file.
import { InputUpload } from "@pindoba/react-input-upload";
import { stack } from "@pindoba/styled-system/patterns";

export default function CustomDemo() {
  return (
    <div className={stack({ gap: "xl", direction: "column" })}>
      <div>
        <h3>Pill-shaped surface</h3>
        <InputUpload
          title="Drop here"
          description="JPEG or PNG up to 5 MB"
          passThrough={{
            root: { style: { borderRadius: "full" } },
          }}
        />
      </div>

      <div>
        <h3>Solid border + accented icon</h3>
        <InputUpload
          title="Upload your resume"
          description="PDF only, 10 MB max"
          trigger="Pick a file"
          passThrough={{
            root: { style: { borderStyle: "solid" } },
            icon: { style: { color: "primary.text" } },
          }}
        />
      </div>

      <div>
        <h3>Accessibility props</h3>
        <InputUpload
          title="Drop your avatar"
          passThrough={{
            input: {
              props: {
                "aria-label": "Upload avatar",
                "data-testid": "avatar-upload",
              },
            },
          }}
        />
      </div>
    </div>
  );
}

Pill-shaped surface

Drop here JPEG or PNG up to 5 MB

Solid border + accented icon

Upload your resume PDF only, 10 MB max

Accessibility props

Drop your avatar

<script lang="ts">
  // GENERATED from packages/demos/input-upload/custom.demo.tsx — edit the source, not this file.
  import InputUpload from "@pindoba/svelte-input-upload";
  import { stack } from "@pindoba/styled-system/patterns";
</script>

<div class={stack({ gap: "xl", direction: "column" })}>
  <div>
    <h3>Pill-shaped surface</h3>
    <InputUpload
      title="Drop here"
      description="JPEG or PNG up to 5 MB"
      passThrough={{
        root: { style: { borderRadius: "full" } },
      }}
    ></InputUpload>
  </div>

  <div>
    <h3>Solid border + accented icon</h3>
    <InputUpload
      title="Upload your resume"
      description="PDF only, 10 MB max"
      trigger="Pick a file"
      passThrough={{
        root: { style: { borderStyle: "solid" } },
        icon: { style: { color: "primary.text" } },
      }}
    ></InputUpload>
  </div>

  <div>
    <h3>Accessibility props</h3>
    <InputUpload
      title="Drop your avatar"
      passThrough={{
        input: {
          props: {
            "aria-label": "Upload avatar",
            "data-testid": "avatar-upload",
          },
        },
      }}
    ></InputUpload>
  </div>
</div>

Pill-shaped surface

Drop hereJPEG or PNG up to 5 MB

Solid border + accented icon

Upload your resumePDF only, 10 MB max

Accessibility props

Drop your avatar

<script setup lang="ts">
// GENERATED from packages/demos/input-upload/custom.demo.tsx — edit the source, not this file.
import { InputUpload } from "@pindoba/vue-input-upload";
import { stack } from "@pindoba/styled-system/patterns";
</script>

<template>
  <div :class="stack({ gap: 'xl', direction: 'column' })">
    <div>
      <h3>Pill-shaped surface</h3>
      <InputUpload
        title="Drop here"
        description="JPEG or PNG up to 5 MB"
        :passThrough="{
          root: { style: { borderRadius: 'full' } },
        }"
      ></InputUpload>
    </div>

    <div>
      <h3>Solid border + accented icon</h3>
      <InputUpload
        title="Upload your resume"
        description="PDF only, 10 MB max"
        trigger="Pick a file"
        :passThrough="{
          root: { style: { borderStyle: 'solid' } },
          icon: { style: { color: 'primary.text' } },
        }"
      ></InputUpload>
    </div>

    <div>
      <h3>Accessibility props</h3>
      <InputUpload
        title="Drop your avatar"
        :passThrough="{
          input: {
            props: {
              'aria-label': 'Upload avatar',
              'data-testid': 'avatar-upload',
            },
          },
        }"
      ></InputUpload>
    </div>
  </div>
</template>

Pill-shaped surface

Drop hereJPEG or PNG up to 5 MB

Solid border + accented icon

Upload your resumePDF only, 10 MB max

Accessibility props

Drop your avatar

// GENERATED from packages/demos/input-upload/custom.demo.tsx — edit the source, not this file.
import { InputUpload } from "@pindoba/solid-input-upload";
import { stack } from "@pindoba/styled-system/patterns";

export default function CustomDemo() {
  return (
    <div class={stack({ gap: "xl", direction: "column" })}>
      <div>
        <h3>Pill-shaped surface</h3>
        <InputUpload
          title="Drop here"
          description="JPEG or PNG up to 5 MB"
          passThrough={{
            root: { style: { borderRadius: "full" } },
          }}
        />
      </div>

      <div>
        <h3>Solid border + accented icon</h3>
        <InputUpload
          title="Upload your resume"
          description="PDF only, 10 MB max"
          trigger="Pick a file"
          passThrough={{
            root: { style: { borderStyle: "solid" } },
            icon: { style: { color: "primary.text" } },
          }}
        />
      </div>

      <div>
        <h3>Accessibility props</h3>
        <InputUpload
          title="Drop your avatar"
          passThrough={{
            input: {
              props: {
                "aria-label": "Upload avatar",
                "data-testid": "avatar-upload",
              },
            },
          }}
        />
      </div>
    </div>
  );
}

Upload Button

For compact entry points where a full dropzone is overkill, use the sibling <UploadButton> component. It renders a real Pindoba <Button> that opens the file picker on click and still accepts drag-and-drop on its surface. Forward emphasis and tone to pick the button look — they’re passed straight through to the underlying button.

PreviewCode

---
// GENERATED from packages/demos/input-upload/upload-button.demo.tsx — edit the source, not this file.
import { UploadButton } from "@pindoba/astro-input-upload";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "md", direction: "column", align: "flex-start" })}>
  <UploadButton emphasis="primary" label="Upload" />
  <UploadButton emphasis="secondary" label="Upload" />
  <UploadButton emphasis="ghost" label="Upload" />
  <UploadButton emphasis="primary" tone="danger" label="Upload" />
  <UploadButton emphasis="secondary" label="Upload (max 1 KB)" maxSize={1024} />
</div>

// GENERATED from packages/demos/input-upload/upload-button.demo.tsx — edit the source, not this file.
import { UploadButton } from "@pindoba/react-input-upload";
import { stack } from "@pindoba/styled-system/patterns";

export default function UploadButtonDemo() {
  return (
    <div
      className={stack({ gap: "md", direction: "column", align: "flex-start" })}
    >
      <UploadButton emphasis="primary" label="Upload" />
      <UploadButton emphasis="secondary" label="Upload" />
      <UploadButton emphasis="ghost" label="Upload" />
      <UploadButton emphasis="primary" tone="danger" label="Upload" />
      <UploadButton
        emphasis="secondary"
        label="Upload (max 1 KB)"
        maxSize={1024}
      />
    </div>
  );
}

<script lang="ts">
  // GENERATED from packages/demos/input-upload/upload-button.demo.tsx — edit the source, not this file.
  import { UploadButton } from "@pindoba/svelte-input-upload";
  import { stack } from "@pindoba/styled-system/patterns";
</script>

<div class={stack({ gap: "md", direction: "column", align: "flex-start" })}>
  <UploadButton emphasis="primary" label="Upload"></UploadButton>
  <UploadButton emphasis="secondary" label="Upload"></UploadButton>
  <UploadButton emphasis="ghost" label="Upload"></UploadButton>
  <UploadButton emphasis="primary" tone="danger" label="Upload"></UploadButton>
  <UploadButton emphasis="secondary" label="Upload (max 1 KB)" maxSize={1024}
  ></UploadButton>
</div>

<script setup lang="ts">
// GENERATED from packages/demos/input-upload/upload-button.demo.tsx — edit the source, not this file.
import { UploadButton } from "@pindoba/vue-input-upload";
import { stack } from "@pindoba/styled-system/patterns";
</script>

<template>
  <div :class="stack({ gap: 'md', direction: 'column', align: 'flex-start' })">
    <UploadButton emphasis="primary" label="Upload"></UploadButton>
    <UploadButton emphasis="secondary" label="Upload"></UploadButton>
    <UploadButton emphasis="ghost" label="Upload"></UploadButton>
    <UploadButton
      emphasis="primary"
      tone="danger"
      label="Upload"
    ></UploadButton>
    <UploadButton
      emphasis="secondary"
      label="Upload (max 1 KB)"
      :maxSize="1024"
    ></UploadButton>
  </div>
</template>

// GENERATED from packages/demos/input-upload/upload-button.demo.tsx — edit the source, not this file.
import { UploadButton } from "@pindoba/solid-input-upload";
import { stack } from "@pindoba/styled-system/patterns";

export default function UploadButtonDemo() {
  return (
    <div class={stack({ gap: "md", direction: "column", align: "flex-start" })}>
      <UploadButton emphasis="primary" label="Upload" />
      <UploadButton emphasis="secondary" label="Upload" />
      <UploadButton emphasis="ghost" label="Upload" />
      <UploadButton emphasis="primary" tone="danger" label="Upload" />
      <UploadButton
        emphasis="secondary"
        label="Upload (max 1 KB)"
        maxSize={1024}
      />
    </div>
  );
}

Upload Button with a drop area

UploadButton takes the same dropTarget as the dropzone: "document", a CSS selector or an element accepts dropped files into the button’s engine — same validation, entries, autoUpload and onEntriesChange as a pick from the button. That’s the file-browser pattern: an “Upload” button in the toolbar and drops anywhere on the file list. Give the button an id and point an UploadDropOverlay (and an UploadList) at it with for.

PreviewCode

Files