Filedrop Svelte

File dropzone for Svelte.

#dropzone #file #svelte #drag-and-drop

Need a Svelte website built?

Hire a professional Svelte developer today.

Download

FileDrop

A file dropzone action & component for Svelte.

Install

npm i filedrop-svelte -D

# yarn add filedrop-svelte -dev

If using Typescript, see the Typescript section.

Usage

filedrop-svelte comes with both a component and an action. The component is basically a wrapper around the action with some some default styling.

Component

See this REPL for minmimal usage.

<script>
    import FileDrop from "filedrop-svelte";
    import type { Files } from "filedrop-svelte";
    import fileSize from "filesize";
    let files: Files;
</script>

<FileDrop on:filedrop={(e) => { files = e.detail.files }}>
        Upload files
</FileDrop>

{#if files}
    <h3>Accepted files</h3>
    <ul>
        {#each files.accepted as file}
            <li>{file.name} - {fileSize(file.size)}</li>
        {/each}
    </ul>
    <h3>Rejected files</h3>
    <ul>
        {#each files.rejected as rejected}
            <li>{rejected.file.name} - {rejected.error.message}</li>
        {/each}
    </ul>
{/if}

Action

See this REPL for minimal usage.

<script>
    import { filedrop } from "filedrop-svelte";
    import type { Files, FileDropOptions } from "filedrop-svelte";
    let options: FileDropOptions = {};
    let files: Files;
</script>

<div use:filedrop={options} on:filedrop={(e) => {files = e.detail.files}}>
    <!-- you can add your input[type="file"] here if you want.
    or you can omit it and it'll be appended -->
    Drag &amp; drop files
    {files}
</div>

Reference

Options

parameter	purpose	type	default
`accept`	specify file types to accept. See HTML attribute: accept on MDN Web Docs for more information.	`string` `string[]`	`undefined`
`maxSize`	the maximum size a file can be in bytes.	`number`	`undefined`
`minSize`	the minimum size a file can be in bytes.	`number`	`undefined`
`fileLimit`	total number of files allowed in a transaction. A value of 0 disables the action/component, 1 turns multiple off, and any other value enables multiple. Any attempt to upload more files than allowed will result in the files being placed in rejections	`numer`	`undefined`
`multiple`	sets the file input to `multiple`. See HTML attribute: multiple on MDN Web Docs for more information.	`boolean`	`true`
`disabled`	disables the action/component, removing all event listeners	`boolean`	`false`
`windowDrop`	determines whether or not files can be dropped anywhere in the window. A value of `false` would require that the files be droppped within the `<FileDrop>` component or the element with `use:filedrop`.	`boolean`	`true`
`clickToUpload`	causes the containing element to be treated as the input. If hideInput is true or undefined, disabling this does not change the `tabindex` of the container or remove the `keydown` eventListener	`boolean`	`true`
`tabIndex`	tab index of the container. if `disabled` is `true` then this is set to `-1`. If `clickToUpload` is `true` or `undefined`, this defaults to 0.	`number`	`0`
`hideInput`	if true or undefined, input[type='file'] will be set to display:none	`boolean`	`true`
`input`	allows you to explicitly pass a reference to the file `HTMLInputElement` as a parameter. If `undefined`, the action will search for `input[type="file"]`. If one is not found, it will be appeneded to the element with `use:filedrop`	`HTMLInputElement`	`undefined`

Events

event	description	`event.detail`
`filedrop`	one or more files has been selected in the file dialog or drag-and-dropped	`FileDropSelectEvent`
`filedragenter`	a dragenter event has occurred on the container element containnig one or more files	`FileDropDragEvent`
`filedragleave`	a dragleave event has occurred on the container element containing one or more files	`FileDropDragEvent`
`filedragover`	a dragover event has occurred on the container element containing one or more files	`FileDropDragEvent`
`filedialogcancel`	the file dialog has been canceled without selecting files	`FileDropEvent`
`filedialogclose`	the file dialog has been closed with files selected	`FileDropEvent`
`filedialogopen`	the file dialog has been opened	`FileDropEvent`
`windowfiledragenter`	a dragenter event has occurred on the document (event is named windowfiledragenter so not to confuse document with file)	`FileDropDragEvent`
`windowfiledragleave`	a dragleave event has occurred on the document (event is named windowfiledragleave so not to confuse document with file)	`FileDropDragEvent`
`windowfiledragover`	a dragover event has occurred on the document (event is named windowfiledragover so not to confuse document with file)	`FileDropDragEvent`

Errors

class	reason	code
`InvalidFileTypeError`	file type does not satisfy `accept`	`InvalidFileType` (0)
`FileCountExceededError`	total number of files selected or dropped exceeds `fileLimit`	`FileCountExceeded` (1)
`FileSizeMinimumNotMetError`	file does not satisify `minSize`	`FileSizeMinimumNotMet` (2)
`FileSizeMaximumExceededError`	file does not satisify `maxSize`	`FileSizeMaximumExceeded` (3)

Typescript

In order for typings to work properly, you'll need to add the following to global.d.ts until this issue is resolved:

declare type FileDropEvent = import("filedrop-svelte/event").FileDropEvent;
declare type FileDropSelectEvent = import("filedrop-svelte/event").FileDropSelectEvent;
declare type FileDropDragEvent = import("filedrop-svelte/event").FileDropDragEvent;
declare namespace svelte.JSX {
    interface HTMLAttributes<T> {
        onfiledrop?: (event: CustomEvent<FileDropSelectEvent> & { target: EventTarget & T }) => void;
        onfiledragenter?: (event: CustomEvent<FileDropDragEvent> & { target: EventTarget & T }) => void;
        onfiledragleave?: (event: CustomEvent<FileDropDragEvent> & { target: EventTarget & T }) => void;
        onfiledragover?: (event: CustomEvent<FileDropDragEvent> & { target: EventTarget & T }) => void;
        onfiledialogcancel?: (event: CustomEvent<FileDropEvent> & { target: EventTarget & T }) => void;
        onfiledialogclose?: (event: CustomEvent<FileDropEvent> & { target: EventTarget & T }) => void;
        onfiledialogopen?: (event: CustomEvent<FileDropEvent> & { target: EventTarget & T }) => void;
        onwindowfiledragenter?: (event: CustomEvent<FileDropDragEvent> & { target: EventTarget & T }) => void;
        onwindowfiledragleave?: (event: CustomEvent<FileDropDragEvent> & { target: EventTarget & T }) => void;
        onwindowfiledragover?: (event: CustomEvent<FileDropDragEvent> & { target: EventTarget & T }) => void;
    }
}

You may need to edit tsconfig.json to include global.d.ts if it isn't already.

Alternatives

svelte-file-dropzone

Previous art

Dependencies

file-selector

Todo

tests
better documentation
demo website

License

MIT

Top categories

tailwind daisyui admin template popup mdsvex portfolio blog form ecommerce ui carousel auth dark seo image routing

Need a Svelte website built?

Hire a professional Svelte developer today.