<script>
import * as fileSize from "filesize";
import {filedrop} from 'filedrop-svelte'
let files
let options = {}
</script>
<h1><a href="https://github.com/chanced/filedrop-svelte">FileDrop</a> Action Example</h1>
<p>
see <a href="https://svelte.dev/repl/511ad04931514bcf98f7408edb08d075?version=3.41.0"> this repl for the component</a>.
</p>
<div use:filedrop={options} on:filedrop={(e) => {files = e.detail.files}} class="filedrop">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48" height="48"
><path fill="none" d="M0 0h24v24H0z" /><path
d="M1 14.5a6.496 6.496 0 0 1 3.064-5.519 8.001 8.001 0 0 1 15.872 0 6.5 6.5 0 0 1-2.936 12L7 21c-3.356-.274-6-3.078-6-6.5zm15.848 4.487a4.5 4.5 0 0 0 2.03-8.309l-.807-.503-.12-.942a6.001 6.001 0 0 0-11.903 0l-.12.942-.805.503a4.5 4.5 0 0 0 2.029 8.309l.173.013h9.35l.173-.013zM13 13v4h-2v-4H8l4-5 4 5h-3z"
/></svg>
<p>Drag & drop files</p>
</div>
{#if files}
<h2>Accepted files</h2>
<ul>
{#each files.accepted as file}
<li>{file.name} - {fileSize(file.size)}</li>
{/each}
</ul>
<h2>Rejected files</h2>
<ul>
{#each files.rejected as rejected}
<li>{rejected.file.name} - {rejected.error.message}</li>
{/each}
</ul>
{/if}
<style>
.filedrop {
background-color: #f0f0f0;