<script>
  import FileUpload from "svelte-atoms/FileUpload.svelte";
  
  let fileName = "";
  const onChange = e => {
    const file = e.target.files[0];
    fileName = file ? file.name : "";
  };
</script>

<FileUpload title="Upload file" subtitle={fileName} />

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

<FileUpload title="Loading" subtitle="Please wait" isLoading />

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

<FileUpload title="Disabled" subtitle="Not clickable" disabled />

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

<FileUpload title="Uploaded" subtitle="click here to replace" status="positive" />

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

<FileUpload title="File type not supported" subtitle="select another file" status="negative" />