FileDrop

A file dropzone action & component for Svelte.

Install

npm i filedrop-svelte -D

# yarn add filedrop-svelte -dev

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
</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/lib/event").FileDropEvent;
declare type FileDropSelectEvent = import("filedrop-svelte/lib/event").FileDropSelectEvent;
declare type FileDropDragEvent = import("filedrop-svelte/lib/event").FileDropDragEvent;
declare namespace svelte.JSX {
    interface HTMLAttributes<T> {
        onfiledrop?: (event: CustomEvent<FileDropSelectEvent> & { target: EventTarget & T }) => void;
        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

• react-dropzone
• svelte-file-dropzone

Dependencies

• file-selector

Todo

• tests
• better documentation
• demo website

License

MIT