<script>
  import DropZone from "svelte-atoms/DropZone.svelte";
  
  let fileName = "";
  const onChange = e => {
    const file = e.dataTransfer ? e.dataTransfer.files[0] : e.target.files[0];
    fileName = file ? file.name : "";
  };
</script>
 <DropZone fileTitle={fileName} dropOnPage on:drop={onChange} on:change={onChange} />

<script>
  import DropZone from "svelte-atoms/DropZone.svelte";
</script>
 <DropZone isLoading />

<script>
  import DropZone from "svelte-atoms/DropZone.svelte";
</script>
<DropZone fileTitle="filename.txt" />
<DropZone fileTitle="filename.txt" error="error text" />

<script>
  import DropZone from "svelte-atoms/DropZone.svelte";
</script>
<DropZone disabled />