Dropzone

FileWithUrl Type

Each file in the files array follows this structure:

Accept Attribute

The accept prop allows you to specify which file types are allowed:

• accept="image/*" - All image types
• accept=".pdf,.doc,.docx" - Specific file extensions
• accept="image/png,image/jpeg" - Specific MIME types

Usage Example

<script lang="ts">
  import { Dropzone } from 'ui-svelte';

  let files = $state([]);

  function handleChange(newFiles) {
    console.log('Files uploaded:', newFiles);
  }
</script>

<Dropzone
  name="documents"
  label="Upload Documents"
  accept=".pdf,.doc,.docx"
  multiple={true}
  helpText="PDF, DOC, or DOCX files only"
  onchange={handleChange}
  bind:files
/>