Dropzone

A barebone area for receiving files or data via drag and drop events.

Props

Prop	Type	Default	Description
`data`	`File[] \| string`	`undefined`	The dropped data (files or text). Supports $bindable.
`mode`	`'file' \| 'text'`	`'file'`	Specifies the type of data the dropzone accepts.
`dropEffect`	`'copy' \| 'move' \| 'link' \| 'none'`	`'copy'`	The visual feedback during the drag operation.
`componentId`	`string`	`''`	The unique identifier for the component element.
`variant`	`string`	`''`	Custom CSS variant class.
`children`	`Snippet<[{ isDragOver: boolean; isInvalid: boolean }]>`	`required`	Snippet for the dropzone content. Receives drag state.

Optimized for file uploads. The cursor indicates a "Copy" operation.

Drag & Drop Files Here

<script>

  import { Dropzone } from 'fluid-ui-svelte/components';

  let droppedFiles = $state<File[]>([]);

</script>

<Dropzone bind:data={droppedFiles} mode="file" dropEffect="copy">

  {#snippet children({ isDragOver })}

    <div class="flex flex-col items-center gap-2">

      <p class="font-medium">

        {isDragOver ? 'Drop Files Now' : 'Drag & Drop Files Here'}

      </p>

      {#if droppedFiles.length > 0}

        <div class="mt-4 w-full text-left text-sm bg-neutral-100 p-2 rounded">

          <p class="font-bold mb-1">Dropped Files:</p>

          <ul class="list-disc pl-4">

            {#each droppedFiles as file}

              <li>{file.name} ({Math.round(file.size / 1024)} KB)</li>

            {/each}

          </ul>

        </div>

      {/if}

    </div>

  {/snippet}

</Dropzone>

Designed for moving text or data between applications. The cursor indicates a "Move" operation. This dropzone strictly rejects files.

Drag User Alice

Drag User Bob

Drag Draggable Elements or Text Here

<script>

  import { Dropzone } from 'fluid-ui-svelte/components';

  let droppedData = $state('');

</script>

<Dropzone bind:data={droppedData} mode="text" dropEffect="move">

  {#snippet children({ isDragOver })}

    <div class="flex flex-col items-center gap-2">

      <p class="font-medium">

        {isDragOver ? 'Drop Data Now' : 'Drag Text/Data Here'}

      </p>

      {#if droppedData}

        <div class="mt-4 w-full text-left text-sm bg-neutral-100 p-2 rounded border border-neutral-200">

          <p class="font-bold mb-1 text-primary-600">Captured Data:</p>

          <pre class="whitespace-pre-wrap">{droppedData}</pre>

        </div>

      {/if}

    </div>

  {/snippet}

</Dropzone>