svelte-file-dropzone

SvelteJS component for file upload and dropzone.The component is Svelte implementation of react-dropzone.

This is a fork of svelte-file-dropzone which allows the user to edit the label inside of the dropzone.

Demo

Click here for Storybook link

Installation

npm install svelte-file-dropzone-with-label

or

yarn add svelte-file-dropzone-with-label

Usage

<script>
  import Dropzone from "svelte-file-dropzone-with-label/Dropzone.svelte";

  let files = {
    accepted: [],
    rejected: []
  };

  function handleFilesSelect(e) {
    const { acceptedFiles, fileRejections } = e.detail;
    files.accepted = [...files.accepted, ...acceptedFiles];
    files.rejected = [...files.rejected, ...fileRejections];
  }
</script>

<Dropzone on:drop={handleFilesSelect} />
<ol>
  {#each files.accepted as item}
    <li>{item.name}</li>
  {/each}
</ol>

API

Props

| Prop Name | Description | Default Value | | --------------------- | ---------------------------------------------------------------------------------------- | --------------------------------------------------------- | | accept | Set accepted file types. See https://github.com/okonet/attr-accept for more information. | undefined | | disabled | | false | | maxSize | | Infinity | | minSize | | 0 | | multiple | if true, multiple files can be selected at once | true | | preventDropOnDocument | 1231 | true | | noClick | disable click events | false | | noKeyboard | disable keyboard events | false | | noDrag | disable drag events | false | | containerClasses | custom container classes | "" | | containerStyles | custom inline container styles | "" | | disableDefaultStyles | don't apply default styles to container | false | | inputElement | reference to inputElement | undefined | | required | html5 required attribute added to input | false | | label | label inside of the dropzone | "Drag 'n' drop some files here, or click to select files" |

Events

| Event Name | Description | event.detail info | | ---------------- | ----------- | -------------------------------------- | | dragenter | | {dragEvent: event} | | dragover | | {dragEvent: event} | | dragleave | | {dragEvent: event} | | drop | | {acceptedFiles,fileRejections,event} | | filedropped | | {event} | | droprejected | | {fileRejections,event} | | dropaccepted | | {acceptedFiles,event} | | filedialogcancel | | |

Examples

Click here to view stories implementation

Credits

Component is reimplementation react-dropzone. Complete credit goes to author and contributors of react-dropzone.

License

MIT