solid-dzone

Simple, high-quality drag'n'drop primitive for Solid JS

Quick start

Install it:

npm i solid-dzone
# or
yarn add solid-dzone
# or
pnpm add solid-dzone

Usage

import createDropzone from "solid-dzone"

const MyDropZone = () => {
  const { 
    getRootProps,
    getInputProps,
    setRefs,
  } = createDropzone<HTMLDivElement>() // You MUST specify the type of the root element for proper typing

  let inputRef!: HTMLInputElement
  let rootRef!: HTMLDivElement

  setTimeout(() => {
    // Refs must be set inside a timeout to ensure the elements have been mounted
    setRefs(rootRef, inputRef)
  })

  return (
    <div {...getRootProps()} ref={rootRef}>
      <input {...getInputProps()} ref={inputRef}/>
    </div>
  )
}

Dropzone Props Getters

The dropzone property getters are just two functions that return objects with properties you need to create the drag'n'drop zone. The root properties can be applied to whatever ellement you want, whereas the input properties must be applied to an <input>.

Note that whatever other props you want to add to the elements, you should always pass them through the functions, rather than applying them directly to avoid conflicts and unexpected behaviours.

<div
  {...getRootProps({
    role: "button",
    onDrop: e => console.log("FILE WAS DROPPED")
  })}
>

createDropzone options

Name	Type	Notes
disabled	boolean	Disable the dropzone
maxSize	number	Maximum file size in bytes
minSize	number	Minimum file size in bytes
multiple	boolean	Allow multiple files
maxFiles	number	Maximum number of files
accept	string[]	Array of allowed file types, see link for possible values
noClick	boolean	Disable click to open file dialog
noKeyboard	boolean	Disable keyboard to open file dialog
noDrag	boolean	Disable drag'n'drop
validator	function	Custom file validation, overrides default

createDropzone return values

Name	Type	Notes
isFocused	function	Boolean signal that indicates whether the dropzone is focused or not
isFileDialogActive	function	Boolean signal that indicates whether the file dialog is open or not
isDragging	function	Boolean signal that indicates whether the a file is being dragged over the root or not
getRootProps	function	Function that returns an object of props for the root element
getInputProps	function	Function that returns an object of props for the input element
openFileDialog	function	Function to programmatically open the file dialog
setRefs	function	Set the root and input refs. Must be called inside a setTimeout to ensure elements are mounted
files	function	Signal that returns an array of files
errors	function	Object containing errors. Each key is a file name and the value is an object containing the error message and the file
removeFile	function	Function to remove a specific file by name
removeError	function	Function to remove a specific error by file name
clearFiles	function	Function to clear all files

File type definition

Name	Type
source	string
name	string
size	number
file	File

Contributors

Licence

MIT

Changelog

1.0.0

Major Changes

• 38a0e3b: Create the reusable primitive createDropzone, that allows for the creation of simple, high quality drag'n'drop components in Solid JS