soorria / solid-dropzone

solid-dropzone

Drag and drop file input library for SolidJS.

Note: This is a SolidJS port of react-dropzone

Quick start

Install it:

npm i @soorria/solid-dropzone
# or
yarn add @soorria/solid-dropzone
# or
pnpm add @soorria/solid-dropzone

Use it:

import { createDropzone } from '@soorria/solid-dropzone'

Example

Adapted from the first example here: https://github.com/react-dropzone/react-dropzone/#usage

import { createDropzone } from '@soorria/solid-dropzone'

function MyDropzone() {
  const onDrop = (acceptedFiles: File[]) => {
    // Do something with the files
  }
  const dropzone = createDropzone({ onDrop })

  return (
    <div {...dropzone.getRootProps()}>
      <input {...dropzone.getInputProps()} />
      {
        dropzone.isDragActive ?
          <p>Drop the files here ...</p> :
          <p>Drag 'n' drop some files here, or click to select files</p>
      }
    </div>
  )
}