easy-file-dragdrop

easy-file-dragdrop is a React file upload library with a split input/preview model, drag-and-drop support, animated transitions, and bundled CSS output.

Install

npm install easy-file-dragdrop

Peer dependencies:

• react ^18 || ^19
• react-dom ^18 || ^19

Import styles

import "easy-file-dragdrop/styles.css";

Basic usage

import React from "react";
import { useDragDrop } from "easy-file-dragdrop";

export default function Example() {
  const { InputCanvas, PreviewPane } = useDragDrop();
  const [files, setFiles] = React.useState([]);

  return (
    <>
      <InputCanvas
        label="Upload attachments"
        description="PNG, JPG, or PDF up to 5 MB"
        value={files}
        onChange={setFiles}
        accept="image/*,.pdf"
        multiple
        maxFiles={5}
        maxFileSize={5}
      />
      <PreviewPane showPreview />
    </>
  );
}

Controlled usage

InputCanvas is controlled. Pass value and onChange.

import React from "react";
import { FileObject, useEasyDragDrop } from "easy-file-dragdrop";

export default function UploadForm() {
  const [files, setFiles] = React.useState<FileObject[]>([]);
  const { InputCanvas, PreviewPane } = useEasyDragDrop();

  return (
    <>
      <InputCanvas
        name="files"
        label="Upload files"
        value={files}
        onChange={setFiles}
        accept="image/*,.pdf"
        multiple
        maxFiles={5}
      />
      <PreviewPane />
    </>
  );
}

API

useDragDrop and useEasyDragDrop both return:

• InputCanvas
• PreviewPane

FileObject shape:

• id
• createdAt
• metadata: name, size, type, extension, lastModified, isImage
• image (for images): width, height, aspectRatio
• file

InputCanvas props:

• name, id, label, description, onBlur
• value, onChange
• accept, multiple, disabled
• maxFiles, maxFileSize, maxTotalSize
• validation

PreviewPane props:

• showPreview
• imageLoader

Build

npm run build

License

ISC