Drag-drop-file-tk NPM

drag-drop-image-tk

Description

The drag-drop-file-tk library provides a React component for implementing drag and drop functionality for image files. This library allows users to select one or multiple image files from their computer or drag them into a designated area for preview.

Application Screenshot

Installation

Install the library via npm:

npm install drag-drop-file-tk

Or use yarn:

yarn add drag-drop-file-tk

Usage

Below is an example of how to use the DragDropFile component in your React application:

import React from "react";
import DragDropFile from "drag-drop-file-tk";

const App = () => {
  const handleChange = (files) => {
    // Handle selected files here
    console.log(files);
  };

  return (
    <div>
      <DragDropFile handleChange={handleChange} />
    </div>
  );
};

export default App;

Props

Prop	Description	Type	Default
`handleChange`	Handler function called when a file is selected	(files: File[]) => void	-
	or dragged and dropped.
`limit`	Limit the number of files that can be selected.	number	-
`placeholder`	Placeholder for the drag and drop area.	string	-
`title`	Title of the drag and drop area.	string	-
`clearTitle`	Title for the clear selected image button.	string	'Clear image'
`withImagePreview`	Width of the image preview.	number	-
`heightImagePreview`	Height of the image preview.	number	-
`messageLimit`	Message when exceeding the file limit.	string	-
`showMessageLimit`	Enable displaying a message when exceeding	boolean	-
	the file limit.
`defaultPreview`	Default image preview	string[]	-