filedrop-svelte
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.1 • Public • Published

    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

    Previous art

    Dependencies

    Todo

    • tests
    • better documentation
    • demo website

    License

    MIT

    Install

    npm i filedrop-svelte

    DownloadsWeekly Downloads

    246

    Version

    0.1.1

    License

    MIT

    Unpacked Size

    46.7 kB

    Total Files

    27

    Last publish

    Collaborators

    • chanced